【JS基础】JS数组常用方法-优快云博客

本文链接：https://blog.youkuaiyun.com/cannotbecounted/article/details/131880333

JS数组常用方法

1.`push()`方法

使用：

arr.push(1, 2, 3);

向数组的末尾添加一个或多个元素，并返回新的数组长度。

该方法会改变原数组！

2.`pop()`方法

使用：

var del = arr.pop();

删除并返回数组的最后一个元素，若该数组为空，则返回 undefined。

该方法会改变原数组！

3.`unshift()`方法

使用：

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

向数组的开头添加一个或多个元素，并返回新的数组长度。

该方法会改变原数组！

4.`shift()`方法

使用：

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

删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回 undefined。

该方法会改变原数组！

5.`concat()`方法

使用：

var arr1 = [1, 2, 3, 4, 5, 6];
var arr2 = [7, 8, 9];
var res = Array.concat(arr1, arr2);

合并两个或多个数组，生成一个新的数组。

6.`join()`方法

使用：

var arr = [1, 2, 3, 4, 5, 6];
var str1 = arr.join();	// str1 = "123456"
var str2 = arr.join('-');	// str2 = "1-2-3-4-5-6"

将数组的每一项用指定字符连接形成一个字符串。

默认的连接字符为 “,” 逗号。

7.`reverse()`方法

使用：

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

将数组倒序。

该方法会改变原数组！

8.`sort()`方法

对数组元素进行排序。按照字符串 UniCode 码排序。

可以通过传入参数的方式控制排序的顺序：

1.从大到小

var sortNum = function(a, b) {
	return b-a;
}
var arr = [1, 3, 55, 5, 4, 12]
arr.sort(sortNum);	//arr = [1, 3, 4, 5, 12, 55]

2.从小到大

var sortNum = function(a, b) {
	return a-b;
}
var arr = [1, 3, 55, 5, 4, 12]
arr.sort(sortNum);	//arr = [55, 12, 5, 4, 3, 1]

3.对象数组排序

当数组中存放的是对象时，可以根据对象中的某一属性进行排序：

var arr = [
	{
        name: 'xiaoming',
        age: 16,
    },
    {
        name: 'xiaohong',
        age: 18,
    },
    {
        name: 'xiaoqiang',
        age: 20,
    },
]
function compare(key) {
    return function sortByKey(a, b){
        return a[key]-b[key];
    }
}
arr.sort(compare("age"));

9.`map()`方法

接收一个回调函数，对数组中的每一项元素执行该函数。

使用：

columns.map((item) => {
        if(item.prop === 'h1Name') {
            item.searchOptions.options = hierarchy1.value;
        }
})

该方法不会改变原数组的引用，但可能会改变数组中的内容！

另外，map() 方法也是有返回值的，其返回值为对每一项元素执行操作后的得到的一个新数组。

10.`slice()`方法

其效果是可以根据特定条件，查找出其中的部分内容。

其使用如下：

Array.slice(n, m) // 从索引n查找到索引m，但不包含m
Array.slice(n)    // 省略第二个参数，则一直查找到数组末尾

// slice方法支持负数参数，即从最后一项算起，-1为最后一项，-2为倒数第二项。
Array.slice(-n, -m)
Array.slice(-1, -5)

但是注意，slice() 方法也不会改变原数组，其会返回一个操作后得到的新数组。

11.`splice()`方法

用于添加或删除数组中的元素。

其使用如下：

Array.splice(index, howmany, arr1, arr2)
// 其中index、howmany为int，arr1、arr2为两个数组。
// 其效果是：从 index 开始，删除 howmany 个元素，并将 arr1、arr2 中的数据从 index 位置依次插入。注意当 howmany 为0时，则不删除元素。

例如：

var f = ["Banana", "Orange", "Apple", "Mango"]
f.splice(2, 1, "Lemon", "Kiwi");
// 最终 f 中的结果为："Banana", "Orange", "Lemon", "Kiwi", "Mango"

12.`forEach()`方法

用于调用数组的每个元素，并将元素传递给回调函数。

其使用如下：

f.forEach((item) => {
	//...
})

forEach() 不会改变原数组，但是要注意其与 map() 方法的区别，forEach() 并不会返回值！

13.`filter()`方法

用于过滤数组中的元素。

使用如下：

var a = [1, 2, 3, 4, 5]
var b = a.filter((item) => {
    return item > 3
})
// 接收一个函数，根据其中的内容对数组中的每一项进行验证，返回验证结果为 true 的数组元素。

执行 filter() 方式，会返回一个新数组，但不会改变原数组的内容！

14`.every()`方法

用于对数组中的每一项进行判断，若数组元素均符合，则返回 true，否则返回 false。

使用如下：

var is = a.every((item) => {
    //...
})

15.`some()`方法

用于对数组中的每一项进行判断，若数组元素均不符合，则返回 false，否则返回 true。

使用如下：

var is = a.some((item) => {
    //...
})

16.`reduce()`方法

定义

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

这么说显然很难理解，简单来说，就是对一个数组 array 执行reduce()方法，就是把其中接收到的function()作用于该数组中的每一元素上，而且，上一次执行function()的输出会作为下一次执行的输入。具体在语法中解释

语法

Array.reduce(
    function(prev, currentValue, currentIndex, arr), 
    initialValue
)

reduce()方法接收两个参数，一个为回调函数，一个为初始赋值initialValue。

而在回调函数中，又会接收四个参数：

prev — 函数传递进来的初始值initialValue或上一次执行回调的返回值
currentValue — 数组中当前处理的元素的值
currentIndex — 当前元素的索引
arr — 数组本身

而当不传入initialValue时，第一次执行回调中的 prev 为数组的第一个值！

下面看一个示例：

var arr = [1, 2, 3, 4]
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur
})
console.log(arr, sum)
// 输出结果为：
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10

所以，实际上这段代码的效果是对数组做累加。回调函数执行了3次。

但注意，看下面的代码，这次我们加入initialValue。

var arr = [1, 2, 3, 4]
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur
}， 0)
console.log(arr, sum)
// 输出结果为：
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10