JavaScript数组方法-原创手记-慕课网

数组的属性

length属性

数组的项数保存在其length属性中，这个属性始终会返回0或更大的值。数组的length属性很有特点——它不是只读的。因此，通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。

例子：

//删除数组里的值
const arr1 = [1, 2, 3];
console.log(arr1[2]); //输出：3
arr1.length = 2;
console.log(arr1[2]); //输出：undefined

//在数组末尾添加新值
const arr2 = [1, 2, 3];
console.log(arr2[3]); //输出：undefined
arr2[arr2.length] = 4;
console.log(arr2[3]); //输出：4

检测数组的方法

instanceof 操作符

例子：

console.log([] instanceof Array);
//输出：true

Object.prototype.toString.call()方法

例子：

console.log(Object.prototype.toString.call([]));
//输出：[object Array]

Array.isArray()方法

例子：

console.log(Array.isArray([]));
//输出：true

数组转为字符串的方法

toString() 方法

返回由数组中每个项拼接而成的一个以逗号分隔的字符串。

例子：

console.log([1, 2, 3].toString());
//输出：1,2,3

join() 方法

join()方法接收一个参数用作分隔符，然后返回由这个分隔符构建的字符串。如果不给join()方法传入任何值，或者给它传入undefined，则默认使用逗号作为分隔符。

例子：

console.log([1, 2, 3].join()); //输出：1,2,3
console.log([1, 2, 3].join("&")); //输出：1&2&3

添加和删除项的方法

push() 方法

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

例子：

const arr = [1];
const len = arr.push(2, 3);
console.log(arr); //输出：[1, 2, 3]
console.log(len); //输出：3

pop() 方法

pop()方法从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

例子：

const arr = [1, 2, 3];
const item = arr.pop();
console.log(arr); //输出：[1, 2]
console.log(item); //输出：3

unshift() 方法

unshift() 方法能在数组前端添加任意个项并返回新数组的长度。

例子：

const arr = [3];
const len = arr.unshift(1, 2);
console.log(arr); //输出：[1, 2, 3]
console.log(len); //输出：3

shift() 方法

shift() 方法能够移除数组中的第一个项并返回该项，同时将数组长度减1。

例子：

const arr = [1, 2, 3];
const item = arr.shift();
console.log(arr); //输出：[2, 3]
console.log(item); //输出：1

splice() 方法

splice() 方法接收的第一个参数，表示想要删除或插入的元素的索引值。第二个参数是删除元素的个数（如果不是删除元素，可以传入0）。第三个参数往后，就是要添加到数组里的值。

例子：

删除

const arr = [1, 2, 3];
const new_arr = arr.splice(0, 2);
console.log(arr); //输出：[3]
console.log(new_arr); //输出：[1, 2]

插入

const arr = [1, 2, 3];
const new_arr = arr.splice(2, 0, 9);
console.log(arr); //输出：[1, 2, 9, 3]
console.log(new_arr); //输出：[]

替换

const arr = [1, 2, 3];
const new_arr = arr.splice(2, 1, 9);
console.log(arr); //输出：[1, 2, 9]
console.log(new_arr); //输出：[3]

数组项排序的方法

reverse()方法

reverse()方法会反转数组项的顺序。

例子：

const arr = [1, 2, 3];
arr.reverse();
console.log(arr); //输出：[3, 2, 1]

sort()方法

sort()方法可以接收一个函数作为参数：如果函数返回一个小于零或等于零的值则不交换前后项的位置；如果返回一个大于零的值则交换前后项的位置。

例子：

const arr = [2, 33, 10, 9];
arr.sort((x, y) => x - y);
console.log(arr); //输出：[2, 9, 10, 33]
arr.sort((x, y) => y - x);
console.log(arr); //输出：[33, 10, 9, 2]

copyWithin() 方法

copyWithin() 方法在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。它接受三个参数：第一个参数表示从该位置开始替换数据；第二个和第三个参数表示获得数据的起始和结束位置（不包括结束位置的项）。三个参数都可以为负数。

例子：

const arr1 = [1, 2, 3],
    arr2 = [1, 2, 3];

arr1.copyWithin(0, 1);
console.log(arr1); //输出：[2, 3, 3]

arr2.copyWithin(0, 1, 2);
console.log(arr2); //输出：[2, 2, 3]

复制数组的方法

concat()方法

concat()方法会复制当前数组并将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。

例子：

没有参数

const arr = [1, 2, 3];
const new_arr = arr.concat();
console.log(arr); //输出：[1,2,3]
console.log(new_arr); //输出：[1,2,3]

参数是原始值

const arr = [1, 2, 3];
const new_arr = arr.concat(4, 5);
console.log(arr); //输出：[1,2,3]
console.log(new_arr); //输出：[1,2,3,4,5]

参数是一个或多个数组

const arr = [1, 2, 3];
const new_arr = arr.concat([4], [5]);
console.log(arr); //输出：[1,2,3]
console.log(new_arr); //输出：[1,2,3,4,5]

slice()方法

