数组的方法合集

阅读次数: 次 2020-08-18

字数：5.3k字 | 预计阅读时长：21分钟

一、创建数组

创建数组的基本方式有两种：

使用Array构造函数

const arr1 = new Array(); // 创建一个空数组
const arr2 = new Array(3); // 创建一个包含3项的数组
const arr3 = new Array('富强', '民主', '文明', '和谐'); // 创建一个包含4个字符串的数组
const arr4 = Array(); // 使用Array构造函数时可以省略new操作符

使用数组字面量表示法

1 2	const colors = ['red', 'blue', 'green']; // 创建一个包含3个字符串的数组 const names = []; // 创建一个空数组

二、数组检测方法

`Array.isArray()`方法

这个方法（ES5新增）用于检测某个值是否是数组，IE8不支持！

1
2
3

if(Array.isArray(value)) {
    // 对数组执行某些操作
}

三、改变原数组的方法

`toString()`方法

返回值：每个数组元素以逗号分隔拼接成的字符串
是否修改原数组：否

toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串，因此，该方法并不会改变原数组。

示例代码如下：

const arr = ['富强', '民主', '文明', '和谐'];
const returnValue = arr.toString();
console.log(returnValue); // '富强,民主,文明,和谐'
console.log(arr); // '富强,民主,文明,和谐'

`pop()`方法

返回值：移除的数组的最后一个元素
是否修改原数组：是

pop()方法：移除数组末尾最后一个元素，减少数组的length值，并返回移除的项。因此，该方法会改变原数组。

示例代码如下：

const popArr = [11, 7, 6, 24, 42, 5];
const returnValue = popArr.pop();
// 返回值
console.log(returnValue); // 5
// 原数组的值
console.log(popArr); // [ 11, 7, 6, 24, 42 ]

`push()`方法

返回值：修改后数组的长度
是否修改原数组：是

push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。因此，该方法会改变原数组。

示例代码如下：

const pushArr = ['富强', '民主', '文明']; // 创建一个数组
const returnValue = pushArr.push('和谐'); // 推入一项元素
// 返回值
console.log(returnValue); // 4
// 原数组的值
console.log(pushArr); // [ '富强', '民主', '文明', '和谐' ]

在上述代码中，向数组中只推入了一个元素，你也可以一次性地推入多个元素。

例如：

const colors = new Array();  // 创建一个数组
const returnValue = colors.push('red', 'green'); // 推入两项元素
// 返回值
console.log(returnValue); // 2
// 原数组的值
console.log(pushArr); // ['red', 'green']

但是，请注意🔔🔔🔔

如果想向一个数组中一次性推入多个元素时，不要把它们作为数组进行推入，这会把整个数组当成一个元素，推入到数组中。

例如：

const nums = [11, 7, 6, 24, 42, 5];
const returnValue = nums.push([10, 14]); // 推入一个（数组）元素
// 返回值
console.log(returnValue); // 7
// 原数组的值
console.log(nums); // [11, 7, 6, 24, 42, 5, [10, 14]];

`shift()`方法

返回值：移除的数组的第一个元素
是否修改原数组：是

shift()方法：移除数组的第一项，减少数组的length值，并返回移除的项。因此，该方法会改变原数组。

示例代码如下：

const shiftArr = [11, 7, 6, 24, 42, 5];
const returnValue = shiftArr.shift();
// 返回值
console.log(returnValue); // 11
// 原数组的值
console.log(shiftArr); // [ 7, 6, 24, 42, 5 ]

`unshift()`方法

返回值：修改后数组的长度
是否修改原数组：是

unshift()方法：它可以接收任意数量的参数，把它们逐个添加到数组开头，并返回修改后的数组的长度。因此，该方法会改变原数组

示例代码如下：

const unshiftArr = [11, 7, 6, 24, 42, 5];
const returnValue = unshiftArr.unshift(73);
// 返回值
console.log(returnValue); // 7
// 原数组的值
console.log(unshiftArr); // [73, 11, 7, 6, 24, 42, 5]

