ES6学习笔记 3-数组的扩充

Array.from()

Array.from()方法用于将两类对象转为真正的数组：类似数组的对象(array-like object)和可遍历(iterable)对象。

let ps=document.querySelectorAll('p');
Array.from(ps).forEach(function(p){
    console.log(p);
})

上面的代码中，querySelectorAll方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法。

任何有length属性的对象，都可以通过Array.from方法转换为数组.

Array.from({0:"a",1:"b",2:"c"},length:3);
// ["a","b","c"]

对于没有部署该方法的浏览器，可以用Array.prototyp.slice方法替代。

const toArray = (() =>
    Array.from ? Array.from : obj => [].slice.call(obj)    
)();

Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理。

Array.from(arrayLike, x => x*x);
//等同于
Array.from(arrayLike).map(x=>x*x);

下面的例子将数组中布尔值为false的成员转为0.

Array.from([1,2,3],(n)=>n||0)
//[1,0,2,0,3]

Array.of()

将一组值转换为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

数组实例的find()和findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

var found = [1,4,-5,10].find((n)->n<0);
console.log("found:",found);

上面的代码找出数组中第一个小于0的成员。

[1,5,10,15].find(function(value,index,arr){
    return value>9;
});

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

数组实例的fill()

fill()使用给定值，填充一个数组。

['a','b','c'].fill(7);//[7,7,7]
new Array(3).fill(7)//[7,7,7]

fill()方法用于空数组的初始化很方便，数组中已经有的元素会被全部抹去。
fill()可以接受第二个和第三个参数用于指定填充的起始位置和结束位置。

['a','b','c'].fill(7,1,2)
//['a',7,'c']

数组实例的entries(),keys()和values()

ES6提供三个新的方法–entries(),keys()和values()– 用于遍历数组。

entries()对键值对进行遍历
keys() 对键名进行遍历
values() 对键值的遍历

for(let index of ['a','b'].keys()){
    console.log(index)    
}

for(let element of ['a','b'].values()){
    console.log(elem);    
}//nodejs V6.5.0支持

for(let [index,element] of ['a','b'].entries()){
    console.log(index,elem);    
}

数组实例的includes()

Array.protypeto.includes方法返回一个布尔值，表示某个数组是否包含给定的值。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true

该方法的第二个参数表示搜索的起始位置

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

下面代码用来检查当前环境是否支持该方法，如果不支持，部署一个简易的替代版本。

const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => false