ES6 随记（3.3）-- 数组的拓展

上一章请见：

1. ES6 随记（1）-- let 与 const

2. ES6 随记（2）-- 解构赋值

3. ES6 随记（3.1）-- 字符串的拓展

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 入门