数组操作方法（ES6）

Array.from()

instanceof判断数据类型

数组是开发中经常用到的数据结构，它非常好用。在 JavaScript 的世界里有些对象被理解为数组，然而缺不能使用数组的原生 API，比如函数中的 arguments、DOM中的 NodeList等。当然，还有一些可遍历的对象，看上去都像数组却不能直接使用数组的 API，因为它们是伪数组（Array-Like）。要想对这些对象使用数组的 API 就要想办法把它们转化为数组，传统的做法是这样的：

let args = Array.prototype.slice.call(arguments);
let imgs = [].slice.call(document.querySelectorAll('img'));

基本原理是使用 call 将数组的 api 应用在新的对象上，换句话说是利用改变函数的上下文来间接使用数组的 api。在 ES6 中提供了新的 api 来解决这个问题，就是 Array.from，代码如下：

let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));

TIP
伪数组具备两个特征，1. 按索引方式储存数据 2. 具有length属性；如：

let arrLike = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}

细讲

难道 Array.from 只能用来将伪数组转换成数组吗，还有其他用法吗？这要来看下 Array.from 的几个参数：

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数 含义 必选
arrayLike 想要转换成数组的伪数组对象或可迭代对象 Y
mapFn 如果指定了该参数，新数组中的每个元素会执行该回调函数 N
thisArg 可选参数，执行回调函数 mapFn 时 this 对象 N
看了这几个参数至少能看到 Array.from 还具备 map 的功能，比如我们想初始化一个长度为 5 的数组，每个数组元素默认为 1，之前的做法是这样的：

let arr = Array(6).join(' ').split('').map(item => 1)
// [1,1,1,1,1]

这样写虽然也能实现，但是用起来比较繁琐，使用 Array.from 就会简洁很多。

Array.from({
    length: 5
}, function() {
    return 1
})

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

语法：Array.of(element0[, element1[, …[, elementN]]])

参数 含义 必选
elementN 任意个参数，将按顺序成为返回数组中的元素 Y

Array.prototype.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

let array = [1, 2, 3, 4]
array.fill(0, 1, 2)
// [1,0,3,4]

这个操作是将 array 数组的第二个元素（索引为1）到第三个元素（索引为2）内的数填充为 0，不包括第三个元素，所以结果是 [1, 0, 3, 4]

技巧：用 fill 初始化为一个长度固定，元素为指定值的数组。

Array(5).fill(1)
// [1,1,1,1,1]

fill 不具备遍历的功能，它是通过指定要操作的索引范围来进行，通过这道题目可以看出不指定索引会对所有元素进行操作

语法：arr.fill(value[, start[, end]])

参数 含义 必选
value 用来填充数组元素的值 Y
start 起始索引，默认值为0 N
end 终止索引，默认值为 this.length N

Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

let array = [5, 12, 8, 130, 44];

let found = array.find(function(element) {
    return element > 10;
});

console.log(found);
// 12

语法：arr.find(callback[, thisArg])

参数 含义 必选
callback 在数组每一项上执行的函数，接收 3 个参数，element、index、array Y
thisArg 执行回调时用作 this 的对象 N

Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。

let array = [5, 12, 8, 130, 44];

let found = array.find(function(element) {
    return element > 10;
});

console.log(found);
// 1

语法：arr.findIndex(callback[, thisArg])

参数 含义 必选
callback 在数组每一项上执行的函数，接收 3 个参数，element、index、array Y
thisArg 执行回调时用作 this 的对象 N

Array.prototype.copyWithin()

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

let arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(1, 3))
// [1, 4, 5, 4, 5]

语法：arr.copyWithin(target, start = 0, end = this.length)

参数 含义 必选
target 从该位置开始替换数据。如果为负值，表示倒数 Y
start 从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算 N
end 到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算 N