作用于数组
展开数组、类数组对象
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
拆分数组参数
- 使用解构赋值
function show([a, b, c]) { // 使用 [解构赋值]
console.log(a, b, c); // 1 9 6
}
show([1, 9, 6]);
- 使用 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);