JavaScript数组方法的使用与解析【大全】

一、静态方法

Array.isArray(target)
判断 target 是否为一个数组，返回一个布尔值，true 表示数组，该方法不改变原对象。
参数 target，必须。

Array.isArray([1]); //true
Array.isArray({a: 1}); //false

Array.from(target, callback, object)
用于将类数组对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）转为真正的数组并返回该数组，该方法不改变原对象。
参数 target，必须，需要转化为数组的对象（string, arrayLike, arguments, Set, Map）。
参数 callback，map 回调函数，只有 item，index 两个参数。
参数 object，指定回调函数里的 this 对象。

Array.from(target); 
//返回结果，[a, b]

Array.from(target, item => `item-${item}`); 
//返回结果，['item-a', 'item-b']

Array.from(target, function (item, index) {
        return `${this['prefix']}${item}`;
}, object); 
//返回结果，['item-a', 'item-b']

Array.of(3)
用于将一组值转化为数组并返回该数组，弥补数组构造函数 Array() 的不足。

// 创建一个空数组，用法相同
new Array(); //[]
Array.of(); //[]

// 创建一个多成员的数组，用法相同
new Array(1,2,3); //[1, 2, 3]
Array.of(1,2,3); //[1, 2, 3]

// 当只有一个参数时，区别如下
new Array(3); //[, , ,]
Array.of(3); //[3]

二、实例方法

1、arr.forEach(callback, object)
将数组 arr 的所有成员依次传入参数函数 callback 中执行，该方法纯粹只是用来操作数据，没有返回值，不改变原数组。
参数 callback，回调函数(必须)，有三个参数 item(必须)，index, arr
参数 object，指定回调函数里的 this 对象

const arr = [1, 2];
arr.forEach((item, index, arr) => console.log(`
    item=${item}, index=${index}, arr=${arr}
`));
//输出，item=1, index=0, arr=1,2
//输出，item=2, index=1, arr=1,2
//没有返回结果

const arr = [1, 2];
const obj = {prefix: 'item-'};
const array = [];
arr.forEach(function(item) {
    array.push(`${this.prefix}${item}`);
}, obj);
console.log(array);
//输出，['item-1', 'item-2']

 2、arr.map(callback, object)
将数组 arr 的所有成员依次传入参数函数 callback，该方法把每一次的执行结果组成一个新数组返回，不改变原数组。
参数 callback，回调函数(必须)，有三个参数 item(必须)，index, arr。
参数 object，指定回调函数里的 this 对象。

const arr = [1, 2];
const res = arr.map(item => item * 10 + item); 
//返回结果，res = [11, 12]

const arr = [1, 2];
const obj = {prefix: 'item-'};
const res = arr.map(function(item) {
    return `${this['prefix']}${item}`
}, obj); 
//返回结果，res = ['item-1', 'item-2']

3、arr.filter(callback, object)
过滤数组成员，将每个数组成员依次传入参数函数中执行，将执行结果为 true 的成员，组成一个新数组返回，该方法不改变原数组。
参数 callback，回调函数(必须)，有三个参数 item(必须), index, arr。
参数 object，指定回调函数里的 this 对象。

const arr = [1, 2, 3, 4, 5];
const res = arr.filter(function (item) {
    return item > 3;
});
//返回结果，res = [4, 5]

const arr = [1, 2, 3, 4, 5];
const obj = {num: 2};
const res = arr.filter(function(item) {
    return item <= this.num;
}, obj);
//返回结果，res = [1, 2]

4、arr.some(callback, object)
将数组 arr 的所有成员依次执行参数函数，判断是否符合某种条件，返回一个布尔值，只要有一个成员符合条件，就立即返回 true，后面的成员不在执行，否则返回 false，该方法不改变原数组。
参数 callback，回调函数(必须)，有三个参数 item(必须), index, arr。
参数 object，指定回调函数里的 this 对象。

