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

查看所有标签

猜你喜欢:

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

汇编语言(第2版)

汇编语言(第2版)

王爽 / 清华大学出版社 / 2008-4 / 33.00元

《汇编语言(第2版)》是各种CPU提供的机器指令的助记符的集合,人们可以用汇编语言直接控制硬件系统进行工作。汇编语言是很多相关课程(如数据结构、操作系统、微机原理等)的重要基础。为了更好地引导、帮助读者学习汇编语言,作者以循序渐进的思想精心创作了《汇编语言(第2版)》。《汇编语言(第2版)》具有如下特点:采用了全新的结构对课程的内容进行组织,对知识进行最小化分割,为读者构造了循序渐进的学习线索;在......一起来看看 《汇编语言(第2版)》 这本书的介绍吧!

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

URL 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具