数组的扩展

扩展运算符（...）

基本用法

• 该运算符作用正好与rest参数作用相反，用于展开数组为参数序列，用逗号分割。

console.log(...[1, 2, 3])
// 1 2 3

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

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

应用

1. 复制数组，数组作为一个复合型的数据结构，直接复制的话只是复制了指向数组的指针

//错误
const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]

//正确
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

2. 合并数组

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3]

3. 与解构赋值结合起来，用于生成新数组，只能将扩展运算符放在最后一位

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

4. 转变字符串为数组，可以正确识别四个字节的字符串

let str = 'x\uD83D\uDE80y';

str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'

[...str].reverse().join('')
// 'y\uD83D\uDE80x'

5. 将实现了 Iterator 接口的对象转化为数组

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

• nodeList是一个类似数组的对象，可以将其转化为真正的数组
• 对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组,可以使用Array.from

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

6. Map 和 Set 结构，Generator 函数

• 这些结构都可以转化为数组，扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符

方法

Array.from()

• Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

• 值得注意的是扩展运算符也可以将其他结构转化为数组，但扩展运算符是调用遍历器接口做到的，而Array.from()是通过一个对象的length属性，换句话说只要一个对象有length属性就可以将他看做类数组对象

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

• 如果参数是一个数组，则返回原数组。
• 该方法还可以接受第二个参数，对新数组中的每个元素进行操作，类似map方法

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of()

• 该函数的出现主要是为了弥补Array构造函数的不足，Array的构造函数会因为参数的数量不同而产生一些不一致的问题，如下

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

• 当没有参数是，返回一个空数组，当有一个参数时，将该参数作为数组长度，当参数长度大于俩个时，才以这些参数作为元素构成数组。

数组实例的 copyWithin()

• 该方法用于改变数组内部的值通过赋值数组内部其他值来覆盖需要改变的值，该方法接受三个参数
  • target（必需）：从该位置开始替换数据。
  • start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
  • end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束，复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

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

• find方法用于找出数组内符合某个条件的值，参数为一回调函数，返回true时表示找到，找到返回该值，找不到返回undefined

[1, 4, -5, 10].find((n) => n < 0)
// -5

• findindex方法与上类似，不同的是返回下标，若未找到返回-1

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

数组实例的fill()

• 该方法使用指定值填充数组，可用于数组的初始化

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

new Array(3).fill(7)
// [7, 7, 7]

• 该方法也可使用第二个和第三个参数，表示填充开始的位置和结束的位置

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

• 遍历器方法，分别返回键数组，值数组，键值对数组（这三个方法扔数组里，没一点卵用）

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类似，检查数组内有没有某个值,可添加第二个参数，表示开始位置，超过数组长度返回false，若为负数，表示倒数，此时超过数组长度，表示从0开始

[1, 2, 3].includes(3, 3); 

对于数组空位的处理

• 在ES5中对数组空位的处理是比较不一致的，规则如下
  • forEach(), filter(), every() 和some()都会跳过空位。
  • map()会跳过空位，但会保留这个值
  • join()和toString()会将空位视为undefined，而undefined和null会被处*
    理成空字符串。

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

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

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

// 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,,"

• 但是在ES6中对此类现象做出了改变，ES6中凡是新增的方法及扩展运算符都将数组空位视为undefined，for...of也不会跳过空位

// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,'a'].keys()] // [0,1]

// values()
[...[,'a'].values()] // [undefined,"a"]

// find()
[,'a'].find(x => true) // undefined

// findIndex()
[,'a'].findIndex(x => true) // 0