第一次遇到:
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:的更多相关文章
-
Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)
0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...
-
Spread Syntax
[Spread Syntax] The spread syntax allows an expression to be expanded in places where multiple argum ...
-
什么是流利语法Fluent Syntax
出处:http://blog.csdn.net/u010019717 author:孙广东 时间:2015.3.18 23:00 编程新概念:什么是流利语法fluent synta ...
-
JavaScript展开操作符(Spread operator)介绍
本文介绍JavaScript的展开操作符(Spread operator)....本文适合ES6初学者. 你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串.展开运算 ...
-
shell脚本启动语法错误syntax error near unexpected token '{
执行shell脚本时失败,报语法错误,但脚本内容检查正常 原因为该脚本是在非Linux系统下编辑之后放到系统执行的,文件模式类型非Linux系统匹配的模式类型. 查看文件的模式类型 显示文件的模式类型 ...
-
ES7/ES8 语法学习
作为一个前端开发者,感觉需要学习的东西贼多,ES6刚学会用没多久,又得学习了解ES7/ES8新增的东西,这里是看了大佬们文章的一点点总结以及摘抄的内容,给自己当笔记使用 内容转载自:https://w ...
-
[ES6系列-06]展开操作符 Spread Operator 就像解压到这里
[原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 在前面的文章中,介绍了...在获取剩余参数中的作用. ...
-
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 ...
-
浅析JavaScript解析赋值、浅拷贝和深拷贝的区别
文章首发于sau交流学习社区 一.赋值(Copy) 赋值是将某一数值或对象赋给某个变量的过程,分为: 1.基本数据类型:赋值,赋值之后两个变量互不影响 2.引用数据类型:赋**址**,两个变量具有相同 ...
随机推荐
-
编译安装zabbix3.2
1.1 环境准备 系统环境准备:redhat 6.6 64位mysql-5.6.34php-5.6.28zabbix-3.2.1配置前先关闭iptables和SELINUX,避免安装过程中报错. # ...
-
How to only capute sub-matched character by grep
File content: <a href="ceph-0.80.9-82.1.x86_64.rpm"><img src="/icons/rpm.gif ...
-
oracle新建用户
说明:以下命令在PLSQL中运行 一.以管理员身份登录PLSQL scott/root as sysdba 二.创建新用户 create user extjsTest1 identified by r ...
-
eclipse中建立tomcat容器
步骤 1. new - orther - server 出现下图,选择tomcat版本, 2. 选择已有的web项目至tomcat容器中,如果尚未建立,可不选. 3. 点击完成后,就会发现一个新建项 ...
-
c语言函数定义、函数声明、函数调用以及extern跨文件的变量引用
1.如果没有定义,只有声明和调用:编译时会报连接错误.undefined reference to `func_in_a'2.如果没有声明,只有定义和调用:编译时一般会报警告,极少数情况下不会报警告. ...
-
Android-67-Tomcat启动出错:Server Tomcat v7.0 Server at localhost failed to start.
错误:Server Tomcat v7.0 Server at localhost failed to start.如图: 唉! ! !!图片上传不上去,悲哀啊!..仅仅能先写着错误提示语吧~~ ...
-
Qt+SQLite数据加密的一种思路(内存数据库)
了解Qt是比较早的,可是一直没有耐心去做一个练习.近期花了差不多两周时间做了次Qt开发练习,基本完成了Qt的入门,逃脱微软平台又迈出了几小步.Qt虽然是C++的,但开发应用是比较方便的,我觉得它在界面 ...
-
PHP关联数组和哈希表(hash table) 未指定
PHP有数据的一个非常重要的一类,就是关联数组.又称为哈希表(hash table),是一种很好用的数据结构. 在程序中.我们可能会遇到须要消重的问题,举一个最简单的模型: 有一份username列表 ...
-
Ubuntu与Centos在登陆安全方面的比较
Ubuntu在安装时创建的普通用户默认具有sudo权限,默认root没有设置密码,可以通过自建用户来执行sudo passwd 为root设置密码;Centos在安装时创建的普通用户默认没有sudo权 ...
-
【转】linux scp远程拷贝文件及文件夹
转自:http://www.jb51.net/LINUXjishu/73131.html 1.拷贝本机/home/administrator/test整个目录至远程主机192.168.1.100的/r ...