JavaScript从入门到精通之入门篇（二）函数和数组

最新推荐文章于 2020-12-10 14:55:17 发布

IT淘金者

最新推荐文章于 2020-12-10 14:55:17 发布

阅读量204

点赞数 1

分类专栏： JavaScript 知识体系 JavaScript从入门到精通文章标签： javscript从入门到精通

本文链接：https://blog.csdn.net/u013205165/article/details/100603006

版权

JavaScript 同时被 3 个专栏收录

87 篇文章 0 订阅

订阅专栏

知识体系

5 篇文章 0 订阅

订阅专栏

JavaScript从入门到精通

2 篇文章 0 订阅

订阅专栏

入门篇大纲

在这里插入图片描述

第二部分函数与数组

1.函数

函数的定义

普通函数

function 函数名（表达式1…） { 代码块 }
js是解释性语言，在当前script标签代码执行的开始阶段，就会将普通函数放入堆中，也只是将引用放入堆中，函数中的内容并没有解释执行，只有当函数执行的时候才会解析，执行一次函数，解析一次
普通函数 function fn() {} 可以在定义之前调用执行

fn(); // 可以在定义之前调用
function fn() {
	console.log('普通函数');
}
fn(); // 也可以在定义之后调用

函数重名的危险
1. 普通函数和匿名函数重名，匿名函数会覆盖普通函数，原因是普通函数在script标签开始时就将函数放入堆中，而匿名函数是在代码解析的时候才存入堆中，如果名称相同，就会覆盖原函数；
2. 普通函数和变量重名，变量会覆盖普通函数；
  例子：

//  1. 普通函数和匿名函数重名
function fn() {
	console.log('我是普通函数');
}
var fn = function() {
	console.log('我是匿名函数');
}
fn(); // 输出：我是匿名函数
//  2. 普通函数和变量重名
function fn() {
	console.log('我是普通函数');
}
var fn = 10;
fn(); // 调用失败，会报fn未定义的错误

匿名函数

定义： var 变量 = function() { 代码块}
将匿名函数赋值给变量，执行变量函数就是执行这个匿名函数，匿名函数不能再定义该函数之前进行调用

var fn = function() {
	console.log('匿名函数');
}
fn(); // 只能在定义之后调用匿名函数

不建议使用匿名函数，通常使用addEventListener() 方法替代

// 兼容性极好 ie6+, 但是不建议使用
btn.onclick = function() {
	console.log(this); 
}
// 通常用下面方式代替，兼容性 ie8+
btn.addEventListener('click', clickHandler);
function clickHandler(e) {
	console.log(e);
}

构造函数

定义：var 变量 = new Function(参数字符串, 执行语句代码块字符串)
使用全字符串，参数在最前面，后面的字符串内容是执行代码的语句
缺点：代码会做2次执行，第一次会将函数中的字符串解析为普通代码，第二次执行该代码，因此，效率极低
优点：可以用任何语言传入该js代码并且执行

var fn = new Function("a", "console.log(a)");
fn(10); // 输出 10

自执行函数

定义：(function () { 代码块}) ()
自执行函数只能执行一次，执行完成后再也找不到，变成孤儿对象（但是有引用，不能被回收）

(function () {
	console.log('自执行函数');
})();

变量的作用域

全局变量

所谓全局变量就是在script标签中直接使用var定义的变量
当在script中定义了变量，在定义前调用是undefined，这是因为定义变量是在内存中开辟了该变量的存储位置，并在代码解释执行时将值存在栈中，如果提前调用，计算机在内存中找不到对应的存储位置，所以会报undefined

console.log(s); // 报错：s is not defined 
var s = 100;

如果在上一个script中调用下一个script中定义的变量，因为没有开辟存储空间，所以永远报错

<script type="text/javascript">
  console.log(s); // 报错：s is not defined 
</script>
<script type="text/javascript">
  var s = 100;
</script>

一旦定义变量完成后，在后面的script中都是可以任意调用的，因为这些变量都是全局变量

<script type="text/javascript">
  var s = 100;
  console.log(s); // 输出： 100
</script>
<script type="text/javascript">
  console.log(s); // 输出： 100
</script>

局部变量

