第一次遇到:

  payload = {...payload, manufacturer: state.manufacturers.filter(x => x._id === payload.manufacturer)[0]}

解释,类似Object.assign(target, [source...]), 把payload对象和manufacturer key/value组合起来,成为一个新对象。⚠️只是浅层拷贝(1层)


参看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

展开语法(Spread syntax)

可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

语法:

myFunction(...iterableObj);

[...iterableObj, '4', ...'hello', 6];

let objClone = { ...obj };

在函数调用时使用展开语法

一般使用: func.apply(thisArg, [argsArray])函数。

//声明一个函数
function myFunction(x, y, z) {}
//声明并赋值一个变量args
var args = [0, 1, 2]; myFunction.apply(null. args);

有了spread syntax,则可以简单写:

myFunction(...args);

构造字面量数组时使用展开语法

apply的作用就是为原来的数组a附加一个新的数组b,并且这个新的数组b中的每个元素是作为单独的元素添加到a中的:

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // 原来的array的值变为: ["a", "b", 0, 1, 2]

Array.concat函数是产生一个新的数组。和使用spread syntax进行数组连接的作用一样。

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中的元素插入到 arr1 的开头
Array.prototype.unshift.apply(arr1, arr2) //等同于
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 现在为 [3, 4, 5, 0, 1, 2]

构造字面量对象时使用展开语法

var obj1 = { foo: 'bar', x: 42 };

var b = {...obj1} // { foo: 'bar', x: 42 }, ⚠️b和obj1各自指向不同的内存空间。

var c = obj1  // c和obj1是指向相同的内存空间。

效果类似Object.assign()。(但有区别,具体见

ES7: 展开语法spread syntax:的更多相关文章

  1. Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)

    0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...

  2. Spread Syntax

    [Spread Syntax] The spread syntax allows an expression to be expanded in places where multiple argum ...

  3. 什么是流利语法Fluent Syntax

     出处:http://blog.csdn.net/u010019717 author:孙广东      时间:2015.3.18   23:00 编程新概念:什么是流利语法fluent synta ...

  4. JavaScript展开操作符(Spread operator)介绍

    本文介绍JavaScript的展开操作符(Spread operator)....本文适合ES6初学者. 你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串.展开运算 ...

  5. shell脚本启动语法错误syntax error near unexpected token '{

    执行shell脚本时失败,报语法错误,但脚本内容检查正常 原因为该脚本是在非Linux系统下编辑之后放到系统执行的,文件模式类型非Linux系统匹配的模式类型. 查看文件的模式类型 显示文件的模式类型 ...

  6. ES7/ES8 语法学习

    作为一个前端开发者,感觉需要学习的东西贼多,ES6刚学会用没多久,又得学习了解ES7/ES8新增的东西,这里是看了大佬们文章的一点点总结以及摘抄的内容,给自己当笔记使用 内容转载自:https://w ...

  7. [ES6系列-06]展开操作符 Spread Operator 就像解压到这里

    [原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 在前面的文章中,介绍了...在获取剩余参数中的作用. ...

  8. ecma 2018, javascript spread syntax behaves like Object.assign

    as the subject. It is only supported in Chrome version 60+, so, first check the version, or just use ...

  9. Vben Admin 源码学习:状态管理-错误日志

    0x00 前言 本文将对 Vue-Vben-Admin 的状态管理实现源码进行分析解读,耐心读完,相信您一定会有所收获! 0x01 errorLog.ts 错误日志 文件 src\store\modu ...

随机推荐

  1. topcoder srm 693 div1 -3

    1.给出一个$n$个顶点的无向带权图.其中顶点$i,i+1$之间存在边,$i,i+2$之间存在边.而且仅有这些边.现在删掉其中的一些边,剩下的边满足图仍然是2联通的情况下使得权值和最小? 思路:其实就 ...

  2. 关于二进制——lowbit运算

    lowbit(n)意思即为找出n在二进制表示下最后一位1即其后面的0所组成的数值,别的东西算法书上有,这里提出一个重要的公式 lowbit(n)=n&(~n+1)=n&(-n),这个有 ...

  3. map的迭代器

    Iterator<Entry<String,String>> iter=map.entrySet().iterator(); map的迭代器,用作遍历map中的每一个键值对 I ...

  4. POJ 1873 The Fortified Forest(凸包)题解

    题意:二维平面有一堆点,每个点有价值v和删掉这个点能得到的长度l,问你删掉最少的价值能把剩余点围起来,价值一样求删掉的点最少 思路:n<=15,那么直接遍历2^15,判断每种情况.这里要优化一下 ...

  5. 【sql server】索引详解

    索引可以理解为一种特殊的目录结构. sql server提供两种索引形式: 聚集索引和非聚集索引. 怎么理解这两种形式. 拿我们常用的字典举例来说, 一个字典好比数据库中的一个表.那么当我们想从字典中 ...

  6. string截取、替换、查找子串函数,find_first_of 用法

    1. 截取子串 s.substr(pos, n) 截取s中从pos开始(包括0)的n个字符的子串,并返回 s.substr(pos) 截取s中从从pos开始(包括0)到末尾的所有字符的子串,并返回 2 ...

  7. 用tsMuxeR GUI给ts视频添加音轨

    收藏比赛的都应该知道,高清的直播流录制了后一般是ts或者mkv封装,前者用tsMuxeR GUI可以对视频音频轨进行操作,后者用mkvtoolnix,两者都是无损操作. 至于其他格式就不考虑了,随便用 ...

  8. hdu 4349 Xiao Ming's Hope 规律

    Xiao Ming's Hope Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. java.lang.TypeNotPresentException: Type javax.xml.bind.JAXBContext not present错误

    今天在搭建spring cloud的时候,发现一直报“java.lang.TypeNotPresentException: Type javax.xml.bind.JAXBContext not pr ...

  10. ZZNUOJ 2022 摩斯密码

    map打表存一下对应的密码   不会map感觉不好弄这题 #include<stdio.h> #include<string.h> #include<math.h> ...