与push()方法类似，你也可以一次性地在数组的开头添加多个元素。

例如：

const colors = new Array();  // 创建一个数组
const returnValue = colors.unshift('red', 'green'); // 推入两项
// 返回值
console.log(returnValue); // 2
// 原数组的值
console.log(colors);  // ['red', 'green']

但是，请注意🔔🔔🔔

如果想向一个数组开头一次性添加多个元素时，不要把它们作为数组进行添加，这会把整个数组当成一个元素，添加到数组开头。

例如：

const nums = [11, 7, 6, 24, 42, 5];
const returnValue = nums.unshift([10, 14]); // 推入一个（数组）元素
// 返回值
console.log(returnValue); // 7
// 原数组的值
console.log(nums); // [[10, 14], 11, 7, 6, 24, 42, 5];

`sort()`方法

返回值：排序后的数组
是否修改原数组：是

sort()方法是采用原地排序算法进行排序的，因此，会改变原数组。

sort()方法会调用每个数组项的.toString()方法，然后比较得到的字符串，以确定如何排序。对于非字符串类型的数组元素，可以通过向sort()方法中传入比较函数，实现数值之类的排序。

示例代码如下：

const sortArr = [11, 7, 6, 24, 42, 5];
returnValue = sortArr.sort((a, b) => a - b); // 升序排序
// 返回值
console.log(returnValue); // [ 5, 6, 7, 11, 24, 42 ]
// 原数组的值
console.log(sortArr); // [ 5, 6, 7, 11, 24, 42 ]

如何理解sort()方法的比较函数呢？可以看下面这篇非常啰嗦的文章：

:point_right: 理解JavaScript中的sort方法

`reverse()`方法

返回值：反转后的数组
是否修改原数组：是

reverse()方法：反转数组元素的顺序。

示例代码如下：

const reverseArr = [11, 7, 6, 24, 42, 5];
const returnValue = reverseArr.reverse();
// 返回值
console.log(returnValue); // [ 5, 42, 24, 6, 7, 11 ]
// 原数组的值
console.log(reverseArr); // [ 5, 42, 24, 6, 7, 11 ]

🎖`splice()`方法

返回值：被删除的项目
是否修改原数组：是

splice()方法向/从数组中添加/删除/替换项目，然后返回被删除的项目（如果没有删除，则返回一个空数组）

splice()可以接受三个参数，该方法比较强大，它的功能是向数组中添加元素，还是删除元素，还是替换元素，取决于第二个参数deleteCount。

该方法的参数有如下三个：

第一个参数是start：必需，代表起始位置
第二个参数是deleteCount：可选，要删除的元素数量
第三个参数items：可选，向数组添加的新项目

删除操作

示例代码如下：

// 删除操作
const spliceArr = [11, 7, 6, 24, 42, 5];
// 从下标为1的位置开始，删除2个元素
const returnValue = spliceArr.splice(1, 2); 
console.log(returnValue); // [7, 6]
console.log(spliceArr); // [11, 24, 42, 5]

由于指定了第2个参数，指定要减少一些元素，又没有指定第3个参数，没有增添新元素，所以这个肯定是删除操作。那么，上面代码中，调用该方法后的返回值，就是删除的元素。最终的功能就是从数组中删除元素。

添加操作

示例代码如下：

// 添加操作
const spliceArr = [11, 7, 6, 24, 42, 5];
// 从下标为3的位置开始，增加一个元素73
const returnValue = spliceArr.splice(3, 0, 73);
// 没有删除的元素，故返回一个空数组
console.log(returnValue); // []
console.log(spliceArr); // [11, 7, 6, 73, 24, 42, 5];

当指定了第2个参数和第3个参数时，只要添加的元素数目多于删除的元素的数目，最终的功能就是向数组中添加元素。

替换操作

示例代码如下：

