Array API—01

首先，打开浏览器控制台，输入[].__proto__可以看到所有的方法

（1）concat()

concat() 方法用于连接两个或多个数组

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本

arr.concat(arr1,arr2,...,arrn)

        let arr1 = [1,2]
        let arr2 = [4,5]
        let arr = arr1.concat(arr2)
        console.log(arr);  // [1, 2, 4, 5]

注意：

• 如果concat中的参数不是数组，则连接的是单个的元素

（2）copyWithin()—ES6

copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

array.copyWithin(target, start, end)

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

        let arr = [1,2,3,4,5,6,7,8]
        arr.copyWithin(2,4)  // 1,2,5,6,7,8,7,8
        arr.copyWithin(2,4,6)  // 1,2,5,6,5,6,7,8  

说明：

• 第二行表示从索引为2的地方（3）开始替换，替换内容为从索引为4的地方（5）到结尾（5,6,7,8），替换了4个元素，两个没有替换所以仍然是7,8
• 第三行表示从索引为2的地方（3）开始替换，替换内容为索引4-6之间(不包含6)的元素（5,6），因此3，4地方被替换为5,6。

注意：这三个参数都应该是数值，如果不是，会自动转为数值。

（3）entries()、keys()、values()—ES6

ES6的这三个新方法都是用来遍历数组的。都返回一个遍历器对象，可以用for...of...循环遍历

• keys()：对键名的遍历

  • let arr = ['a','b']
    let iter = arr.keys()
    for (let index of iter){
        console.log(index);  // 0  1
    }

• values()：对键值的遍历

  • let arr = ['a','b']
    let iter = arr.values()
    for (let val of iter){
        console.log(val);  // a  b
    }

• entries()：对键值对的遍历

  • let arr = ['a','b']
    let iter = arr.entries()
    for (let ent of iter){
        console.log(ent);  // [0,"a"] [1,"b"]    
    }

如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

 （4）every() & some()

every()判断数组中是否每一个元素都符合条件，都符合返回true，否则返回false。它们的参数都是一个回调函数

let arr = [4,5,6]
let allBig = arr.every((elem,i,arr)=>{
    return elem >3
})
console.log(allBig);  // true

说明：

• 回调中的三个参数：
  • 第一个：当前遍历的元素
  • 第二个：当前遍历元素的索引
  • 抵三个：被遍历的数组

some()功能与every()对应，作用是判断数组中是否有符合某个条件的元素，有一个符合就返回true，否则返回false。用法同上

（5）fill()—ES6

fill()方法使用给定的值，填充一个数组

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

fill方法执行结束，数组中已有的元素会被全部抹去

还可以指定第二个第三个参数，用于指定填充的起始位置和结束位置

['a', 'b', 'c','d'].fill(7, 1, 3)  // ["a", 7, 7, "d"]

注意：如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象

（6）filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。参数是一个回调函数

        let arr =[1,2,3,4,5,6,7]
        let newArr = arr.filter((e,i,a)=>{
            return e%2===0
        })
        console.log(newArr);  // [2, 4, 6]

说明：

• 这个代码功能是返回一个arr数组中是偶数的成员
• 回调中的三个参数的作用与上面的every()方法和some()相同

（7）find() & findIndex()—ES6

find()方法用于找出第一个符合条件的数组成员。参数是一个回调函数，回调函数的参数与every(),some(),filter()相同。没找到返回undefined

        let arr = [1,2,3,4]
        let n = arr.find((item) => item>2)
        console.log(n);  // 3

findIndex()方法与find()方法非常类似。不同之处在于它返回的是第一个符合条件的数组成员的索引。没找到返回-1

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

 另外这两个方法都可以发现NaN,弥补了数组的indexOf方法的不足

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

 上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

（8）flat() & flatMap()—ES6

①flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响

        let arr = [1,2,[4,5]]
        let fArr = arr.flat()
        console.log(fArr);  // [1, 2, 4, 5]

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

        let arr = [1,2,[4,[7,8]]]
        let fArr = arr.flat(2)
        console.log(fArr);  // [1, 2, 4, 7,8]

如果不论多少层都拉平的话，可以使用Infinity关键字作为参数

        let arr = [1,2,[4,[7,8]]]
        let fArr = arr.flat(Infinity)
        console.log(fArr);  // [1, 2, 4, 7,8]

如果原数组有空位，flat()方法会跳过空位。

②flatMap()方法对源数组的每一个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组

        let arr = [2,3,4]
        let newArr = arr.flatMap((item) => {
            return [item,item*item]
        })
        console.log(newArr);  // [2, 4, 3, 9, 4, 16]

 flatMap()只能展开一层数组。

[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

 （9）forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

        let arr = [2,3,4]
        arr.forEach((e,i,a)=>{
            console.log(e);
        })

说明：e,i,a这三个参数同其他大部分数组方法的回调一样，分别是：当前遍历的元素、当前元素的索引、原数组

注意：

• 对于基本类型的数组元素，直接在e上操作当前元素（修改当前元素的值），原数组不会改变。如果当前元素是引用类型，则可以直接通过e修改（因为引用的是地址）
• 如果需要改变当前元素的值，则可以使用a[i]的方式访问当前元素，加以修改

（10）includes()—ES6

includes()方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

此方法第二个参数表示搜索的起始位置，默认为0，如果为负数，则表示倒数的位置。如果大于数组长度，则会重置为0开始

与indexOf()相比语义化较好，不会对NaN的误判：

console.log([1,NaN].includes(NaN));  // true
console.log([1,NaN].indexOf(NaN));  // -1

下面代码用来检查当前环境是否支持该方法，如果不支持，部署一个简易的替代版本。

const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(['foo', 'bar'], 'baz'); // => false