ECMAScript 6 学习笔记（七）：数组的扩展

扩展运算符

相当于 rest 参数的逆运算，同样也是三个点（ ... ），用来将一个数组转为逗号分隔的参数序列。该运算符主要用于函数调用。需要注意的是，扩展运算符放在括号中会被当成函数调用，此时若不是函数调用就会报错。扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符。

function foo(...argus) {
  console.log(...argus);
}

foo(1, 2, 3); 
// 1 2 3
//第一个...把参数“1, 2, 3”转为数组[1, 2, 3]
//第二个...把数组[1, 2, 3]转为参数序列“1, 2, 3”

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

由于扩展运算符可以展开数组，所以不再需要 apply() 方法，将数组转为函数的参数了。

var arr = [2, 5, 11, 23];

// ES5
Math.max.apply(null, arr);

// ES6
Math.max(...arr);

扩展运算符的应用

1. 复制数组

// ES5 写法
var a1 = [1, 2, 3];
var a2 = a1.concat();

// ES6 写法
var a1 = [1, 2, 3];
// 写法一
var a2 = [...a1];
// 写法二
var [...a2] = a1;

2. 合并数组

// ES5 写法
var a1 = [1, 2];
var a2 = [3, 4];
var a3 = a1.concat(a2); // 浅拷贝

// ES6 写法
var a1 = [1, 2];
var a2 = [3, 4];
var a3 = [...a1, ...a2]; // 浅拷贝

3. 解构赋值

var arr = [1, 2, 3, 4];
[a, ...b] = arr; // a: 1, b: [2, 3, 4]

4. 字符串

[..."hello"] // ["h", "e", "l", "l", "o"]

新增数组方法

Array.from()

这个方法用于将类数组对象和可遍历对象转为真正的数组。

// ES5 写法
function foo() {
    return [].slice.call(arguments);
}
console.log(foo(1, 2, 3)) // [1, 2, 3]

// Array.from()
function bar() {
    return Array.from(arguments);
}
console.log(bar(1, 2, 3)) // [1, 2, 3]

同时可以利用第二个参数实现类似 map() 的方法

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

Array.of()

这个方法用于将一组值转为数组，用来代替 Array() 或者 new Array() 。

新增数组实例方法

copyWithin()

在数组内部，将指定位置的数据复制到其他位置（覆盖），然后返回当前数组：

Array.prototype.copyWithin(target, start = 0, end = this.length)
// *target：从该位置开始替换数据，负数时表示倒数。
// start：从该位置开始读取数据，默认为0，负数时表示倒数。
// end：到该位置前停止读取数据，默认为数组长度，负数时表示倒数。

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

find() 和 findIndex()

find() 方法找出第一个满足回调函数的成员并返回，若没有符合条件的则返回 undefined 。该回调函数接受三个参数，依次为当前的值、当前的位置和原数组。 findIndex() 方法与 find() 方法类似，返回第一个满足回调函数的成员的位置，若没有符合的返回 -1 。这两个方法都支持第二个参数，用来绑定回调函数的 this 对象。

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

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

fill()

使用给定值填充数组，常用于初始化数组。 fill() 方法接受3个参数，第一个是用来填充数组的值，第二第三个参数对应指定填充的起始位置和结束位置。

[1, 2, 3, 4, 5, 6].fill(0, 2, 4) // [1, 2, 0, 0, 5, 6]

entries()，keys() 和 values()

这三个方法都是用来遍历数组并返回一个遍历器对象，可以用 for...of 循环遍历。它们的区别在于 keys() 遍历键名、 values() 遍历键值、 entries() 遍历键值对。

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

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

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

includes()

判断数组是否包含给定的值，返回一个布尔值，类似于字符串的 includes 方法。该方法第一个参数为需要寻找的值，第二个参数为开始寻找的起始位置，如果该值为负数则表示倒数的位置，如果大于数组长度则会从0重新开始计数。

[1, 2, 3].includes(1)     // 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

flat() 和 flatMap()

flat() 用于将嵌套的数组降维并返回一个新的数组，可以通过参数设定需要降低几层嵌套数组，设为 Infinity 则不管有多少层嵌套，都转为一维数组。如果原数组有空位， flat() 方法会跳过空位。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap() 方法相当于对数组执行 map() 方法后再对返回的数组执行 flat() 方法并返回一个全新的数组，但是只能展开一层数组。该方法的具体参数见示例下方代码，与 map() 方法类似。

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

arr.flatMap(function callback(currentValue[, index[, array]]) {
  // ...
}[, thisArg])

数组的空位

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。空位不是 undefined ，空位表示没有任何值。

Array(3) // [, , ,]

ES5 中各方法对空位的处理非常不一致，大多数情况下会忽略，而 ES6 则明确地把空位转成 undefined 。

// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// reduce方法
[1,,2].reduce((x,y) => x+y) // 3

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"