// 添加操作
const spliceArr = [11, 7, 6, 24, 42, 5];
// 从下标为3的位置开始，增加一个元素73
const returnValue = spliceArr.splice(3, 1, 73);
// 返回删除的元素
console.log(returnValue); // [24]
console.log(spliceArr); // [11, 7, 6, 73, 42, 5];

当指定了第2个参数和第3个参数时，如果添加的元素数目等于删除的元素数目，最终的功能就是替换数组中的元素。

四、不改变原数组的方法

`toString()`方法

返回值：数组每一项元素以逗号分隔，拼接成的字符串
是否修改原数组：否

toString()方法：

示例代码如下：

const arr = ['富强', '民主', '文明', '和谐'];
const returnValue = arr.toString();
// 原数组的值
console.log(returnValue); // '富强,民主,文明,和谐'

console.log(arr); // '富强,民主,文明,和谐'

当数组和字符串进行操作，或者将数组传入需要接收字符串参数的函数中时，JavaScript会自动调用这个方法将数组转换成字符串。

例如：

1 2	const arr = [11, 7, 6, 24, 42, 5]; alert(arr); // '11,7,6,24,5';

`join()`方法

返回值：数组每一项元素以指定分隔符拼接成的字符串
是否修改原数组：否

join()方法：接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。如果不传入参数，或者传入undefined，则使用逗号作为分隔符。

示例代码如下：

const joinArr = [11, 7, 6, 24, 42, 5];
const returnValue = joinArr.join('|');
// 原数组的值
console.log(returnValue); // '11|7|6|24|42|5'
// 原数组的值
console.log(joinArr); // [ 11, 7, 6, 24, 42, 5 ]

`concat()`方法

返回值：拼接成的新数组
是否修改原数组：否

concat()方法：基于当前数组中的所有项创建一个新数组。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。

示例代码如下：

const concatArr = [11, 7, 6, 24, 42, 5];
const returnValue = concatArr.concat('富强', '民主', '文明', '和谐');
// 原数组的值
console.log(returnValue); // [11, 7, 6, 24,42, 5, '富强', '民主','文明', '和谐']

console.log(concatArr); // [ 11, 7, 6, 24, 42, 5 ]

与push()、unshift()方法不同的是：

当向concat()方法中传入的参数是一个或多个数组时，会把该数组中的元素逐个添加到结果数组中
当向concat()方法中传入的参数不是数组，传入的参数将被简单地添加到数组的末尾。

`slice()`方法

返回值：
是否修改原数组：否

slice()(切片)方法：基于当前数组中的一个或多个项创建一个新数组。它接受一个或两个参数，即要返回项的起始和结束位置。

当只有一个参数时，slice()方法返回从该参数指定的位置到当前数组末尾的所有项
当有两个参数时，slice()方法返回起始和结束位置（不包括结束位置）之间的项

示例代码如下：

const sliceArr = [11, 7, 6, 24, 42, 5];
// 传入一个参数
let returnValue = sliceArr.slice(3);
console.log(returnValue); // [24, 42, 5];
// 传入两个参数
returnValue = sliceArr.slice(1, 4); // [7, 6, 24]
console.log(returnValue);
// 原数组的值
console.log(sliceArr); // [11, 7, 6, 24, 42, 5];

如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置

`indexOf()`方法

返回值：元素的下标索引
是否修改原数组：否

indexOf()方法返回在数组中找到的给定元素的第一次出现的位置索引，如果不存在，则返回-1。

该方法接受两个参数：

第一个参数：要查找的元素
第二个参数：可选，查找的起始位置（有一点不要弄混，即使指定了查找的起始位置，最终返回的元素索引仍然按数组的下标起始位置算起）

示例代码如下：

const indexOfArr = [11, 7, 6, 24, 42, 5];
// 查找元素7
returnValue = indexOfArr.indexOf(7);
console.log(returnValue); // 1
// 从下标为1的位置开始,查找元素24
returnValue = indexOfArr.indexOf(24, 1);
console.log(returnValue); // 3

