ES6&数组扩展

ES6数组扩展

1.Array.from()

定义：Array.from()用于将两类对象转换成真正的数组：类数组对象和可遍历的对象(具有Iterator接口)

1.类似数组对象

示例
var some = {
"0" : "hello",
"1" : "world",
"2" : "lijaha",
"length" : "3"
}
使用Array.from()方法转换成数组
var array = Array.from(some);

应用中常见的类似数组对象有：DOM操作返回的NodeList集合以及函数内部的arguments

示例
1.NodeList集合
var list = Array.from(document.querySelectorAll('p'));
list.forEach((element) => console.log(element)); //只有数组才能使用forEach方法进行遍历
2.函数内部的arguments
function count() {
var arg = Array.from(arguments);
}

2.可遍历对象

示例
var sring = 'hello';
var array = Array.from(string); //Array.from('hello')

ES6新增数据结构Map和Set
//Set数据结构
var someSet = new Set(['a', 'b', 'c']);
var array = Array.from(someSet);
//Map数据结构
var someMap = new Map([['name', 'lijaha'],['age', '20']);
var array = Array.from(someMap) //会转化成二维数组

此外，扩展运算符(...)也可以将具有遍历器接口(Iterator)的数据结构转换成数组

示例
function count() {
var arg = [...arguments];
}

var liat = [...document.querySelectorAll('p')];

所谓类数组的对象，本质都是拥有length属性，任何拥有length属性的对象都可以通过Array.from()转换成数组

Array.from()的第二参数类似于数组中的map方法，用来对数组中的每个元素进行操作，并返回操作结果后的新数组。

示例
var array = [1,2,3];
array.map((x) => x2); //ES5数组map方法，map拥有三个参数，element、index、array
Array.from(array,(x) => x2);

2.Array.of()

定义：将一组值转化成数组

//Array.of主要是用来弥补new Array()构造函数传参的不足
var array = new Array(); //new一个空组[]
var array = new Array(2); //new一个length为2的数组[ , ]
var array = new Array(1,2,3); //new一个[1,2,3]数组
由上面可以看出new Array()根据传参个数的不同而导致不同的重载

Array.of()示例
var array = Array.of(); //new一个空数组
var array = Array.of(2); //[2]
var array = Array.of(1,2,3); //[1,2,3]

3.数组实例find()和findIndex()

定义：find方法用来找出数组中第一个符合条件的数组成员，findIndex方法用来找出数组中第一个符合条件的数组成员的下标

示例
var array = Array.of(1,2,3,4);
array.find((element) => element > 1); //2
array.findIndex((element) => element == 2); //1
可借助Object.is方法来识别NaN，用来弥补indexOf()方法的不足,indexOf内部使用‘===’来判断，因为NaN是一个不确定的数，NaN === NaN(false)
[NaN].indexOf(NaN); //-1
[NaN].findIndex((element) => Object.is(NaN,element)); //

4.数组实例entries()、keys()和values()

定义：用来遍历数组，entries()是对键值的遍历、keys()是对键的遍历、values()是对值得遍历

示例
var array = Array.of(2,3,4);
//使用entries()方法
for (let [index,element] of array.entries()){
console.log(index,element);
}
//使用keys()方法
for (let key of array.keys()){
console.log(key);
}
//使用values()方法
for (ler value of array.values()){
console.log(value);
}

5.数组实例Array.includes()

ES7方法，Array.includes()方法返回一个布尔值，表示数组是否含有给定的值

示例
var array = [2,3,4];
array.includes(3); //true
array.includes(5); //false
使用includes()可避免对indexOf()方法对NaN的误判
[NaN].includes(NaN); //true