详谈js中扩展运算符的作用及使用场景

最新推荐文章于 2024-09-07 14:37:16 发布

四年未秃头的码农

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量378

点赞数 9

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Mxt623/article/details/136254737

版权

本文介绍了ES6中的扩展运算符(（...）)，包括作为函数形参的使用、数组复制与合并、函数实参传递、生成数组以及结合对象时的浅拷贝特性。特别指出扩展运算符的适用位置和注意事项。

摘要由CSDN通过智能技术生成

扩展运算符（…）是ES6新增的一个运算符，下面来介绍一下它的使用场景及作用

作为函数的形参

let fn = function(...list){
	console.log(list)
}

fn(1,2,3) //[1,2,3]

用于复制数组

const arr1 = [1, 2];
const arr2 = [...arr1]; //arr2 = [1,2]

用于合并数组

const arr1 = [2, 3];
const arr2 = [1, ...arr1, 4, 5]; //arr2 = [1,2,3,4,5]

作为函数的实参

function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3

用于生成数组
```
const [a, ...list] = [1, 2, 3, 4, 5]; 
// a = 1 
// list = [2,3,4,5]
```
扩展运算符只能放在参数的最后一位，不然会报错

将字符串或则特殊的对象转换成数组

//将字符串转换成数组
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]

结合对象使用

//当扩展运算符结合对象使用时，用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

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}