所谓局部变量就是在函数中使用var定义的变量
函数中的定义的局部变量是有作用域的，他的范围仅限于该函数内部，函数运行完成后，函数内定义的变量将会自动销毁

var s;
function fn() {
	var c = 10; // 这是局部变量
	c += 3; 
	console.log(c); // 输出：13
	// 可以在函数中修改全局变量的值，修改后，全局调用有效
	s == 10;
	console.log(s) // 输出：10
}
fn();

局部变量和全局变量重名

如果在函数中定义了某个局部变量名，那么在该函数中所有的这个变量都是局部变量，不能通过直接使用变量名的方法调用到外部同名的全局变量

例子：

 var s = 10;
 function fn() {
 	var s = 20;
 	s += 20;
 	window.s += 10; // 想要在函数内调用与局部变量同名的全局变量，需要加上window前缀
 	console.log(s); // 输出：40
 	console.log(window.s); // 输出：20
 }
 fn();

典型例子

 var s = 10;
 function fn() {
 	console.log(s); // 输出：undefined
 	s += 20;
 	console.log(s); // 输出：NaN 因为是 undefined += 10
 	var s = 20;	// 函数内一旦定义，在其前后调用都为布局变量
 }
 fn();

参数

定义

由于js是一种弱类型语言，在使用参数时需要注意以下两点

参数类型：因为参数类型不能固定，如果是对外开放的函数参数，一定需要在代码中判断输入参数的类型
初始化：在ES5中函数的参数不能设置初始化值，所以需要在执行代码时给他自定义一个默认的初始值；而在ES6中是可有初始化参数设置，直接可以使用，比如function(a, b, type='+')，参数type默认是"+"

实参和形参

对象参数

如果参数为对象，传入的是引用对象的地址

function fn(o) {
  var obj = {a: 1};
  console.log(o === obj); // false
  console.log(o === obj3); // true
}
var obj3 = {a: 3};
fn(obj3);

函数参数–回调

参数如果传入的是一个函数名，在当前函数中运行了这个参数，这就是回调

function fn1(o, fn){
	o.a += 1;
	fn(o); // 执行回调
	console.log(o.a); // 输出: 12
}
function fn2(_o){
	_o.a += 10;
}
var obj = {a: 1};
fn1(obj, fn2);

函数执行自己–递归

var sum1 = 0;
var i = 0;
function fn() {
  if (i === 100){
  	return； // 跳出函数外
  }
  sum += i;
  i++;
  fn(); // 执行回调
}

return

注意事项

return语句会终止函数的执行并返回函数的值，return是JavaScript里函数返回值的关键字
一个函数内处理的结果可以使用return返回，这样在调用函数的地方就可以用变量接受返回结果
return关键字内任何类型的变量数据或表达式都可以进行返回，甚至什么都不返回也可以
return也可以作为阻止后续代码执行的语句被使用
function abc() { if (bool) return}这样可以有效的控制语句在一定的条件下执行，不过一定要与break区分，break是用在条件当中，跳出的也仅仅是条件和循环，但是return却可以跳出函数，仅仅是针对函数使用，如果没有函数是不能使用return的

应用场景

返回一个数据

function createObj(_a) {
	return {a: _a}; // 返回一个数据对象
}
console.log(createObj(3) === createObj(3)); // 输出：false

工厂模式或者单例模式

var box;
function createBox(_a, _b) {
	if (!box) {
		box = {};
	}
	box.a = _a;
	box.b = _b;
	return box;
}
console.log(createBox(3, 5) === createBox(10, 20)); // 输出： true

通过参数传入的对象

function setObjProper(obj) {
	obj = obj || {}; // 宽模式
	obj.n = 3;
	return obj;
}
var obj = setObjProper({});
var obj1 = setObjProper();
var obj2 = {a: 5};
console.log(obj2 === setObjProper(obj2)); // 输出：true
console.log(obj, obj1); // 输出：{n: 3}  {n: 3}

如果参数一个函数，返回的是回调函数的结果

function fn1(fn) {
	var obj = {};
	return fn(obj); // 返回回调函数的结果
}
function fn2(obj) {
	obj.a = 10;
	return obj;
}
console.log(fn1(fn2)); // 输出：{a: 10}

返回的是一个私密的对象 (闭包)