const arr = [1, 2, 3, 4, 5];
const res = arr.some((item, index, arr) => item % 2 === 0);
// 返回结果，res = true
// 执行到 第二个成员 2 时，返回 true，后面的参数 3,4,5 就不再执行了

const arr = [1, 2];
const obj = {n: 0};
const res = arr.some(function(item) {
    return item > this.n;
}, obj);
//返回结果，res = true
//执行数组第一个成员 1 时，符合条件，返回 true，回调函数只执行一次就不再执行。

5、arr.every(callback, object)
将数组成员依次传入参数函数中执行，判断是否符合某种条件，返回一个布尔值，当所有成员都符合条件，才返回 true，只要有一个不符合就立即返回 false。该方法不改变原数组。
参数 callback，回调函数(必须)，有三个参数 item(必须)，index, arr。
参数 object，指定回调函数里的 this 对象。

const arr = [1, 2, 3];
const res = arr.every(item => item > 1);
//返回结果，res = false
//数组第一个成员就不符合条件，返回 fasle，回调函数只执行一次。

const arr = [1, 2, 3];
const obj = {n: 0};
const res = arr.every(function(item, index, arr) {
    return item > this.n;
}, obj);
//返回结果，res = true

6、arr.reduce(callback, sum)
将数组 arr 的每个成员依次传入参数函数中执行，最终累计为一个值返回，该方法不改变原数组。
参数 callback，回调函数(必须)，有四个参数，sum, item, index, arr(sum，item, 必须)，
回调的第一个参数sum为reduce方法的第二个参数sum，回调中每一轮的 sum 都是上一轮的累计结果。
参数 sum，第二个参数，指定的累计初始值（此处默认累计初始值为0）。

const arr = [1, 2, 3, 4, 5];
const res = arr.reduce((sum, item, index, arr) => sum + item, 0);
//返回结果，res = 15

const arr = [1, 2, 3, 4, 5];
const res = arr.reduce((sum, item, index, arr) => sum + item, sum = 100);
//返回结果，115

7、arr.find(callback, object)
将数组 arr 的每个成员依次传入参数函数中执行，返回第一个符合条件的数组成员，如果所有成员都不符合，返回 undefined，该方法不改变原数组。
参数 callback，回调函数(必须)，有三个参数 item(必须), index, arr。
参数 object，指定回调函数里的this对象。

const arr = [1, 2, 3];
const res = arr.find(item => item > 1);
//返回结果，res = 2

const arr = [1, 2, 3];
const obj = {n: 0};
const res = arr.find(function (item, index, arr) {
    return item > this.n;
}, obj);
//返回结果，res = 1
//数组第一个成员就符合条件，返回该成员，回调函数只执行一次。

8、arr.findIndex(callback, object)
将数组 arr 的每个成员依次传入常数函数中执行，返回第一个符合条件的数组成员的位置，如果所有成员都不符合，返回-1，该方法不改变原数组。
参数 callback，回调函数(必须)，有三个参数 item(必须), index, arr。
参数 object，指定回调函数里的 this 对象。

const arr = [1, 2, 3];
const res = arr.findIndex(item => item > 1);
//返回结果，res = 1
//数组 arr 的第一个大于 1 的成员是 2, 返回该数组成员所在的索引位置，即 1

const arr = [1, 2, 3];
const obj = {n: 0};
const res = arr.findIndex(function (item, index, arr) {
    return item > this.n;
}, obj);
//数组第一个成员就符合条件，返回该成员位置，回调函数只执行一次。
//返回结果，res = 0

arr.findIndex(function (item, index, arr) {
        return item > 2;
});
//所以数组成员都不符合条件
//返回结果，-1

9、arr.findLast(callback, object) 与 arr.findLastIndex(callback, object)
从最后一个元素开始，向前查找元素

const arr = [1, 2, 3];
const obj = {n: 1};
const res = arr.findLast(function (item, index, arr) {
    return item > this.n;
}, obj);
//数组最后一个成员符合条件，返回该成员，回调函数只执行一次。
//返回结果，res = 3

