【ES6复习】扩展运算和剩余操作符
栏目: JavaScript · 发布时间: 6年前
内容简介:ES6语法糖,使用扩展运算也叫做展开操作,它能够把一个数组或者对象里面的值展开。同样是使用
ES6语法糖,使用 ...
操作符对数组或对象进行展开或者收集,他可以使你的代码更加简洁优雅。
扩展运算符的使用
扩展运算也叫做展开操作,它能够把一个数组或者对象里面的值展开。
-
数组或对象的复制,类似Object.assign都是浅拷贝
// 数组 let arr = [1, 2, 3], // 展开操作 newArr = [...arr]; arr !== newArr; // 对象 let obj = {foo: 1}, newObj = {...obj}; obj !== newObj;
-
数组或对象的合并
let a1 = [1,2,3], a2 = [4,5,6]; let a = [...a1, ...a2];
-
类数组转换成数组
function fn() { // 把arguments对象转换成一个数组, 也可以用后面的剩余操作符直接产生一个数组 let arr = [...arguments]; console.log(arr) } fn(1,2,3)
-
更好的apply解决方案
function add(a, b, c) { console.log(a + b + c) } const arr = [1, 2, 3] // 使用 apply fn.apply(null, arr) // 使用 扩展运算 fn(...arr)
剩余操作符的使用
同样是使用 ...
,和扩展运算符不同的是,它能够把多个值进行收集,并保存到一个变量。
-
对多余参数进行接收
let [a1, ...last] = [1, 2, 3]; // a1 = 1 // last = [2, 3] let {a, ...last} = { a: 1, b: 2, c: 3 }; // a = 1 // last = {b:2, c:3} // 在函数中使用 替代argument的使用 function fn(..arr) { console.log(arr) } fn(1,2,3)
-
结合解构复制,可以更好的使用变量复制,以及参数的默认值操作
// z 会接收函数第一个参数初x、y属性以外的属性作为一个对象 // others 会接收foo函数以外的其他参数左右一个数组 function foo({x, y = 5, ...z} = {}, ...others) { console.log(x, y, z, others); } foo({x: 0}); // x=0 y=5 z={} others=[] foo({x: 0, y: 1, m: 2, n: 3}); // x=0 y=1 z={m:2,n:3} others=[] foo({x: 0, y: 1, m: 2, n: 3}, 7, 8); // x=0 y=1 z={m:2,n:3} others=[7, 8]
-
注意事项
:warning:进行剩余操作之后不能在继续解构赋值,如下:
let arr = [1, 2, 3, 4]; // 正确 let [a, ...b] = arr; // 错误 Rest element must be last element let [a, ...b, c] = arr; // 错误(在函数中使用) Rest element must be last element ((a, ...b, c)=>{ // ... })(...arr)
以上所述就是小编给大家介绍的《【ES6复习】扩展运算和剩余操作符》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Android RxJava 操作符详解系列:条件 / 布尔操作符
- C语言中点操作符(.)和箭头操作符(->)的不同之处
- JavaScript骚操作之操作符
- JS操作符拾遗
- 浅谈JavaScript位操作符
- rxjs switchMap操作符
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精通CSS与HTML设计模式
Michael Bowers / 刘申 朱瑜敏 鲁奇 / 人民邮电出版社 / 2008-9 / 69.00元
本书是一部非常实用的CSS 与HTML(XHTML)解决方案手册。书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可大大提高读者在 Web 设计和开发中的效率和创造力。 本书结构清晰,示例丰富,实践性强,适用于所有Web 开发和设计人员......一起来看看 《精通CSS与HTML设计模式》 这本书的介绍吧!
URL 编码/解码
URL 编码/解码
Markdown 在线编辑器
Markdown 在线编辑器