【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复习】扩展运算和剩余操作符》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精通CSS与HTML设计模式

精通CSS与HTML设计模式

Michael Bowers / 刘申 朱瑜敏 鲁奇 / 人民邮电出版社 / 2008-9 / 69.00元

本书是一部非常实用的CSS 与HTML(XHTML)解决方案手册。书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可大大提高读者在 Web 设计和开发中的效率和创造力。 本书结构清晰,示例丰富,实践性强,适用于所有Web 开发和设计人员......一起来看看 《精通CSS与HTML设计模式》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器