第一次遇到:

  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. 部署phpmyadmin登录不进去

    Centos7.5 部署phpmyadmin登录不进去 问题:明明输对了账号和密码就是登录不进去,但是用ip就能登录 解决方法:换个域名 [root@web01 code]# vim /etc/ngi ...

  2. myeclise中创建maven web程序

    myeclipse自带了许多插件,因此使用频率很高,但是对maven框架下web程序似乎不是很好的支持,每次创建web程序总是会报一大堆的异常,因此特此记录一下如何在myeclipse下创建一个web ...

  3. 《AngularJS开发下一代Web应用》读书笔记与感想

    该书一共130页打算四天读完,边读边记录. 1. 2.学习MogoDB 3. 4. 5. 创建标识符的一段简单伪码模板: var myModule = angular.module(...); myM ...

  4. C# 基于任务的异步模式的创建与使用的简单示例

    对于窗体程序,使用基于任务的异步模式需要用到Task类,下面示例下非常简单的用法. 1.创建一个拥有异步方法的类 该类拥有一个异步方法DoSomthingAsync,根据微软建议的命名规则该方法要带A ...

  5. ORM框架 之 Entity Framework

    Entity Framework 1.ADO.NET Entity Framework是以ADO.NET为基础所发展出来的对象关系对应(O/R Mapping)解决方案,早起被称为ObjectSpac ...

  6. p3302 [SDOI2013]森林(树上主席树+启发式合并)

    对着题目yy了一天加上看了一中午题解,终于搞明白了我太弱了 连边就是合并线段树,把小的集合合并到大的上,可以保证规模至少增加一半,复杂度可以是\(O(logn)\) 合并的时候暴力dfs修改倍增数组和 ...

  7. (转)Understanding, generalisation, and transfer learning in deep neural networks

    Understanding, generalisation, and transfer learning in deep neural networks FEBRUARY 27, 2017   Thi ...

  8. pgAdmin的数据导入之CSV

    在向数据库批量导入数据时,可以参考此过程 1.对于现有的Excel文件,首先应另存为 .csv文件,记住分割符(逗号分割),在后边导入用到. 2.用记事本打开保存后的csv文件,以utf-8格式另存为 ...

  9. GTK 菜单的创建详解

    1 定义 1.1 菜单由菜单条和菜单项组成,它们的定义如下所示: 菜单项(GtkMenuItem):添加到菜单条或下拉菜单中构件 顶层菜单项:添加到菜单条上的菜单项称为顶层菜单项 下拉菜单(GtkMe ...

  10. python爬虫训练——爬poj题目

    首先要解决的就是不同的题目在不同的页上,也就是要实现翻页功能,自动获取所要爬取的地址,通过分析可以得出不同的页面也就是volume=后面的数字不同 所以我们可以用re模块来替换即可: new_url ...