数组的indexOf()操作方法与字符串的indexOf()操作方法有些不一样，数组的indexOf()方法使用严格相等搜索元素，即元素要完全匹配才能搜索成功。另外，indexOf()不能识别NaN。

例如：

let a=['啦啦',2,4,24,NaN]
console.log(a.indexOf('啦'));  // -1  没有完全匹配
console.log(a.indexOf('NaN'));  // -1 
console.log(a.indexOf('啦啦')); // 0

`lastIndexOf()`方法

返回值：元素的下标索引
是否修改原数组：否

lastIndexOf()方法和indexOf()方法都是用来在数组中搜索元素的，区别在于lastIndexOf()是从后往前开始搜索。

该方法接受两个参数：

第一个参数：要查找的元素
第二个参数：可选，查找的起始位置。（默认值为-1，代表从最后一个元素开始向前查找，同理，-2的话，代表从倒数第二个元素开始向前查找，当然，你也可以使用正值，代表从第几个元素开始向前查找）

示例代码如下：

const lindexOfArr = [11, 7, 6, 24, 42, 5];
// 从后往前搜索元素42,返回其下标位置
returnValue = lindexOfArr.lastIndexOf(42);
console.log(returnValue); // 4
// 从最后一个元素开始向前搜索元素6，返回其下标位置
returnValue = lindexOfArr.lastIndexOf(6, -1);
console.log(returnValue); // 2

五、遍历方法

以下的遍历方法和归并方法都不会修改原数组

`map()`方法

返回值：对原数组每一项调用函数后的结果组成的数组
是否修改原数组：否

map()方法：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

该方法接受两个参数：

第一个参数：callbackfn(value,index,array)要在每一项上运行的函数
- currentvalue：遍历时当前数组元素的值
- index：可选，遍历时当前数组元素的索引值
- array：可选，map()方法正在操作的数组
第二个参数：thisArg，可选，运行该函数的作用域对象（this）

接下来分多种情况，分别展示一下callbackfn()函数接受不同参数的情况：

示例代码如下：

接受一个参数

当只接受1个参数时，这个参数代表每一次遍历时的数组元素

const mapArr = [11, 7, 6, 24, 42, 5];
// map()方法接受一个函数参数，该函数参数中接受1个参数
const returnValue = mapArr.map(x => x + 2);
// 返回值：对原数组每一项调用函数后的结果组成的数组
console.log(returnValue); // [ 13, 9, 8, 26, 44, 7 ]
// 不会影响原数组
console.log(mapArr); // [ 11, 7, 6, 24, 42, 5 ]

接受两个参数

当接受2个参数时，第一个参数代表每一次遍历的数组元素，第二个参数代表该元素的索引值

const mapArr = const mapArr = [11, 7, 6, 24, 42, 5];
const returnValue = mapArr.map((val, idx) =>{
    console.log(val,'\t', idx);
});

运行结果如下：

接受三个参数

当接受3个参数时，第三个参数代表原数组本身

const mapArr = const mapArr = [11, 7, 6, 24, 42, 5];
const returnValue = mapArr.map((val, idx, arr) =>{
    console.log(val, '\t', idx, '\t', arr);
});

运行结果如下：

11       0       [ 11, 7, 6, 24, 42, 5 ]
7        1       [ 11, 7, 6, 24, 42, 5 ]
6        2       [ 11, 7, 6, 24, 42, 5 ]
24       3       [ 11, 7, 6, 24, 42, 5 ]
42       4       [ 11, 7, 6, 24, 42, 5 ]
5        5       [ 11, 7, 6, 24, 42, 5 ]

下面的方法中如果callbackfn()函数参数基本上一致，就不再具体介绍

`forEach()`方法

返回值：undefined
是否修改原数组：否

forEach()方法：以数组中的每一项运行给定函数。这个方法没有返回值。

