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

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

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

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

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

20201013115122907.png

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

  1. const arr1 = [10, 20, 30];
  3. const copy = [...arr1];
  5. console.log(copy);    // → [10, 20, 30]
  7. const arr2 = [40, 50];
  9. const merge = [...arr1, ...arr2];
  11. console.log(merge);    // → [10, 20, 30, 40, 50]
  15. const arr = [10, 20, 30]
  17. // equivalent to
  18. // console.log(Math.max(10, 20, 30));
  19. console.log(Math.max(...arr));    // → 30

对象属性展开复制

  1. const obj1 = {
  2.   a: 10,
  3.   b: 20
  4. };
  6. const obj2 = {
  7.   ...obj1,
  8.   c: 30
  9. };
  11. console.log(obj2);    // → {a: 10, b: 20, c: 30}

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

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

合并对象 类似于object.assign

  1. const obj1 = {a: 10};
  2. const obj2 = {b: 20};
  3. const obj3 = {c: 30};
  5. // ES2018
  6. console.log({...obj1, ...obj2, ...obj3});    // → {a: 10, b: 20, c: 30}
  8. // ES2015
  9. console.log(Object.assign({}, obj1, obj2, obj3));    // → {a: 10, b: 20, c: 30}

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

发表评论

表情：
评论列表 （有 0 条评论，200人围观）

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

相关阅读

    相关 es6扩展

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

    淩亂°似流年淩亂°似流年/ 0 赞/ 104 阅读

    相关 ES6扩展运算符...

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

    比眉伴天荒比眉伴天荒/ 0 赞/ 332 阅读

    相关 ES6 数组扩展

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

    亦凉亦凉/ 0 赞/ 423 阅读

    相关 ES6扩展运算符

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

    男娘i男娘i/ 0 赞/ 436 阅读