哭竹生笋网

Javascript中扩展运算符的作用及使用场景

Javascript中扩展运算符的作用及使用场景

扩展运算符(…)是中扩展运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、结合对象使用

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

let obj = {  a: 1, b: 2 };let newObj = {  ...obj }; // {  a: 1, b: 2 }

需要注意的是:

  • 扩展运算符对对象实例的拷贝属于浅拷贝
  • 如果拷贝过程中有同名属性会进行覆盖:
let obj = { a: 1, b: 2};let newObj = { a:3, b: 4}};  // { a: 3, b: 4}

未经允许不得转载:哭竹生笋网 » Javascript中扩展运算符的作用及使用场景