ES6扩展运算符

一时失言乱红尘 2022-04-05 08:12 286阅读 0赞

ES6扩展运算符实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用  
eg1:

console.log(...[3, 4, 5])    // 结果  3 4 5

合并数组，可以使用扩展运算符将多个数组进行合并。

let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = [7, 8, 9]
    console.log([...arr1, ...arr2, ...arr3])
    结果： [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

与解构配合赋值，配合使用，可以从数组中提取除第一个以后的所有元素成另外一个数组。

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
    console.log(var1)
    console.log(arr5)
    结果： 
    1
    [ 2, 3, 4, 5, 6 ]

但要注意，与解构配合时，扩展运算符只能用在最后一个上，否则报错。

可以展开实现了Iterator 接口的对象  
比如Map，Set，数组就是从Iterator接口实现来的，Object不是，所以扩展Object会报错。

扩展Set。
    let set1 = new Set()
    set1.add(1)
    set1.add(2)
    set1.add(3)
    console.log(...set1)
    结果： 1 2 3
    
    扩展Map。
    let map1 = new Map();
    map1.set('k1', 1);
    map1.set('k2', 2);
    map1.set('k3', 3);
    console.log(...map1)
    结果： [ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]
    注意，扩展出来的一个个的数组，按照map的键值对结构，每个数组都是2个元素，一个是key，一个是value。
    
    如果扩展Object，就会报错。
    let obj1 = {
      p1: 1,
      p2: 2,
      p3: 3
    }
    console.log(...obj1) 
    结果： 报错。

发表评论取消回复

表情：

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

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

相关阅读

相关【ES6.0】- 扩展运算符（...）

【ES6.0】- 扩展运算符`...` 文章目录【ES6.0】- 扩展运算符\`...\` 一、概述二、拷贝数组对象

忘是亡心i/ 2024年02月18日 11:52/ 0 赞/ 47 阅读

相关 ES6扩展运算符

[ES6扩展运算符][ES6] ●扩展运算符也是ES6 的新语法，主要有两个功能 ●展开和合并 ●该语法主要操作的是数组和对象 ●语法：... 展开 ●

分手后的思念是犯贱/ 2023年09月27日 20:44/ 0 赞/ 16 阅读

相关 ES6扩展运算符

很久之前看的这一块，有段时间没怎么用前几天用的时候都有点模糊了总结一下 -------------------- 一般应用场景 var fun = fu

叁歲伎倆/ 2022年12月05日 12:18/ 0 赞/ 206 阅读

相关 ES6扩展运算符...

扩展运算符定义扩展运算符（ spread ）是三个点（…），它好比 rest 参数的逆运算，可以将一个数组转为用逗号分隔的参数序列。说白了，就是把数组脱掉衣服，打开它。

比眉伴天荒/ 2022年09月03日 00:21/ 0 赞/ 262 阅读

相关 ES6扩展运算符

ES6扩展运算符实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用 eg1: console.log(...[3, 4, 5])

一时失言乱红尘/ 2022年04月05日 08:12/ 0 赞/ 287 阅读

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

对象的扩展运算符理解对象的扩展运算符其实很简单，只要记住一句话就可以： > 对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中 le

我就是我/ 2022年03月21日 15:07/ 0 赞/ 300 阅读

相关 ES6扩展运算符

在做React Native项目时遇见了扩展运算符，于是将ES新特性中相关的部分学习了一下，在这里作出总结。目前所遇见的扩展运算符有两种： 1: 数组的扩展运算符

男娘i/ 2022年01月27日 13:07/ 0 赞/ 363 阅读

相关 Es6 - 扩展运算符和rest运算符

扩展运算符和rest运算符它们可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。对象扩展运算符（。。。） functi

我就是我/ 2022年01月12日 01:51/ 0 赞/ 328 阅读

相关 2. es6扩展运算符

1. es扩展运算符扩展运算符将一个数组转为用逗号分隔的参数序列； <script> console.log(...[1, 2, 3]) //1

水深无声/ 2021年11月04日 10:54/ 0 赞/ 398 阅读

相关 ES6扩展运算符...

扩展运算符... 一、什么是扩展运算符二、写法三、案例 1.合并数组 2.将伪数组转换成真数组一、什么是扩展运算符

迈不过友情╰/ 2021年09月07日 06:10/ 0 赞/ 475 阅读