ES6...扩展操作符骚操作

谁践踏了优雅 2022-12-03 08:59 144阅读 0赞

https://www.jianshu.com/p/7414dc5537a5

...多用于数组对象，和对象下有多个数据

将数组打散作为一个需要单独一个个传入参数的函数的参数

![20201013115122907.png][]

复制和合并数组变得更为简洁。不需要使用 concat() 方法或 slice() 方法，一个 ... 操作符已经足够：

const arr1 = [10, 20, 30];
    
    const copy = [...arr1];
    
    console.log(copy);    // → [10, 20, 30]
    
    const arr2 = [40, 50];
    
    const merge = [...arr1, ...arr2];
    
    console.log(merge);    // → [10, 20, 30, 40, 50]

const arr = [10, 20, 30]
    
    // equivalent to
    // console.log(Math.max(10, 20, 30));
    console.log(Math.max(...arr));    // → 30

对象属性展开复制

const obj1 = {
      a: 10,
      b: 20
    };
    
    const obj2 = {
      ...obj1,
      c: 30
    };
    
    console.log(obj2);    // → {a: 10, b: 20, c: 30}

如果存在相同的值 后者覆盖前者

const obj2 = {
      ...obj1,
      a: 30
    };
    
    console.log(obj2);    // → {a: 30, b: 20}

合并对象 类似于object.assign

const obj1 = {a: 10};
    const obj2 = {b: 20};
    const obj3 = {c: 30};
    
    // ES2018
    console.log({...obj1, ...obj2, ...obj3});    // → {a: 10, b: 20, c: 30}
    
    // ES2015
    console.log(Object.assign({}, obj1, obj2, obj3));    // → {a: 10, b: 20, c: 30}

不过，扩展属性并不总能生成与 Object.assign() 相同的结果 具体自己去试验下 要点 == setter

[20201013115122907.png]: /images/20221123/a58a5720290644c99e006102754a11e9.png

发表评论取消回复

表情：

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

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

相关阅读

相关 es6扩展

1.我们使用promise可以解决什么问题？我们可以使用promise来解决回调地狱的问题回调地狱的问题： `$.ajax({ url:"/data1", suc

淩亂°似流年/ 2023年07月17日 06:47/ 0 赞/ 26 阅读

相关 ES6...扩展操作符骚操作

https://www.jianshu.com/p/7414dc5537a5 ...多用于数组对象，和对象下有多个数据将数组打散作为一个需要单独一个个传入参数的函数的参数

谁践踏了优雅/ 2022年12月03日 08:59/ 0 赞/ 145 阅读

相关 ES6扩展运算符...

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

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

相关 ES6 数值扩展

不同进制的字面量表示 `Binary`二进制前缀: `0b` `0B` `Octal`八进制前缀: `0` `0o` `0O` `Decimal`十进制无前

Love The Way You Lie/ 2022年04月23日 23:08/ 0 赞/ 296 阅读

相关 ES6的扩展操作符

ES6中的扩展操作符实际上与`rest`参数非常相似。前者是`...`，后者则是`...+变量名`。那它们主要的区别我个人认为主要是两个： 1. `rest`参数使用在

朴灿烈づ我的快乐病毒、/ 2022年04月23日 09:34/ 0 赞/ 154 阅读

相关 ES6扩展运算符

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

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

相关 ES6 数组扩展

扩展运算符|展开运算符 `...`不仅可以操作对象，也可以操作数组。 var arr1 = [1, "asd", {name:"张三"}]; var a

亦凉/ 2022年02月21日 01:21/ 0 赞/ 346 阅读

相关 ES6扩展运算符

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

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

相关 ES6扩展运算符...

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

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

相关 ES6基础-ES6的扩展

进行对字符串扩展，正则扩展，数值扩展，函数扩展，对象扩展，数组扩展。开发环境准备：编辑器（VS Code, Atom，Sublime）或者IDE（Webstorm）

朴灿烈づ我的快乐病毒、/ 2021年08月20日 00:28/ 0 赞/ 581 阅读