转自：微信公众号—— web前端教程
前面讲了字符串和数值的扩展，今天要讲的是：数组的扩展。不知道大家能否跟得上这个节奏，你们在阅读中对讲解有存在疑惑，记得留言提出来，要真正地理解，否则白白浪费阅读时间就得不偿失了。
写过javascript代码的同学都知道数组是一个很常用的数据结构，能给我们带来很多方便。如今，ES6对数组进行进一步的扩展，为我们带来更多的特性，开发者都很期待。
第八节，开始学习吧.....
我们先来学几个即简单有好玩的新函数：
Array.of()函数
函数作用：将一组值，转换成数组。
Array.of(1,2,3,4,5);
//结果：[1,2,3,4,5]
是不是很好理解，传进去的数字是：1~5，最后经过Array.of函数处理，得到了一个数组，而数组的内容就是[1,2,3,4,5]。
Array.of函数的出现是源于Array构造函数的缺陷，这里对新知识学习不影响，所以展开不作讲解，我们只需要关心我们要掌握的知识就ok了。
Array.from( )函数
函数作用：可以将类似数组的对象或者可遍历的对象转换成真正的数组。
有哪些是类似数组的对象？最常见的就是调用getElementsByTagName方法得到的结果，它就是一个类似数组的结果，getElementsByTagName方法一定不陌生吧，我们来看一下：
let ele = document.getElementsByTagName('a');
ele instanceof Array; //结果：false，不是数组
ele instanceof Object; //结果:true，是对象
看上面的代码，我们调用getElementsByTagName方法，得到结果存到变量ele中，然后对其进行类型判断，发现变量ele并不是一个数组，而是一个对象Array，一个类似数组的对象Object，接下来我们用Array.from( )对其进行处理，并再一次进行类型判断。
Array.from(ele) instanceof Array;
//结果：true，是数组
这个时候我们运行的结果是：true，也就是经过Array.from函数处理返回的结果，已经变成了一个真正的数组。
Array.from函数其中一个用处就是将字符串转换成数组。看下面的案例：
let str = 'hello';
Array.from(str);
//结果：["h", "e", "l", "l", "o"]
字符串“hello”被转换后的返回的结果已经变成了一个数组：["h", "e", "l", "l","o"]。
除了上述的两个静态方法外，还新增了一些实例方法。
find( )函数
函数作用：找出数组中符合条件的第一个元素。
let arr = [1,2,3,4,5,6];
arr.find(function(value){
return value > 2;
});
//结果：value=3
看上面的代码，find()函数的参数是一个匿名函数，数组的每个元素都会进入匿名函数执行，直到结果为true，find函数就会返回value的值：3。倘若所有元素都不符合匿名函数的条件，find( )函数就会返回undefind。看下面的代码案例：
let arr = [1,2,3,4,5,6];
arr.find(function(value){
return value > 7;
});
//结果：undefined上面的案例中，数组中没有存在大于7的元素，所以find函数就会返回：undefined。
findIndex( )函数
函数作用：返回符合条件的第一个数组成员的位置。
let arr = [7,8,9,10];
arr.findIndex(function(value){
return value > 8;
});
//结果：2
上面的代码结果是：2，因为数组元素中大于8的元素是9，而元素9的位置正式2，（数组元素是从0算起）。倘若所有元素都不符合匿名函数的条件，findIndex( )函数就会返回-1。
fill( )函数
函数作用：用指定的值，填充到数组。
let arr = [1,2,3];
arr.fill(4);
//结果：[4,4,4]
经过fill( )函数处理后的数组arr已经变成了[4,4,4]；正如函数名fill（填充）一样。所有元素都被填充为数字4了。如果我想只填充部分元素可不可以呢？可以的，fill( )函数提供了一些参数，用于指定填充的起始位置和结束位置。
还是上面的案例，我们稍做调整，再演示一下：
let arr = [1,2,3];
arr.fill(4,1,3);
//结果：[1,4,4]
上面的代码中第2个参数和第3个参数的意思是：从位置1的元素开始填充数字4，截止到位置3之前，所以是位置1和位置2的元素被数字4填充了，得到的结果：[1,4,4]。
entries( )函数
函数作用：对数组的键值对进行遍历，返回一个遍历器，可以用for..of对其进行遍历。
遍历器和for..of也是ES6的新增特性，目前我们还没有介绍到，我们可以先进行一下简单地认知。
回到我们的entries( )函数，看个案例：.
for(let [i,v] of ['a', 'b'].entries())
{
console.log(i,v);
}
//0 "a"
//1 "b"上面的代码中，我们将entries( )函数返回的一个遍历器，用for...of进行遍历，并打印出结果，能得到数组的键值：0和1，以及对应的数组元素：‘a‘和’b‘。
如果只想遍历数组的索引键的话，可以使用另一个实例方法。
keys( )函数
函数作用：对数组的索引键进行遍历，返回一个遍历器。
for(let index of ['a', 'b'].keys())
{
console.log(index);
}
//0
//1正如上面的运行结果一样，我们打印出了数组的索引键：0和1。
如果我们想只对数组的元素进行遍历，我们可以使用两一个实例方法。
values( )函数
作用：对数组的元素进行遍历，返回一个遍历器。
for(let value of ['a', 'b'].values())
{
console.log(value);
}
//a
//b
上面的代码运行结果也是我们预料之中的，最终打印出了数组的元素：a和b。
除了新增函数以外，ES6还为数组带来了一个新的概念：数组推导。
数组推导
数组推导：用简洁的写法，直接通过现有的数组生成新数组。
举个例子：加入我们有一个数组，我在这个数组的基础上，每个元素乘以2，得到一个新数组。
我们看看传统的实现方法：
var arr1 = [1,2,3,4];
var arr2 = [];
for(let i=0;i<arr1.length;i++){
//每个元素乘以2后，push到数组arr2
arr2.push(arr1[i]*2);
}
console.log(arr2);
//结果：[2,4,6,8]
传统的方式，除了以上的方式，我们还可以用forEach方法实现。但我们现在介绍的主要是利用ES6提供的新写法：数组推导。
var arr1 = [1, 2, 3, 4];
var arr2 = [for(i of arr1) i * 2];
console.log(arr2);
//结果： [ 2, 4, 6, 8 ]
我们同样可以得到数组arr2，它的值和上一段代码的一样。并且代码量大大地减少了。这就是数组推导给我们带来的便利。
在数组推导中，for..of后面还可以加上if语句，我们看来看看代码案例：
var array1 = [1, 2, 3, 4];
var array2 = [for(i of array1) if(i>3) i];
console.log(array2);
//结果： [4]
在上面代码中，我们不再是对数组的元素乘以2，而是用if做了个判断：数组的元素要大于3。所以运行的结果是：[ 4 ]。
好了，数组的扩展介绍得差不多了，主要是一些新增函数的使用介绍，这些函数都非常便利，为开发者省去了不少代码量。如果存在疑惑，可以留言提问，前端君都会回复。
本节小结
总结：ES6为数组带来了很多很实用的方法：Array.of( )、Array.from( )、find( )、findIndex( )、fill( )、entries( )、values()，此外还有一个更简洁的语法：数组推导，能让我们更方便地生成一个新数组。
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