function fn() {
	return function () {
		console.log('aaa');
	}
}
fn()(); // 输出： aaa

返回一个数组，返回多个元素
返回一个对象，返回多个元素
返回一个函数体
跳出

2.数组

定义

数据将无序的数据做有序的排列，存储在一个变量中
原生JS中没有数组类型，原生JS中的数据可以存储多个不同类型的数据（弱类型）
Array.isArray(arr) 是判断arr是否为数组
数组中，标识元素所在的位置，叫做下标，也叫做索引
数组中，标识元素的内容，arr[0]这个就叫做下标变量

数组的创建

字面量创建
var arr = [1, 2, 3, 4, 5]
对象构造函数创建
var arr = new Object([1, 2, 3, 4, 5])
构造函数创建
var arr = new Array()
注意：
- 创建数组时，有且仅有一个数值类型的参数，这个参数就是数组的长度
- 创建数组时，有且仅有一个非数组类型的参数或者有两个或两个以上的参数，这些参数都是数组的元素

数组的长度

数组的长度是可以设置的
将数组的长度设置为0，表示清空数组
如果数组的长度小于原数组长度，意味着将数组从0位截取到指定位置

var arr = [1, 2, 3, 4, 5];
arr[arr.length-1] = 6; // 将数组中最后一个元素5替换为6
arr[arr.length] = 6; // 给数组的尾部添加一个新元素6

数组的遍历

for循环遍历

var arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
	console.log(i + '=====' + arr[i]); 
	// 输出： 0=====1
    //		 1=====2
    //       2=====3 
    //       3=====4 
    //       4=====5
}

for in 遍历 (能遍历出数组中所有的对象)

var arr = [1, 2, 3, 4, 5];
arr.key = 100;
for (let prop in arr) {
	console.log(prop + '=====' + arr[prop]); 
	// 输出： 0=====1
    //		 1=====2
    //       2=====3 
    //       3=====4 
    //       4=====5
    //       key=====100
}

forEach遍历
forEach遍历当前数组，没有返回值，不会返回新数组

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(t, i, arr)) {// 参数为：元素值，元素下标，数组对象
	console.log(t, i, arr)
})

map遍历
map遍历数组，将当前数组中的元素返回给新数组，不适用return时，新数组的长度与原数组相同，但是每个元素都是undefined

var arr = [1, 2, 3, 4, 5];
arr = arr.map(function (t) {
	if (t % 2 === 0) { // 数组元素中偶数元素 + 1
		return t + 1;
	}
	return t;
});
console.log(arr); // 输出：[1, 3, 3, 5, 5]

冒泡排序

var arr = [6, 3, 4, 5, 7, 1, 2, 9, 0, 8];
// 要点1： 外层循环从后向前
for (var i = arr.length; i > 0; i--) {
	// 要点2：内层循环从前向后
	for (var j = 0; j < arr.length; j++) {
		// 要点3：只判断内层循环的当前为和下一位的大小，然后互换
		if (arr[j] > arr[j+1]) { // 升序: j>j+1 降序：j<j+1
			var temp = arr[j];
			arr[j] = arr[j+1];
			arr[j+1] = temp;
		}	
	}
}
console.log(arr); // 输出：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

选择排序

var arr = [6, 3, 4, 5, 7, 1, 2, 9, 0, 8];
// 要点1：外层循环从头到尾
for (var i = 0; i < arr.length; i++) {
	// 要点2：每次初始最小值是当前循环所在的值
	var min = i; 
	// 要点3：从当前所在值的下一项到尾部循环
	for (var j = min + 1; j < arr.length; j++) {
		// 要点4：比较大小，找出后面元素中最小值所在的下标
		if (arr[min] > arr[j]) { // 升序：min>j  降序：min<j
			min = j;
		}
	}
	// 要点5：互换当前下标值和最小值的下标值
	var temp = arr[i];
	arr[i] = arr[min];
	arr[min] = temp;
}
console.log(arr) // 输出：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

数组的方法

push

var arr = [1, 2, 3, 4, 5];
// 向数组尾部添加元素
var len = arr.push(6); // 返回数组的新长度
// 典型应用
var len = arr.push(6, 7, 8);
var len2 = arr.push([6, 7, 8]);
console.log(len, len2) // 输出：8   9