该方法接受两个参数：

callbackfn(currentValue, index, array)
- currentValue：数组中正在处理的当前元素
- index：可选，数组中正在处理的当前元素的索引
- array：可选，forEach()方法正在操作的数组
thisArg：可选，运行该函数的作用域对象（this）

注意：

forEac()方法总是返回undefined，即使你return了一个值

对于空数组是不会执行回调函数的

对于已经在迭代过程中删除的元素，或者空元素会跳过回调函数

遍历次数在第一次循环时就已经确定，再添加到数组中的元素不会被遍历

示例代码如下：

const forEachArr = [11, 7, 6, , 42, 5];
returnValue = forEachArr.forEach((val, idx) => {
    val = val + 2;
    console.log(val, '\t', idx);
});
console.log(returnValue); // undefined  forEach()方法的返回值总为undefined
console.log(forEachArr);

运行结果如下：

13       0
9        1
8        2
// 因此原数组存在空元素，回调函数直接跳过
44       4
7        5
undefined
[ 11, 7, 6, , 42, 5 ]

`every()`方法

返回值：布尔值
是否修改原数组：否

every()方法：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true

该方法接受两个参数：

callbackfn(currentValue, index, array)
- currentValue：用于测试的当前值
- index：可选，用于测试的当前值的索引
- array：调用every()方法的当前数组
thisArg：执行callbackfn()时使用的this值

示例代码如下：

const everyArr = [11, 7, 6, 24, 42, 5];
const returnValue = everyArr.every(x => x > 10);
console.log(returnValue); // false
console.log(everyArr); // [ 11, 7, 6, 24, 42, 5 ]

上述代码中，由于原数组存在不大于10的元素，例如，7 > 10，这个式子将会返回false，every()方法就立即返回了false

`some()`方法

返回值：布尔值
是否修改原数组：否

some()方法：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true

该方法接受两个参数：

callbackfn(currentValue, index, array)：
- currentValue：数组中正在处理的元素
- index：可选，数组中正在处理的元素的索引值
- array：调用some()的数组
thisArg：可选，执行callbackfn时使用的this值

示例代码如下：

const someArr = [11, 7, 6, 24, 42, 5];
const returnValue = someArr.some(x => x > 10);
console.log(returnValue); // true
console.log(someArr); // [ 11, 7, 6, 24, 42, 5 ]

上述代码中，由于原数组存在大于10的元素，例如，11 > 10，这个式子将会返回true，some()方法就会立即返回了true。

`filter()`方法

返回值：结果为true的项组成的数组
是否修改原数组：否

filter()方法：对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

该方法接受两个参数：

callbackfn(currentValue, index, array)：
- currentValue：数组中正在处理的元素
- index：可选，数组中正在处理的元素的索引值
- array：调用filter()的数组
thisArg：可选，执行callbackfn时使用的this值

示例代码如下：

const filterArr = [11, 7, 6, 24, 42, 5];
const returnValue = filterArr.filter(x => x > 10);
console.log(returnValue); // [ 11, 24, 42 ]
console.log(filterArr); // [ 11, 7, 6, 24, 42, 5 ]

`reduce()`方法

返回值：函数累计处理的结果
是否修改原数组：否

reduce()方法：从数组的第一项开始，迭代数组的所有项，然后构建一个最终返回的值。

该方法接受两个参数：

callbackfn(previousValue, currentValue, currentIndex, array)
- previousValue：累计器计回调的返回值；它是上一次调用回调时返回的累计值，或者是初始值（如果设置了初始值，首次迭代时，就是初始值，后面的迭代是返回的累计值）
- currentValue：当前正在处理的元素
- currentIndex：可选，当前正在处理的元素的索引值
- array：可选，调用reduce()方法的数组
initialValue：可选，归并的初始值

示例代码如下：

