【JavaScript】扩展运算符 ...

作用于数组

展开数组、类数组对象

let arr = [1, 2, 3];
console.log(...arr); // 1 2 3

let arrLike = document.querySelectorAll('div');
console.log(...arrLike); // <div></div> <div></div> <div></div>

• 进而可以将 [类数组] 转成 [数组]

'hello'.split(''); // [ "h", "e", "l", "l", "o" ]    ES5写法
[...'hello'] // [ "h", "e", "l", "l", "o" ]    ES6写法

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

扩展运算符后面可以跟表达式

let arr = [...(false ? ["a"] : ["b"]), "c"];
console.log(arr); // ['b', 'c']

• 如果扩展运算符后面跟空数组 []，相当于没写

console.log([...[], 1]); // [1]

拷贝数组（浅拷贝）

let a2 = [...a1]; // 写法1
let [...a2] = a1; // 写法2

合并数组

let arr1 = ['a', 'b'];
let arr2 = ['c'];
let newArr = [...arr1, ...arr2];
console.log(newArr); // ["a", "b", "c"]

获取指定元素

• [扩展运算符] 配合 [解构赋值] 使用：根据 [位置] 获取指定的元素，剩下的元素组成一个新数组

let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]

• 特殊情况：[空数组] & [只有 1 个元素的数组]

let [first, ...rest] = [];
console.log(first); // undefined
console.log(rest); // [] - 仍能是数组

let [first, ...rest] = [1];
console.log(first); // 1 - 优先获取到元素
console.log(rest); // []

作用于对象

拷贝对象（浅拷贝）

let obj2 = { ...obj1 }; // 写法1.1 - 通过 [解构赋值] & [扩展运算符] 拷贝
let { ...obj2 } = obj1; // 写法1.2 - 通过 [解构赋值] & [扩展运算符] 拷贝
let obj2 = Object.assign({}, obj); // 写法3 - 通过 [合并空对象] 拷贝

合并对象

let obj1 = { name: "superman" };
let obj2 = { name: "superwoman", age: 21 }; // 同名属性
let newObj = { ...obj1, ...obj2 };
console.log(newObj); // {name: 'superwoman', age: 21}

• 对于同名属性，后面的属性值会覆盖前面的属性值

获取指定属性值

• [扩展运算符] 配合 [解构赋值] 使用：根据 [属性名] 获取指定的属性值，剩下的键值对组成一个新对象

let { y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(y, z); // 2 {x: 1, a: 3, b: 4}

• 特殊情况：[空对象] & [只有 1 个属性的对象]

let { x, ...y } = {};
console.log(x); // undefined
console.log(y); // {} - 仍能是对象

let { x, ...y } = { name: "superman" };
console.log(x); // undefined
console.log(y); // {name: 'superman'} - 优先组成对象

• 对于基本类型数据：

如果该基本类型数据有包装类的，会自动转成对象：

let { x, ...y } = 2;
console.log(x, y); // undefined {}

如果该基本类型数据是 undefined / null，会报错，因为它们无包装类，无法转为对象

let { x, ...y } = null; // TypeError
let { x, ...y } = undefined; // TypeError

应用于函数

函数的 length

可以通过函数的 length 获取函数的参数个数

console.log(function (a, b, c) {}.length); // 3

• 函数的 length 属性不包括 reset 参数

console.log(function (a, b, ...c) {}).length; // 2

拆分数组参数

1. 使用解构赋值

function show([a, b, c]) { // 使用 [解构赋值]
    console.log(a, b, c); //  1 9 6
}
show([1, 9, 6]);

2. 使用 reset 参数（扩展运算符）

function show(a, b, c) {
    console.log(a, b, c); // 1 9 6
}
show(...[1, 9, 6]); // 使用 [扩展运算法]

组成数组参数

function show(a) {
    console.log(a); // 1
}
show(1, 2, 3, 4, 5);

• 使用 reset 参数（扩展运算符）

function show(...a) { // 使用 [扩展运算符]
    console.log(a); // [1, 2, 3, 4, 5]
}
show(1, 2, 3, 4, 5);