ES6 随记（3.3）-- 数组的拓展
上一章请见：
4. ES6 随记（3.2）-- 正则的拓展 & 数值的拓展
4. 拓展
d. 数组的拓展
· Array.from 方法
querySelectorAll 得到并不是一个数组，而是 NodeList；arguments 也不是数组，是个很奇怪的对象。
所以新增了一个 Array.from 方法，将这些可遍历（具有 Iterator 接口）对象轻松转化成真实的数组，
var $page = document.querySelectorAll('.page');
var pageArr = Array.from($page); // [div.page.1, div.page.2]
var temp = pageArr.splice(0, 1); // [div.page.1]
console.log(pageArr); // [div.page.2]
(function(){
var args = Array.from(arguments);
// var args = [...arguments]; // 此方法与上式等效，Array.from 的简约版
args.forEach(function(a){ // arguments 没法直接 forEach
console.log(a); // 1 // 2
});
})(1, 2)
// 可遍历对象有很多，以后讲 Iterator 接口时会再说
console.log(Array.from('abc')); // [1,2,3]
// 类数组对象如果有 length，则按数组的那套申明规则来
console.log(Array.from({1:2, length:2})); // [undefined, 2]
其次，Array.from 可以传递第二个参数，相当于合并了 map 方法。
var arrayLike = '12'; var arr1 = Array.from(arrayLike, x => x * x); console.log(arr1); // [1, 4]; // 等同于 var arr2 = Array.from(arrayLike).map(x => x * x); console.log(arr1); // [1, 4];
// 新建一个连续数字的数组 var arr11 = Array.from({ length: 10 }, (n, i) => i); console.log(arr11); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
· Array.of 方法
其实它就是为了弥补以下这个缺陷而存在
// 是长度还是元素，傻傻分不清楚 console.log(new Array(3)); // [undefined × 3] console.log(new Array(1, 2)); // [1, 2] // Array.of 就只会是元素 console.log(Array.of(3)); // [3] console.log(Array.of(1, 2)); // [1, 2]
· copyWithin(target, start, end) 方法
从 start 开始到 end 结束的元素，覆盖掉从 target 到 target+(end-start) 个长度的元素。
start 传负值为倒数；end 不填为到最后，小于 start 无效，除非是负数，为倒数；这个 start 和 end 的传值规则到哪都是一致的。
console.log([1,2,3,4,5].copyWithin(0, 4)); // [5, 2, 3, 4, 5] console.log([1,2,3,4,5].copyWithin(0, 3, 2)); // [1, 2, 3, 4, 5] console.log([1,2,3,4,5].copyWithin(0, 2, -1)); // [3, 4, 3, 4, 5] console.log([1,2,3,4,5].copyWithin(0, -1)); // [5, 2, 3, 4, 5] console.log([1,2,3,4,5].copyWithin(0, -2, -1)); // [4, 2, 3, 4, 5]
· find 和 findIndex 方法
参数为一个函数，进行运算后，返回第一个 return true 的元素/索引，否则返回 undefined / -1
console.log([1,4,8,12].find( function(item,index,arr){return item>6;}) ); //8
console.log([1,4,8,12].findIndex( function(item,index,arr){return item>6;}) ); //2
· fill(template, start, end) 方法
传递三个参数，从 start 开始到 end 结束的所有元素用 template 替换掉。
console.log([1,2,3,4].fill(9)); // [9, 9, 9, 9] console.log([1,2,3,4].fill(9, 1)); // [1, 9, 9, 9] console.log([1,2,3,4].fill(9, -1)); // [1, 2, 3, 9] console.log([1,2,3,4].fill(9, 1, -1)); // [1, 9, 9, 4]
· keys() / values() / entries() 数组遍历简化
注：只能用于 for-of 循环
console.log(['x','y'].entries()); // Array Iterator {}
for(var i of ['x', 'y'].keys()) {
console.log(i); // 0 // 1
}
for(var i in ['x', 'y'].keys()) {
console.log(i); // for-in 不运行
}
for(var i of ['x', 'y'].entries()) {
console.log(i); // [0, 'x'] // [1, 'y']
}
for(var [index, item] of ['x', 'y'].entries()) {
console.log(index, item); // 0, 'x' // 1, 'y'
}
for(var i of ['x', 'y'].values()) {
console.log(i); // 'x' // 'y' // 2017.04.19 暂不支持
}
· includes(value, position) 方法
判断 position 位置是否为 value；或 position 为空，判断该数组是否存在某元素为 value。
它相比 indexOf 更直观有语义，也支持对 NaN 的判断
var arr = [1,2,3,4,NaN]; console.log(arr.includes(2)); // true console.log(arr.includes(5)); // false console.log(arr.includes(2, 1));// true console.log(arr.includes(2, 2));// false console.log(arr.includes(NaN)); // true console.log(arr.indexOf(NaN)); // -1
· 数组空位
ES5 对空位的设置是非常不统一的，
首先我们得知道 [,] 和 [undefined, undefined] 是不一样的，
let arr1 = [,0], arr2 = [undefined, undefined]; // n in 代表 n 号位有值，它和对象的 in 不一样 console.log(1 in arr1); // true // 可见，数组空值并不是 undefined console.log(0 in arr1, 0 in arr2); // false, true
其次，ES5 的方法也大多直接忽略掉了空值
// forEach filter every some map 会跳过空值
[,'a',undefined].forEach((x,i) => console.log(i)); // 1
console.log(['a',,'b'].filter(x => true)); // ['a','b']
console.log([,'a'].every(x => x==='a')); // true
console.log([,'a'].some(x => x !== 'a')); // false
// map 稍微有点特殊，虽然过程跳过了，但结果还是保留了这个空值
console.log([,undefined,'a'].map(x => 1)); // [,1,1]
// join 和 toString 倒是把空值当成 undefined
console.log([,'a',undefined,null].join('#')); // "#a##"
console.log([,'a',undefined,null].toString()); // ",a,,"
虽然 ES6 没有将这个 bug 进行调整，但在新方法中加入了对空值的判断。
即 copyWithin / fill / for-of / keys 等都将不忽略空值，以 undefined 来对待。
而想要完善 ES5 对空值的判断，那么就用 Array.from 转化一下吧，它将把空值变成 undefined。
console.log([,,]); // [undefined × 2] // 待 x 数字其实都是空值 console.log(Array.from([,,])); // [undefined, undefined]
本文部分转载自 阮一峰 的 ECMAScript 6 入门