const reduceArr = [11, 7, 6, 24, 42, 5];
const returnValue = reduceArr.reduce((pre, cur, idx, arr) => pre + cur);
console.log(returnValue); // 95
console.log(reduceArr); // [ 11, 7, 6, 24, 42, 5 ]

在上述代码中，由于没有设置初始累计值，因此：

数组元素一共有6个，在开始迭代时，迭代次数已经确定，一共会调用5次回调函数，每次调用的参数及返回值如下：

`callback`	`previousValue`	`currentValue`	`index`	`array`	返回值
第一次调用	`11`	`7`	`1`	`[ 11,7,6,24,42,5 ]`	`18`
第二次调用	`18`	`6`	`2`	`[ 11,7,6,24,42,5 ]`	`24`
第三次调用	`24`	`24`	`3`	`[ 11,7,6,24,42,5 ]`	`48`
第四次调用	`48`	`42`	`4`	`[ 11,7,6,24,42,5 ]`	`90`
第五次调用	`90`	`5`	`5`	`[ 11,7,6,24,42,5 ]`	`95`

如果reduce()方法设置了初始值，那么首次迭代的pre的值为初始值，cur的值为数组第一个元素，其他往后类推即可。

`reduceRight()`方法

返回值：函数累计处理的结果
是否修改原数组：否

reduceRight()方法：从右至左遍历数组，然后构建一个最终返回的值

该方法接受两个参数：

callbackfn(pre, cur, index, arr)
- pre：首次调用回调函数时，如果设置了初始值initialValue，则为初始值，如果没有设置初始值，则为数组最后一个元素。之后的迭代过程中，其值为上一次迭代时回调函数返回的值。
- cur：当前正在处理的元素
- index：当前正在处理的元素的索引值
- arr：调用reduceRight()的数组
initialValue：可选，初始值

示例代码如下：

const reduceRightArr = [11, 7, 6, 24, 42, 5];
const returnValue = reduceArr.reduceRight((pre, cur, idx, arr) => pre + cur);
console.log(returnValue); // 95
console.log(reduceArr); // [ 11, 7, 6, 24, 42, 5 ]

数组元素一共有5个，在开始迭代时，迭代次数已经确定，一共会调用5次回调函数，每次调用的参数及返回值如下：

`callback`	`previousValue`	`currentValue`	`index`	`array`	返回值
第一次调用	`5`	`42`	`4`	`[ 11,7,6,24,42,5 ]`	`47`
第二次调用	`47`	`24`	`3`	`[ 11,7,6,24,42,5 ]`	`71`
第三次调用	`71`	`6`	`2`	`[ 11,7,6,24,42,5 ]`	`77`
第四次调用	`77`	`7`	`1`	`[ 11,7,6,24,42,5 ]`	`84`
第五次调用	`84`	`11`	`0`	`[ 11,7,6,24,42,5 ]`	`95`

本文作者： CoderLeiShuo
本文链接：https://coderleishuo.github.io/lele/52440.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

好的东西应该像粥，是用时间熬出来的—— CoderLeiShuo

一、创建数组

二、数组检测方法

Array.isArray()方法

三、改变原数组的方法

toString()方法

pop()方法

push()方法

shift()方法

unshift()方法

sort()方法

reverse()方法

🎖splice()方法

四、不改变原数组的方法

toString()方法

join()方法

concat()方法

slice()方法

indexOf()方法

lastIndexOf()方法

五、遍历方法

map()方法

forEach()方法

every()方法

some()方法

filter()方法

reduce()方法

reduceRight()方法

`Array.isArray()`方法

`toString()`方法

`pop()`方法

`push()`方法

`shift()`方法

`unshift()`方法

`sort()`方法

`reverse()`方法

🎖`splice()`方法

`toString()`方法

`join()`方法

`concat()`方法

`slice()`方法

`indexOf()`方法

`lastIndexOf()`方法

`map()`方法

`forEach()`方法

`every()`方法

`some()`方法

`filter()`方法

`reduce()`方法

`reduceRight()`方法