ES5数组方法

发表于 | 分类于 |

在学习使用 JS 的过程中，数组是在是太常用了，所以我们有必要掌握数组的常用操作方法。

在讲 ES5 数组方法之前，我们先回顾一下之前的数组方法。

创建数组

1
2
3
4
5
var arr = []; //创建一个空数组
var arr1 = [1, 2, 3, 4, 5]; //在创建一个有元素的数组
var arr2 = new Array(); //使用数组的原型构造一个空数组
var arr3 = new Array(5); //创建一个长度为5的数组
var arr4 = new Array(1, 2, 3, 4, 5); //等同于arr1

数组的 length 属性:表明数组中元素的个数，改变 length 值会改变数组。

ES3 数组的方法

Array.join()方法将数组中的所有元素都转换为字符串拼接在一起，返回最后生成的字符串。join()可以指定一个可选的字符串在生成的字符串中来分割数组的各个元素，如果不指定这个字符串，默认为逗号。

1
2
3
4
5
6
7
8
9
10
11
12
13
    var arr = [1,2,3,4,5];
    arr.join();					//1,2,3,4,5
    arr.join('-');				//1-2-3-4-5
    arr.join('');			    //12345
```

#### reverse()

Array.reverse()方法可以将数组中的元素倒序，需要注意的是，它采用的是替换，不会产生新的数组，而是在原先的数组中重新排列。

```js
var arr = [1, 2, 3, 4, 5]
arr.reverse() //[5,4,3,2,1]

sort()

Array.sort()方法将数组中的元素排序并返回排序后的数组，它也不会产生新数组。没有参数时以字母表的顺序排序，如果数组中包含 undefined 的元素，他们会排到最后。

1
2
var arr = ["e", "d", "c", "b", "a"];
arr.sort(); //'a','b','c','d','e';

但是

1
2
var arr = [5, 44, 333, 2222, 11111];
arr.sort(); // ???

上面得到的结果明显不是我们想要的。那怎么按照我们想要的顺序来进行排序呢？sort()可以接受一个比较函数，这个函数可以决定它的两个参数的先后顺序。如：

1
2
3
4
5
var arr = [5, 44, 333, 2222, 11111];
arr.sort(function (a, b) {
	return a - b; //依次返回负数、0、正数
});
//这里要注意的是，负数和0不改变位置，正数则交换位置

sort()方法使用的冒泡排序，为什么这样说呢，看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
arr.sort(function (a, b) {
	console.log(arr); //每次打印的数组可以去看下
	debugger;
	return a - b; //依次返回负数、0、正数
});
//针对首字母的排序
var arr = ["ant", "Bug", "car", "Dog"];
arr.sort(); //['Bug','Dog','ant','cat'];
arr.sort(function (a, b) {
	var m = a.toLowerCase();
	var n = b.toLowerCase();
	if (a < b) return -1;
	if (a > b) return 1;
	return 0;
}); //['ant','Bug','cat','Dog'];

cancat()

Array.concat()方法可以把两（多）个数组连接成一个数组。需要注意的是，concat()不会递归扁平化数组的数组。如：

1
2
3
4
5
var arr = [1, 2, 3];
arr.concat(4, 5); //[1,2,3,4,5]
arr.concat([4, 5]); //[1,2,3,4,5]
arr.concat([4, 5], [6, 7]); //[1,2,3,4,5,6,7]
arr.concat(4, [5, [6, 7]]); //[1,2,3,4,5,[6,7]]

slice()

Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段的开始位置和结束位置，包含开始位置但不包括借宿位置；如果只有一个参数，则从指定位置到数组结束；如果参数中有负数，则表示从相对数组最后一个元素的位置。

1
2
3
4
5
var arr = [1, 2, 3, 4, 5];
arr.slice(0, 3); //[1,2,3]
arr.slice(3); //[4,5]
arr.slice(-3, -2); //[3]
arr.slice(-1, -3); //[]没有符合条件的元素

splice()