slice()方法复制返回项创建一个新数组。如果只有一个参数，slice()方法返回从该索引位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

例子：

const arr = [1, 2, 3];
const new_arr_1 = arr.slice(0);
const new_arr_2 = arr.slice(0, 2);
console.log(new_arr_1); //输出：[1,2,3]
console.log(new_arr_2); //输出：[1,2]

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

查找值的位置的方法

indexOf()和lastIndexOf()方法

这两个方法都接收两个参数：要查找的值和表示查找起点位置的索引。其中，indexOf()方法从数组的开头（位置0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。这两个方法都返回要查找的值在数组中的位置，或者在没找到的情况下返回-1。

例子：

console.log([1, 2, 3].indexOf(2)); //输出：1
console.log([1, 2, 3].indexOf(0)); //输出：-1

includes() 方法

includes() 方法返回一个布尔值，表示某个数组是否包含给定的值。这个方法接收两个参数：要查找的值和表示查找起点位置的索引。如果第二个参数为负数，则表示倒数的位置。

例子：

console.log([1, 2, 3].includes(2)); //输出：true
console.log([1, 2, 3].includes(1, 1)); //输出：false

find() 和 findIndex() 方法

find() 方法接受一个回调函数作为参数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

例子：

console.log([1, 2, 3].find((v, i, a) => v > 1)); //输出：2
console.log([1, 2, 3].find((v, i, a) => v > 3)); //输出：undefined

findIndex() 方法的用法与find() 方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

例子：

console.log([1, 2, 3].findIndex((v, i, a) => v > 1)); //输出：1
console.log([1, 2, 3].findIndex((v, i, a) => v > 3)); //输出：-1

*find() 和 findIndex() 方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

遍历数组的方法

entries()，keys() 和 values() 方法

keys()是对索引值的遍历、values()是对值的遍历，entries()是对键值对的遍历。这三个方法一般配合for…of循环使用。

例子：

for (let i of[1, 2, 3].keys()) {
    console.log(i);
}
//输出：0 1 2
for (let v of[1, 2, 3].values()) {
    console.log(v);
}
//输出：1 2 3
for (let [i, v] of[1, 2, 3].entries()) {
    console.log(i + ":" + v);
}
//输出：0:1 1:2 2:3

every()方法

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

例子：

console.log([1, 2, 3].every((v, i, a) => v < 4)); 
//输出：true

some()方法

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

例子：

console.log([1, 2, 3].some((v, i, a) => v > 2)); 
//输出：true

filter() 方法

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

例子：

const arr = [1, 2, 3, "A"];
const new_arr = arr.filter((v, i, a) => typeof(v) === "number");
console.log(arr); //输出：[1, 2, 3, "A"]
console.log(new_arr); //输出：[1, 2, 3]

map() 方法

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

例子：

const arr = [1, 2, 3];
const new_arr = arr.map((v, i, a) => v - 1);
console.log(arr); //输出：[1, 2, 3]
console.log(new_arr); //输出：[0, 1, 2]

forEach() 方法

forEach() 方法对数组中的每一项运行给定函数。这个方法没有返回值。可以替代for循环使用。

例子：

(function() {
    [...arguments].forEach((v, i, a) => {
        console.log(i);
    });
})(1, 2, 3);
//输出：0  1  2

*every() 、 some()、filter()、map()和forEach()方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

reduce()和reduceRight()方法

这两个方法都会遍历数组的所有项，然后累加一个最终返回的值。其中，reduce()方法从数组的第一项开始，逐个遍历到最后。而reduceRight()则从数组的最后一项开始，向前遍历到第一项。

例子：

console.log(["S", "O", "S"].reduce((p, c, i, a) => p + c));
//输出：SOS

*reduce()和reduceRight()方法的回调函数接收4个参数：前一个值、当前值、项的索引和数组对象。

多维数组变一维数组的方法

flat() 方法

flat() 方法接受一个数值参数，表示要“拉平”的嵌套数组的层数，默认为1。如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。flat() 方法会返回一个新数组，不改变原数组。

例子：

const arr = [1, [2], 3];
const new_arr = arr.flat();
console.log(arr); //输出：[1, [2], 3]
console.log(new_arr); //输出：[1, 2, 3]

flatMap() 方法

flatMap() 方法相当于先执行map()方法，然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

例子：

const arr = [1, 2, 3];
const new_arr = arr.flatMap((v, i, a) => [v * 2]);
console.log(arr); //输出：[1, 2, 3]
console.log(new_arr); //输出：[2, 4, 6]

填充数组的方法

fill() 方法

fill() 方法使用给定值，填充一个数组。该方法接受三个参数，第一个参数表示将要填充数组的值，第二个和第三个参数，用于指定填充的起始位置和结束位置。该方法属于浅拷贝，会直接修改原数组的内容。

例子：

const arr = Array(3).fill(0);
const new_arr = arr.fill(1, 1, 2);
console.log(arr); //输出：[0, 1, 0]
console.log(new_arr); //输出：[0, 1, 0]

如有错误，欢迎指正，本人不胜感激。