ES6之数组Array新特性
文章目录
其他数组相关传送门
Array.of() 函数
将一组值，转换成数组
Array.of('a', 'b', 0, 1, null, undefined); // ["a", "b", 0, 1, null, undefined]
Array.from( ) 函数
可以将类似数组的对象或者可遍历的对象转换成真正的数组
有哪些是类似数组的对象？最常见的就是调用getElementsByTagName方法得到的结果，它就是一个类似数组的结果
let ele = document.getElementsByTagName('a');
ele instanceof Array; //结果：false，不是数组
ele instanceof Object; //结果:true，是对象
Array.from(ele) instanceof Array;//结果：true，是数组
经过Array.from函数处理返回的结果，变成了一个真正的数组。
Array.from函数其中一个用处就是将字符串转换成数组
let str = 'hello';
Array.from(str); //结果：["h", "e", "l", "l", "o"]
使用 ES6的扩展运算符 也能达到上面的效果：
let ele = document.getElementsByTagName('a');
[...ele] instanceof Array;
// 等价于
Array.from(ele) instanceof Array;
let str = 'hello';
[...str]
// 等价于
Array.from(str);
find( ) 函数
找出数组中符合条件的第一个元素
let arr = [1, 2, 3, 4, 5, 6];
let arr2 = arr.find((value) => {
return value > 2;
});
console.log(arr2); // 3
let arr3 = arr.find((value) => {
return value > 7;
});
console.log(arr3); // undefined
看上面的代码，find()函数的参数是一个匿名函数，数组的每个元素都会进入匿名函数执行，直到结果为true，find函数就会返回value的值：3。倘若所有元素都不符合匿名函数的条件，find( )函数就会返回undefind。
findIndex( ) 函数
返回符合条件的第一个数组成员的位置
let arr = [7, 8, 9, 10];
let arr2 = arr.findIndex((value) => {
return value > 8;
});
console.log(arr2) // 2
let arr3 = arr.findIndex((value) => {
return value > 11;
});
console.log(arr3) // -1
数组元素中大于8的元素是9，而元素9的位置正式2，（数组元素是从0算起）。倘若所有元素都不符合匿名函数的条件，findIndex( )函数就会返回-1。
fill( ) 函数
用指定的值，填充到数组
let arr = [1,2,3];
let arr1 = arr.fill(4);
console.log(arr1); // [4,4,4]
经过fill( )函数处理后的数组arr已经变成了[4,4,4]；正如函数名fill（填充）一样。所有元素都被填充为数字4了。
fill( )函数提供了一些参数，用于指定填充的起始位置和结束位置。
let arr = [7, 8, 9, 10];
let arr1 = arr.fill(4,1,3);
console.log(arr1); // [7, 4, 4, 10]
上面的代码中第2个参数和第3个参数的意思是：从位置1的元素开始填充数字4，截止到位置3之前，所以是位置1和位置2的元素被数字4填充了，得到的结果：[7, 4, 4, 10]。
entries( ) 函数
对数组的键值对进行遍历，返回一个遍历器，可以用for…of对其进行遍历
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
values( )函数
对数组的元素进行遍历，返回一个遍历器
for(let value of ['a', 'b'].values()){
console.log(value);
}
//a
//b
数组推导
用简洁的写法，直接通过现有的数组生成新数组
举个例子：加入我们有一个数组，我在这个数组的基础上，每个元素乘以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]
用ES6提供的新写法：(数组推导)
var arr1 = [1, 2, 3, 4];
var arr2 = [for(i of arr1) i * 2];
console.log(arr2);
//结果： [ 2, 4, 6, 8 ]
在数组推导中，for…of后面还可以加上if语句：
var array1 = [1, 2, 3, 4];
var array2 = [for(i of array1) if(i>3) i];
console.log(array2);
//结果： [4]
总结
ES6为数组带来了很多很实用的方法：Array.of( )、Array.from( )、find( )、findIndex( )、fill( )、entries( )、values()，此外还有一个更简洁的语法：数组推导，能让我们更方便地生成一个新数组。
