ES6扩展运算符三个点(...)

深藏阁楼爱情的钟 2023-06-25 03:14 12阅读 0赞

在react或者vue项目中，你或许已经注意到有的地方已经开始使用ES6扩展运算符...，这个运算符很简洁，如果不熟悉，可能会觉着难以理解，这里稍微介绍一下扩展运算符的用法。

ES6扩展运算符简化了数组或者对象赋值问题，以对象类型为例，我们最早做对象拷贝的时候，需要将一个对象的所有属性一一赋值给新的对象，如果新的对象还有别的属性，需要接着设置：

var obj = {id:1,name:'buejee'}
    var obj2 = {};
    for( var key in obj){
      obj2[key] = obj[key]
    }
    obj2.age = 18;
    console.log(obj)
    console.log(obj2)

运行这个js，我们得到结果如下：

\{ id: 1, name: 'buejee' \}  
    \{ id: 1, name: 'buejee', age: 18 \}

当我们有了ES6扩展运算符，赋值问题就变得很简单了，只需要一步就能赋值成功。

const obj = {id:1,name:'buejee'}
    const obj2 = {...obj,age:18}
    console.log(obj)
    console.log(obj2)

运行这段代码，同样能够得到上面的结果。

从这个示例中，我们可以看出扩展运算符...将对象obj=\{id:1,name:'buejee'\}做了拆分，好像拆分为了一个个属性集合，而且没有使用\{嵌套\}，这里如果单独使用obj，得到的结果是这样的：

![20191225113351585.png][]

从截图中可以看出，直接使用obj，而不是...obj，最终的obj2嵌套了obj对象。

同样的，扩展运算符使用在数组赋值中，也是类似的功能。将数组各个元素单独提取出来，拼接到新的数组中。

arr = [1,2,3]
    arr2 = [...arr,4,5,6]
    console.log(arr)
    console.log(arr2)

运行这段代码，结果如下：

\[ 1, 2, 3 \]  
    \[ 1, 2, 3, 4, 5, 6 \]

以上是使用扩展运算符来做右值赋值，其实他也可以作左值赋值，左值的话，类似做减法，把对象或者数组中剩余的部分赋值给新的变量。我们来看看如下的例子：

const obj = {id:1,name:'buejee',age:18}
    let {id,...info} = obj
    console.log(id)
    console.log("info =",info)
    let [a,b,...c]=[1,2,3,4,5]
    console.log(a)
    console.log(b)
    console.log(c)

运行这段代码结果如下：

1  
    info = \{ name: 'buejee', age: 18 \}  
    1  
    2  
    \[ 3, 4, 5 \]

通过以上几个简单的例子，我们基本能够搞清楚扩展运算符的用法，使用起来确实很方便。就是有些难以理解。我们在实际应用中需要注意的是，不要把对象和数组搞混淆了。

[20191225113351585.png]: https://img-blog.csdnimg.cn/20191225113351585.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6扩展运算符三个点(...)

在react或者vue项目中，你或许已经注意到有的地方已经开始使用ES6扩展运算符...，这个运算符很简洁，如果不熟悉，可能会觉着难以理解，这里稍微介绍一下扩展运算符的

深藏阁楼爱情的钟/ 2023年06月25日 03:14/ 0 赞/ 13 阅读

相关 ES6增加了扩展运算符: ... 三个点是ES几的

ES6 的扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 1、将一个数组转为用逗号分隔的参数序列（把数

秒速五厘米/ 2023年06月15日 11:03/ 0 赞/ 9 阅读

相关 ES6：展开运算符 (三个点 ... )

展开运算符,将一个数组转为用逗号分隔的参数序列合并数组 let a = [1,2,3]; let b = [4,5,6]; let c = [..

清疚/ 2023年06月08日 04:54/ 0 赞/ 18 阅读

相关 ES6 扩展运算符三点（...）

扩展运算符（ spread ）是三个点（...） `对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中` let bar = { a

谁践踏了优雅/ 2023年02月19日 11:24/ 0 赞/ 23 阅读

相关 ES6 ...三点扩展运算符常见用法（实例）

文章目录一、对象的扩展运算符 1.取出参数对象中的所有可遍历属性，拷贝到当前对象之中二、数组的扩展运算符 1.将数组转

今天药忘吃喽~/ 2022年12月23日 14:29/ 0 赞/ 145 阅读

相关 es6之扩展运算符三个点（...）

[https://blog.csdn.net/qq\_30100043/article/details/53391308?utm\_medium=distribute.pc\_

喜欢ヅ旅行/ 2022年12月17日 01:28/ 0 赞/ 170 阅读

相关 es6 扩展运算符三个点（...）

原文地址[https://blog.csdn.net/qq\_30100043/article/details/53391308][https_blog.csdn.net_qq

短命女/ 2022年04月12日 05:09/ 0 赞/ 232 阅读

相关 es6之扩展运算符三个点（...）

[https://blog.csdn.net/astonishqft/article/details/82899965][https_blog.csdn.net_astonis

港控/mmm°/ 2021年09月19日 21:02/ 0 赞/ 484 阅读

相关 ES6 扩展运算符三点（...）的用法

转载自：[https://www.cnblogs.com/minigrasshopper/p/9156027.html][https_www.cnblogs.com_minig

骑猪看日落/ 2021年09月19日 15:16/ 0 赞/ 387 阅读

相关 es6 三点运算符

ES6 三点运算符 1、替代arguments 2、arguments.callee();返回数组本身 3、将传入的参数，存进数组里

￡神魔★判官ぃ/ 2021年07月24日 14:08/ 0 赞/ 412 阅读