pop

// 删除数组尾部的元素
var t = arr.pop(); //返回被删除的元素
// 典型应用
var arr = [-2, -1, 0, 1, 2, 3, 4];
var arr1 = [];
var t;
while (t = arr.pop()) { // 会获取arr中0以后的所有元素，并倒序排列
	arr1.push(t);
}
console.log(arr1); // [4, 3, 2, 1]

shift

// 删除数组的头部元素
var t = arr.shift(); // 返回被删除的元素

unshift

var arr = [1, 2, 3, 4, 5];
// 向数组头部添加元素
var len = arr.unshift(); // 返回数组的新长度
var len = arr.unshift(0); // [0, 1, 2, 3, 4, 5]
// 尽量减少unshift的使用，从数组头部添加元素费性能

join

var arr = [1, 2, 3, 4];
console.log(arr.join()); // 与arr.toString()相同
console.log(arr.join('#')); // 设置一个符号，用这个符号链接数组的每一个元素，形成一个新字符串
console.log(arr.join('')); // 元素紧密相连

concat

var arr = [1, 2, 3, 4];
var arr1 = arr.concat(); // 没有参数数，表示复制数组
var arr2 = arr.concat(5, 6); // 将arr数组链接 5，6两个元素，形成新数组，原数组不变
var arr3 = arr.concat([5, 6, 7]); // 将arr数组和数组[5, 6, 7]合并形成新数组
var arr4 = [5, 6, 7];
var arr5 = arr.concat(arr4); // 将两个数组链接形成新数组

splice

var arr = [1, 2, 3, 4, 5];
arr.splice(); // 数组插入删除替换元素，并且返回被删除元素组合成新数组
var arr1 = arr.splice(); // 创建一个新的空数组返回
var arr1 = arr.splice(3); // 从下标是3开始删除到尾部
var arr1 = arr.splice(0); // 将arr的所有元素导入arr1中，清空arr
var arr1 = arr.splice(0, 2); // 从arr数组的下标0开始删除2位元素
var arr1 = arr.splice(0, 0, -1); // 在第0位插入一个-1
var arr1 = arr.splice(-1, 0, -1); // 在第-1位（倒数第1位）插入一个-1
var arr1 = arr.splice(arr.length, 0, -1); // 在数组尾部插入一份-1
var arr1 = arr.splice(1, 2, -1, -2); // 从第1位开始替换两个元素为-1， -2

slice

var arr = [1, 2, 3, 4, 5];
arr.slice(); // 数组截取元素，并且返回被截取元素组合成新数组，原数组不变
var arr1 = arr.slice(); // 复制arr的所有元素给arr1，和原数组没有引用关系
var arr1 = arr.slice(0); // 复制arr的所有元素给arr1，和原数组没有引用关系
var arr1 = arr.slice(3); // 将数组从下标3开始到结尾截取形成新数组
var arr1 = arr.slice(-2); // 将数组从倒数第2位开始到结尾截取形成新数组
var arr1 = arr.slice(3, 4); // 将数组从下标3开始到下标4截取形成新数组
var arr1 = arr.slice(-2, 4); // 将数组从倒数第2位开始到下标4截取形成新数组
var arr1 = arr.slice(-2, -1); //  将数组从倒数第2位开始到倒数第1位截取形成新数组

indexOf

var arr = [1, 2, 3, 4, 5];
arr.indexOf(); // 在数组中查找元素，返回查找到元素的下标，没有找到返回-1
console.log(arr.indexOf(2)); // 从0开始向后查找2
console.log(arr.indexOf(2, 3)); // 从下标3开始向后查找2

lastIndexOf

var arr = [1, 2, 3, 4, 5];
arr.lastIndexOf(); // 在数组中从后向前查找元素，返回查找到元素的下标，没有找到返回-1
console.log(arr.lastIndexOf(2)); // 从后向前查找2
console.log(arr.lastIndexOf(2, 3)); // 从下标3开始向前查找2

reverse

var arr = [1, 2, 6, 4, 3, 5];
// 将原数组倒序改变，返回的新数组和原数组是引用关系
var arr1 = arr.reverse();
console.log(arr, arr === arr1); // 输出: [5, 3, 4, 6, 2, 1] true

