ES6的展开运算符和剩余运算符

在ES6中, 三个点(...) 有2个含义。分别表示 展开运算符 和 剩余运算符。

展开运算符

/******************展开运算符(spread)********************/

     // 1、传递数据代替多个字符串的形式
     function func (a, b, c) {
         console.log(a);
         console.log(b);
         console.log(c);
     }

     var arr = [1, 2, 3];
     test(...arr);
    

     // 2、合并数组
     var arr1 = [1, 2, 3, 4];
     var arr2 = [...arr1, 4, 5, 6];
     //  var arr2 = [4, 5, 6];
     //  arr1.push(...arr2);
     console.log(arr2);    // [1, 2, 3, 4, 4, 5, 6]


     // 3、合并对象
     var info = {
         target: "啦啦啦",
         url: "www.lalala.com"
     }
     var obj = {
         address: "啧啧啧",
         age: 4,
         ...infor
     };
     console.log(obj);


     // 4、字符串转数据
     var str='loycoder';
     var arr3= [...str];
     console.log(arr3);

展开运算符:

前面对展开运算符功能做了简单的演示,下面做一下总结介绍。

(1).在函数调用时,在参数中,将具有Iterator接口的对象展开。

(2).在数组创建时,将具有Iterator接口的对象展开。

(3).创建对象直接量时,将对象直接量按照键值对方式展开(ES2018新增)。

关于Iterator接口可以参阅ES2015 Iterator遍历器一章节。

 

剩余运算符

 /******************剩余运算符(rest)********************/

    // 当函数参数个数不确定时,用 rest运算符
    function func1 (...arr) {
        for (let item of arr) {
            console.log(item);
        }
    }
    func1(1, 3, 5);


    // 当函数参数个数不确定时的第二种情况
    function func2 (item, ...arr) {
        console.log(item);
        console.log(arr);
    }
    func2(1, 2, 34);


    // 配合解构赋值使用:
    let [a,...temp]=[1, 2, 4];
    let { web,...rest }={ web: "啦啦啦", age: 6, address: "略略略" };
    console.log(a);
    console.log(temp);
    console.log(web);
    console.log(rest);

剩余运算符:

前面对剩余运算符功能做了简单的演示,下面做一下总结介绍。

(1)用于将剩余多个值压缩收集起来生成一个数组作为参数。

(2)剩余运算符构成的剩余参数只能位于参数列表的最后一位。

(3)将剩余对象属性值收集生成新对象(ES2018新增)。

 

展开运算符和剩余运算符的区别

展开运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值,即打散操作;

剩余运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组,是展开运算符的反向操作,即打包操作;

 

最后,补充一下:

ES6之所以把这两个关键字设成一致的写法,是因为它们本质是一样,都是解构赋值。

当三个点(...)在等号左边,或者放在形参上。为 rest 运算符

当三个在等号右边,或者放在实参上,是 spread运算符

或者说:

放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值