ES6数组扩展常用的方法讲解
数组的扩展中，我给大家介绍如下几个方法，比较常用的：
Array.of()
Array.from()
Array.fill()
Array.keys()
Array.values()
Array.entries()
Array.copyWithin()
Array.find()
Array.findIndex()
Array.includes()
它们都分别有什么作用呢，下面我们就逐个讲解。
1. Array.of()
Array.of() 的定义是：将一组值转化为数组。
我们来看两个简单的案例：
{
let arr = Array.of(3,4,7,9,11);
console.log('arr=',arr); //[3,4,7,9,11]
let empty = Array.of();
console.log('empty=',empty); // []
}
第一个arr，我们给Array.of()传入了一组值，输出的结果是一个包含所有值的数组。
在参数为空的情况下，可以打印出一个空数组。Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。
在《ECMAScript 6 入门》书中有这样的介绍：
Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于 2
个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。
Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。
可以通过如下方法去实现Array.of()：
function ArrayOf(){
return [].slice.call(arguments);
}
2.Array.from()
Array.from() 把伪数组或者一个集合变量转换为数组。
首先我们创建一个html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>
在页面中引入我们创建的js文件。
{
let p = document.querySelectorAll('p');
let pArr = Array.from(p);
pArr.forEach(function(item){
console.log(item.textContent); // 1,2,3
});
}
首先我们获取到元素p的dom集合，大家都知道，此时的p变量是一个伪数组，我们不能使用forEach去遍历它。所以我们通过Array.from()，将伪数组转成数组，然后我们通过遍历来获取每一个p的textContent，打印出的值分别是 1，2，3。
Array.from()除了这个用处外，还有一个类似map的方式。
{
// 有类似map的方式
let arr = Array.from([1,3,5], function(item){return item*2});
console.log(arr);// [2,6,10]
}
跟map方法类似，遍历数组，对每个值进行操作，然后返回一个新数组。
3. Array.fill()
Array.fill()方法使用给定值，填充一个数组
{
let arr1 = [1,'a',undefined].fill(7);
console.log('fill-7', arr1); // [7,7,7]
}
我们使用7 来替换了数组中的所有元素，当然，这个方法也可以指定替换的起始位置。
{
let arr2 = ['a','b','c'].fill(7,1,3);
console.log('fill,pos', arr2); // ['a',7,7]
}
通过这个方式来替换，我们可以看到结果是 ['a',7,7] ，得到的结论如下：
第一个参数 7 ：替换的值。
第二个参数 1：从数组下标为 1 的位置开始替换，就是起始位置。
第三个参数 3: 替换的结束位置，也是数组的下标。
Array.keys() - Array.values() - Array.entries()
这三个方法我们放在一起说，因为它们之间都互有联系，我们来看段代码：
{
for(let index of ['1','c','ks'].keys()){
console.log('keys', index);//0,1,2
}
}
在这个for of 循环中，我们对数组使用了keys() 方法，遍历出来的结果是 0，1，2。keys() 方法返回的是数组的下标。
有了可以得到下标的方法，自然也有得到值的方法：
{
for(let value of ['1','c','ks'].values()){
console.log('values ', value);//1,c,ks
}
}
打印的结果不出所料，是数组的值。
Array.entries() 方法我想大家都能猜到了，返回的是下标和值。
{
for(let [index,value] of ['1','c','ks'].entries()){
console.log('values ', index,value);//0 1, 1 c ,2 ks
}
}
从结果可以看出，entries() 方法返回的是下标和其对应的值。
5.Array.copyWithin()
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
{
// 0 从哪个位置开始替换，3 ，开始读取数据，4，截至位置之前
console.log([1,2,3,4,5].copyWithin(0,3,4));
}
copyWithin()方法可以接收三个参数 ：
第一个参数： 从哪个位置开始替换， 第二个参数：开始读取数据的下标， 第三个参数：截至位置下标之前，就是不包括当前下标的值
6.Array.find() Array.findIndex()
这两个方法也是一对兄弟方法，分别返回值和下标：
{
// find 只找到第一个符合条件的值
let num = [1,2,3,4,5,6].find(function(item){
return item>3
})
console.log(num); // 4
// findIndex 只找到第一个符合条件的值 的 下标
let index = [1,2,3,4,5,6].findIndex(function(item){
return item>3
})
console.log(index); // 4
}
它们都有一个共同的特性：返回第一个符合条件的值或者是下标。
7.Array.includes()
includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。
{
// 数组中是不是包含 1
let bol1 = [1,2,NaN].includes(1);
console.log(bol1); // true
let bol2 = [1,2,NaN].includes(NaN);
console.log(bol2); // true
}
同时includes()方法还可以判断出NaN这个对ES5来说很难识别的类型。
下一篇： python编程学习之正则表达式操作讲解