sort

var arr = [1, 12, 6, 4, 3, 5];
// 将原数组中的元素按位排序，原数组发生改变，返回的新数组和原数组是引用关系
var arr1 = arr.sort();
console.log(arr, arr === arr1); // 输出: [1, 12, 3, 4, 5, 6] true
// sort(function(pre, next){}); 可以实现升序降序排列
// 升序排序 输出：[1, 3, 4, 5, 6, 12]
arr.sort(function(pre, next) {
	return pre - next; 
});
// 降序排序 输出：[12, 6, 5, 4, 3, 1]
arr.sort(function(pre, next) {
	return next-pre;
});

some

判断数组中的所有元素是否满足某条件，只要有一个满足条件返回true, 否则返回false

var arr = [1, 3, 5, 2, 7, 8, 0, 6]
var boolean = arr.some(function(t) {
	t ++;
	return t > 5;
})
console.log(boolean); // 输出： true

every

判断数组中的所有元素是否满足某条件，只有当全部满足返回true，否则返回false

var arr = [1, 3, 5, 2, 7, 8, 0, 6]
var boolean = arr.every(function(t) {
	t ++;
	return t > 5;
})
console.log(boolean); // 输出： false

filter

判断数组中的所有元素是否满足某条件，并返回满足条件的所有元素组成的新数组，原数组元素不变

var arr = [1, 3, 5, 2, 7, 8, 0, 6]
var arr1 = arr.filter(function(t) {
	t ++;
	return t > 5;
})
console.log(arr1); // 输出： [5, 7, 8, 6]

reduce

// 如果没有initValue值，sum就是第0项的值，item就是第一项值，所以index是从1开始
var s = arr.reduce(function(sum, item, index)) {
	console.log(sum, item, index);
	return sum + item;
}, initValue); // 这里第二个参数是初始值，如果设置这个初始值，index就从0开始

from

var div = document.getElementsByTagName('div');
// es5：将对象转换成数组
var arr = Array.prototype.slice.call(div); 
// es6: 将对象转换成数组
var arr = Array.from(div);

参数数组

在函数中，参数如果写在所有参数的最前面，那就是必要参数
es5中所有的参数一般都需要按位填写，如果没有填写，就会变成undefined
多填进入的参数值不会被直接获取到
如果一个函数的参数不定，我们一般在函数定义时不写参数，在函数体中使用参数数组arguments进行处理

arguments典型案例

// 1. 求若干数的最大值
function max() {
	var arr = Array.from(arguments);
	return arr.reduce(function(p1, p2){
		return p1 > p2 ? p1 : p2;
	});
}
console.log(max(1, 2, 3, 6, 3, 2, 6, 8, 9)); // 输出：9

// 2.函数回调
function fn() {
	console.log(arguments.callee); // 获取当前执行的函数
	console.log(arguments.callee.a); // 获取属性值
	console.log(arguments.callee.caller); // 回调当前函数的父级函数
}
fn.a = 10; // 给对象添加属性
fn(2, 3, 4); // 执行函数
function fn2(fn) {
	fn();
}
fn2(fn); // 执行父级函数

二维数组

var arr = [
	[1, 2, 3, 4, 5],
	[1, 2, 3, 4, 5],
	[1, 2, 3, 4, 5],
	[1, 2, 3, 4, 5],
	[1, 2, 3, 4, 5],
]

对象数组

var arr = [
	{a: 1, b: 2, c: 3},
	{a: 1, b: 2, c: 3},
	{a: 1, b: 2, c: 3},
]

IT淘金者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript从入门到精通之入门篇（二）函数和数组

入门篇大纲

第二部分 函数与数组

1.函数

函数的定义

普通函数

匿名函数

构造函数

自执行函数

变量的作用域

全局变量

局部变量

局部变量和全局变量重名

参数

定义

实参和形参

对象参数

函数参数–回调

函数执行自己–递归

return

注意事项

应用场景

2.数组

定义

数组的创建

数组的长度

数组的遍历

冒泡排序

选择排序

数组的方法

push

pop

shift

unshift

join

concat

splice

slice

indexOf

lastIndexOf

reverse

sort

some

every

filter

reduce

from

参数数组

二维数组

对象数组

第二部分函数与数组