JS与数组相关的12个方法

JS数组相关的方法

1、push()

push()方法向数组的末尾添加新的元素，并返回新的数组长度，会改变原数组。

var arr = [1, 2, 3];
arr.push(4);
console.log(arr);

[1, 2, 3, 4]

2、pop()

pop()方法删除数组最末尾的元素，并返回删除的元素，会改变原数组。

var arr = [1, 2, 3];
arr.pop();
console.log(arr);

[1, 2]

3、unshift()

unshift()方法向数组头部插入新的元素，并返回新的数组长度，会改变原数组。

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);

[0,1, 2, 3]

4、shift()

shift()方法删除数组第一个元素，并返回删除后的元素，会改变原数组。

var arr = [1, 2, 3];
arr.shift();
console.log(arr);

[2, 3]

5、slice()

slice()方法会返回所提取数组指定位置的元素，不会改变原数组。

第一个参数是数组索引的起始位置（包含）。

​第二个参数是数组索引的结束位置（不包含）。

第二个参数可以省略不写，则会从起始位置一直提取到最后。

var arr = [1, 2, 3];
var arr2 = arr.slice(0,2);
console.log(arr);
console.log(arr2);

[1, 2, 3]
[1, 2]

6、splice()

splice()方法会返回所删除数组指定起始位置的指定数量的元素，会改变原数组。

​第一个参数为数组索引的起始位置。

第二个参数为所删除元素的数量。

第三个参数之后，为在数组指定的起始位置前添加的新元素。

​将第二元素设置成0，可以在指定位置前添加新元素。

7、concat()

concat()可以连接两个或多个数组，然后返回一个新数组，不改变原数组。

var arr = ["张三"];
var arr2 = ["李四"];
var arr3 = arr.concat(arr2, "王麻子");
console.log(arr);
console.log(arr3);

["张三"]
["张三","李四","王麻子"]

8、join()

join()将数组转换成字符串并返回，不会改变原数组。

var arr = ["张三", "李四", "王麻子"];
var result = arr.join();
console.log(arr);
console.log(result);
console.log(typeof result);

["张三", "李四", "王麻子"]
"张三,李四,王麻子"
string

join()在将数组转换成字符串时，默认用逗号隔开，如果想换其他方式隔开，可以在join()方法中设置。

var arr = ["张三", "李四", "王麻子"];
var result = arr.join("#");
console.log(result);
var result = arr.join("");
console.log(result);

"张三#李四#王麻子"
"张三李四王麻子"

9、reverse()

reverse()将数组翻转，会改变原数组

var arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr);

[5, 4, 3, 2, 1]

10、sort()

sort()方法将原数组进行排列，会改变原数组。

sort()按照Unicode编码进行排序。

var arr = ['b', 'd', 'f', 'q', 'a'];
arr.sort();
console.log(arr);

['a', 'b', 'd', 'f', 'q']

但用sort()来排序数字的话，就会出现问题，即sort()对数组中的数字同样是按照Unicode的编码方式来排序的。

为此，我们可以在sort()方法中添加回调函数，自定义排序功能。

在回调函数中设置两个参数，浏览器会分别使用数组中的元素作为实参去调用回调函数。如下

var arr = [4, 5];
arr.sort(function (a, b) {
    console.log(a, b);
});

5 4

浏览器会根据回调函数的返回值来决定元素的顺序

如果返回值大于0，则元素会交换位置

如果返回值小于0，则元素不交换位置

如果返回值是0，则认为两个元素相等

var arr = [5, 4, 3, 1, 2];
arr.sort(function (a, b) {
    return a - b;//升序
});
console.log(arr);

var arr = [5, 4, 3, 1, 2];
arr.sort(function (a, b) {
    return b - a;//倒序
});
console.log(arr);

[1, 2, 3, 4, 5]
[5, 4, 3, 2, 1]

11、reduce()

reduce(callback, [initialValue])方法为数组的每一个元素调用回调函数。

回调函数用于遍历数组中的元素，该回调函数有四个参数

第一个参数是该回调函数上一次的返回值或初始值

第二个参数是当前遍历的数组元素

第三个参数是当前遍历的数组索引

第四个参数是数组本身

下面用reduce方法实现计算数组中的数字总和

var arr = [5, 2, 2, 2, 1];
//sum为上一次回调函数返回的值或初始值，arr为当前遍历的数组元素
var result = arr.reduce(function (sum, arr) {
    return sum + arr;
}, 0)
console.log(result);

输出：

12

如果reduce方法没有设置初始值，那么reduce会从索引为1（设了初始值从索引为0）的位置开始执行callback方法。

var arr = [5, 2, 2, 2, 1];
//没加索引值
var result = arr.reduce(function (sum, arr, index) {
    console.log(index)
    return sum + arr;
})

输出：

1
2
3
4

var arr = [5, 2, 2, 2, 1];
//加了索引值
var result = arr.reduce(function (sum, arr, index) {
    console.log(index)
    return sum + arr;
},3)

0
1
2
3
4

所以，一般情况下我们都会设置初始值。

12、filter()

filter()方法用于数组过滤，将满足条件的数组元素返回，不改变原数组。回调函数参数为：当前遍历元素、当前遍历索引、数组。

var arr = [1, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4];
var arr2 = arr.filter((p) => {
    //将数组元素大于1的元素返回
    return p > 1;
})
console.log(arr2);

输出

[2, 2, 2, 3, 3, 3, 4, 4]