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 = {...obj, ...{a:3, b: 4}};  // {a: 3, b: 4}

Javascript中扩展运算符的作用及使用场景相关推荐

ES6——扩展运算符的作用以及使用场景
文章目录对象扩展运算符解构赋值扩展运算符数组扩展运算符替代函数的apply() 方法扩展运算符的应用复制数组合并数组与解构赋值结合字符串实现了Iterator接口的对象对象扩展 ...
扩展运算符的作用及使用场景
(1)对象扩展运算符对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. let bar = { a: 1, b: 2 }; let baz = { ...bar }; ...
扩展运算符的作用以及使用场景
扩展运算符对象的扩展运算符(-)用于取出参数对象中的所有可遍历属性,拷贝到当前对象中在JS中,扩展运算符(spread)是三个点-,剩余运算符(rest)同为三个点(-) 我们可以把-理解为展开运 ...
什么是在JavaScript中扩展错误的好方法？
本文翻译自:What's a good way to extend Error in JavaScript? I want to throw some things in my JS code and ...
JavaScript中delete运算符
JavaScript中delete运算符是从对象中删除一个属性,或从数组中删除一个元素. 使用方法: delete expressionwww.mlybyby.com expression 参数是一 ...
JavaScript中的运算符和语句
一.JavaScript的运算符 a.基本的算术运算符(+.-.*./.%) -.*./.%运算符会在必要的时候将操作数转换为数字,无法转换成数字的操作数将会转换成NaN,相应的运算结果也是NaN. ...
php中new运算符的作用,C++_C++编程中new运算符的使用学习教程，new运算符用作从自由存储为 typ - phpStudy...
C++编程中new运算符的使用学习教程 new运算符用作从自由存储为 type-name 的对象或对象数组分配内存,并将已适当分类的非零指针返回到对象. [::] new [placement] ne ...
javascript中的||运算符
在Java和c++中||运算符返回的结果为布尔值,而在JavaScript中,||不一定返回布尔结果,它的运算规则为:返回第一个不为false的那个值(对象亦可),或者是返回最后一个值(如果全部都是f ...
JavaScript中加号运算符+ 运算过程理解
在JavaScript中二元加法运算符"+"可以对两个数字或者字符串进行连接操作. 1+2=>3 "hello"+" "+" ...

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

1、作为函数的形参

2、结合数组使用

3、结合对象使用

Javascript中扩展运算符的作用及使用场景相关推荐

最新文章

热门文章