ES7: 展开语法spread syntax:
第一次遇到:
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 ...
- Vben Admin 源码学习:状态管理-错误日志
0x00 前言 本文将对 Vue-Vben-Admin 的状态管理实现源码进行分析解读,耐心读完,相信您一定会有所收获! 0x01 errorLog.ts 错误日志 文件 src\store\modu ...
随机推荐
- Linux使用——Linux命令——Linux文件压缩和解压使用记录
一:tar(可压缩可解压) tar命令是Unix/Linux系统中备份文件的可靠方法,几乎可以工作于任何环境中,它的使用权限是所有用户.但是tar本身只是一个文件打包工具,只有和其他工具组合时才具有压 ...
- 集合02_Queue
Queue集合 模拟队列先进先出(FIFO),不允许随机访问元素 Queue接口定义的方法: //void add(Object e) boolean offer(Object e),加入队列尾部,比 ...
- [CodeForces 892A] Greed (Java中sort实现从大到小排序)
题目链接:http://codeforces.com/problemset/problem/892/A 具体的Java 中 sort实现降序排序:https://www.cnblogs.com/you ...
- JavaScript——语法与数据类型
严格模式 ECMA5引入了严格模式的概念.严格模式是为JavaScript定义了一种不同的解析与执行模型.在严格模式下,ECMA3中的一些不确定的行为将得到处理,而且对某些不安全的操作也会抛出错误.要 ...
- linux运行lnmp 出现502错误
之前遇到的问题: 安装好之后访问域名出现502错误,打开html文件正常,说明是php出现问题.在wwwlog文件夹查看nginx日志,发现报错原因是找不到/var/run/php5-fpm.sock ...
- P1547 Out of Hay
传送门 练习 只是一个最小生成树的水题,拿来练练模板 AC代码: #include<iostream> #include<cstdio> #include<alg ...
- Centos7安装配置Apache+PHP+Mysql+phpmyadmin
转载自: Centos7安装配置Apache+PHP+Mysql+phpmyadmin 一.安装Apache yum install httpd 安装成功后,Apache操作命令: systemctl ...
- Git 中 pull 和 clone 的区别
git pull git clone clone 是本地没有 repository 时,将远程 repository 整个下载过来. pull 是本地有 repository 时,将远程 reposi ...
- Python:ModuleNotFoundError: No module named 'windows'
pymouse安装后,又出现了ModuleNotFoundError: No module named 'windows'的错误 解决: 下载安装pyhook:http://www.lfd.uci.e ...
- mysql 和 sqlserver中备份一张表的区别
sqlserver中备份一张表 SELECT * into qa_buglist_bak FROM qa_buglist 不管表的数据有多大,速度很快: mysql中上述语句就无效了,须得新建一张表, ...