扩展运算符(…)是ES6新增的一个运算符,下面来介绍一下它的使用场景及作用
1、作为函数的形参
在作为函数的形参时,通过 …数组名 来表示,也称为rest参数,当函数被调用时传入的实参全部会被放入到这个数组中。
let fn = function(...list){
console.log(list)
}
fn(1,2,3) //[1,2,3]
2、结合数组使用
当扩展运算符结合数组使用时,可以将一个数组转为用逗号分隔的参数序列,且每次只能展开一层数组。
(1)用于复制数组:
const arr1 = [1, 2];
const arr2 = [...arr1]; //arr2 = [1,2]
(2)用于合并数组:
const arr1 = [2, 3];
const arr2 = [1, ...arr1, 4, 5]; //arr2 = [1,2,3,4,5]
(3)作为函数的实参:
将数组的元素展开以逗号分隔传入函数
function add(x, y) {
return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3
(4)扩展运算符与解构赋值结合起来,用于生成数组:
const [a, ...list] = [1, 2, 3, 4, 5]; // a = 1 // list = [2, 3, 4, 5]
这种情况需要注意的是:扩展运算符只能放在参数的最后一位,不然会报错
const [...list, a] = [1, 2, 3, 4, 5]; //报错
(5)将字符串或则特殊的对象转换成数组(带有Iterator 接口的对象,如类数组对象):
//将字符串转换成数组
let stringList = [...'hello'] //stringList = [ "h", "e", "l", "l", "o" ]
//将带有Iterator接口的对象转换成数组
// 这里用arguments对象举例
function fn() {
let list = [...arguments];
console.log(list)
}
fn(1,2,3) //[1,2,3]
3、结合对象使用
当扩展运算符结合对象使用时,用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中。
扫描二维码关注公众号,回复:
14619685 查看本文章
let obj = {
a: 1, b: 2 };
let newObj = {
...obj }; // { a: 1, b: 2 }
需要注意的是:
- 扩展运算符对对象实例的拷贝属于浅拷贝
- 如果拷贝过程中有同名属性会进行覆盖:
let obj = {
a: 1, b: 2};
let newObj = {
...obj, ...{
a:3, b: 4}}; // {a: 3, b: 4}