Array.splice()方法是在数组中插入或删除元素的通用方法。第一个参数表示插入或删除元素的起始位置，第二个参数表示删除元素的个数，如果省略第二个参数，那么会删除指定位置之后的所有元素。如果你是插入元素，那么后面跟任意个你要插入的元素。

1
2
3
4
5
var arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); //[1,4,5]
arr.splice(1, 0, 2, 3, "a"); //[1,2,3,'a',4,5]
arr.splice(1, 3, ["a", "b", "b"]); //[1,['a','b','c'],4,5];
//需要注意的是，这里会插入这个数组，cancat()则是插入的数组元素

push()和 pop()

push()和 pop()方法都是在数组尾部操作数组元素的方法。push()是添加元素，pop()是删除元素并返回删除的值。

1
2
3
4
var arr = [1, 2, 3, 4, 5];
arr.pop(); //5
arr.push(6); //[1,2,3,4,6]
arr.push([7, 8]); //[1,2,3,4,6,[7,8]]

unshift()和 shift()

unshift()和 shift()方法类似于 push()和 pop(),区别是，他们是操作数组头部的方法。

1
2
3
4
var arr = [1, 2, 3, 4, 5];
arr.unshift(0); //[0,1,2,3,4,5]
arr.unshift(["a", "b"]); //[['a','b'],0,1,2,3,4,5]
arr.shift(); //[0,1,2,3,4,5]

toString()和 toLocaleString()

数组和其他 js 对象一样拥有 toString()方法，该方法会将每个元素转化为字符串，并用逗号作分隔符连接起来。至于 toLocaleString()，我也没搞清楚他们之间的区别，知道的朋友告之下。

1
2
var arr = [1, 2, 3, 4, 5];
arr.toString(); //1,2,3,4,5		和join()方法一样

ES5 的数组方法

forEach()

forEach()方法遍历整个数组，并为每个元素调用指定的函数。这个函数接受三个参数：数组元素、元素索引、数组本身。如果只关心元素值，可省略后面的参数。需要注意的是，forEach()方法不能在遍历时终止，如果需要，必须将 forEach()放到 try 语句中，不建议这样，可以使用 for 循环中断。

1
2
3
4
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item, index, arr) {
	item = item + 1;
}); //？？？

map()

map()方法将数组的每个元素传递给指定的函数，并返回一个新数组，包含这个函数的返回值。使用方法和 forEach()一样。

1
2
3
4
var arr = [1, 2, 3, 4, 5];
var Arr = arr.map(function (item, index, arr) {
	return item + 1;
}); //[2,3,4,5,6];

这里需要注意的是，map 是有返回值的，如果没有返回值会是 undefined

1
2
3
4
5
6
7
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var brr = arr.map((item) => {
	if (item > 5) {
		return item;
	}
});
brr; //[undefined, undefined, undefined, undefined, undefined, 6, 7, 8, 9]

filter()

filter()方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判断的：返回一个布尔值，为 true 就添加到一个做为返回值的数组中。需要注意的是，它会跳过缺少的元素。调用方法和 forEach()一样。

1
2
3
4
var arr = [1, 2, 3, 4, 5];
var Arr = arr.filter(function (item, index, arr) {
	return item < 3;
}); //[1,2]

every()和 some()

every()和 some()方法是数组的逻辑判定：他们对数组元素应用指定的函数进行判定，返回 true 或 false。

1
2
3
4
5
6
7
var arr = [1, 2, 3, 4, 5];
arr.every(function (item) {
	return item >= 3 ? true : false;
}); //false;表示数组元素都大于等于3，不成立为false
arr.some(function (item) {
	return item == 3 ? true : false;
}); //true;	数组中存在等于3的元素

indexOf()和 lastIndexOf()

字符串也有这两个方法，使用方法也很类似,如果没有符合条件的元素返回-1。

1
2
3
4
5
var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); //1
arr.indexOf(2, 2); //3
arr.lastIndexOf(2); //3
arr.lastIndexOf(2, 2); //1

除此之外，还有 reduce()和 reduceRight(),现阶段用的很少，也没有什么自己的理解，有兴趣的朋友可以自己找相关的资料。

[越努力，越幸运！]