ES6之扩展运算符三个点（...）

对象的扩展运算符

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝(浅拷贝)到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

// 上述方法实际上等价于
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

// 如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

数组的扩展运算符

可以将数组转换为参数序列

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

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

用于函数调用

function push(array, ...items) { // ...items 为除array以外所有参数的数组，即[1, 2, 3, 4, 5]
  array.push(...items);
}

push([], 1, 2, 3, 4, 5)

可以复制数组

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1; // 两者是不同的数组实例，非引用关系
// es5中的复制数组
const a2 = a1.concat();

合并数组

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

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

与解构赋值结合


const list = [0, 1, 2, 3];
[a, ...rest] = list
console.log(a); // 0
console.log(rest); // [1, 2, 3]

// 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错 const [...butLast, last] = [1, 2, 3, 4, 5]; // 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错


- 字符串: 扩展运算符还可以将字符串转为真正的数组

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

// 上面的写法，有一个重要的好处，那就是能够正确识别四个字节的 Unicode 字符 'x\uD83D\uDE80y'.length // 4 [...'x\uD83D\uDE80y'].length // 3


- 实现了 Iterator 接口的对象: 任何定义了遍历器（Iterator）接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组

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


- Map 和 Set 结构，Generator 函数

let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]);

let arr = [...map.keys()]; // [1, 2, 3]

const go = function*(){ yield 1; yield 2; yield 3; };

[...go()] // [1, 2, 3]

Lenny-Hu / note