const arr = [1, 2, 3];
const obj = {n: 1};
const res = arr.findLastIndex(function (item, index, arr) {
    return item > this.n;
}, obj);
//数组最后一个成员符合条件，返回该成员位置，回调函数只执行一次。
//返回结果，2

10、arr.fill(target, start, end)
使用给定值 target 填充数组，原数组 arr 会改变。
参数 target，填充值，必须
参数 start，默认为0
参数 end，默认为数组长度

let arr = [1,2,3,4,5];
arr.fill(); 
// [undefined, undefined, undefined, undefined, undefined]

arr.fill(9); 
// arr = [9, 9, 9, 9, 9]，使用 9 填充数组 arr 的每个成员

arr.fill('a', 2); 
// arr = [1, 2, 'a', 'a', 'a']，使用 'a' 填充数组 arr 从索引位置为 2 开始的所有成员

arr.fill('a', 2, 3); 
// arr = [1, 2, 'a', 4, 5]，使用 'a' 填充数组 arr 从位置 2 开始，到位置 3 结束的所有成员

arr.fill('a', 2, 100); 
// arr = [1, 2, 'a', 'a', 'a']，使用 'a' 填充数组 arr 从位置 2 开始，到位置 100 结束的所有成员

11、keys(), values(), entries() 遍历器

const arr = ['a', 'b'];
for (let i of arr.keys()) {
    console.log(i);
}
//返回结果，0, 1

for (let i of arr.values()) {
    console.log(i);
}
//返回结果，'a', 'b'

for (let i of arr.entries()) {
    console.log(i);
}
//返回结果，[0, 'a'], [1, 'b']

12、arr.includes(target, start)
判断数组 arr 中是否存在参数 target 成员，返回一个布尔值，该方法不改变原数组。
参数 target，需要查找的值(必须)。
参数 start，指定开始查找的位置，默认为 0。

const arr = ['boo', 'foo', 'zoo'];
const res = arr.includes('boo');
//返回结果，res = true

const res2 = arr.includes('woo');
//返回结果，res2 = false

const arr = ['boo', 'foo', 'foo', 'zoo'];
const res = arr.includes('foo');
//默认从索引位置 0 开始查询，返回结果，res = true

const res2 = arr.includes('foo', 3);
//指定从索引位置 3 开始查询，返回结果，res2 = false

13、arr.flat()
用于将多层嵌套的数组拉平，返回一个数组，不改变原数组。
arr.flat()，默认只会拉平一层，如果需要拉平多层，需要传递数值参数，表示拉平的层数。
arr.falt(Infinity)，如果需要拉平任意层数的数组，需要传递'Infinity'。

const arr = [1, [1,2,3,4], 4, [5, [5,6,7],8]];
const res = arr.flat();
//返回结果，res = [1, 1, 2, 3, 4, 4, 5, [5, 6, 7], 8]

const res2 = arr.flat(Infinity);
//返回结果，res2 = [1, 1, 2, 3, 4, 4, 5, 5, 6, 7, 8]

const res3 = [...new Set(arr.flat(Infinity))];
//返回结果，res3 = [1, 2, 3, 4, 5, 6, 7, 8]

14、arr.flatMap(callback)
返回一个数组，不改变原数组
先对数组调用map方法返回一个结果数组，再对结果数组执行flat方法

const arr = [1,2,3];
const res = arr.flatMap(item => item * item);
//返回结果，res = [1, 4, 9]

小结：带有回调函数，且能绑定回调函数this的数组方法，有如下这些：

静态方法
Array.from(target, callback, object);

实例方法
1、arr.map(callback, object);

2、arr.forEach(callback, object);

3、arr.filter(callback, object);

4、arr.some(callback, object);

5、arr.every(callback, object);

6、//arr.reduce(callback, sum);

7、arr.find(callback, object);

8、arr.findIndex(callback, object);

9、arr.findLast(callback, object) 与 arr.findLastIndex(callback, object);