当前位置:   article > 正文

ES6展开运算符“...”_es6 ...

es6 ...

ES6新增了一个运算符“...”,叫做展开运算符

● 作用是把数组或者对象内容展开

(1)展开数组:

○ ES5方法:concat()

  1. <script>
  2. let a = [1,2,3]
  3. let b = [4,5,6]
  4. //ES5的方法:concat()
  5. console.log(a.concat(b))
  6. console.log(a,b)
  7. </script>

结果:

○ ES6方法:"..."展开运算符

  1. <script>
  2. let a = [1,2,3]
  3. let b = [4.5,6]
  4. //ES6的方法: ...
  5. var c = [...a,...b]
  6. console.log(c)
  7. </script>

结果:

● ...就是把数组里面的内容给展开,...a就是把a里面的内容全部展开,也就是1,2,3,然后...b展开以后和a展开放在一起,就成了c那样子。。

(2)展开数组--实参、形参的运用:

○ ...arr放在形参的位置:

  1. <script>
  2. let fun = function(a,b,...arr) {
  3. console.log(arr)
  4. }
  5. fun(1,2,3,4,5)
  6. </script>

结果:

● a,b接收前两个参数1和2,剩下的都由...arr接收,...arr是展开的,所以arr最终是一个数组

● 注意:形参...arr必须放在最后面,它后面不能再有其他的形参了,不然就会报错

○ ...arr放在实参的位置:

  1. <script>
  2. let arr = [1,2,3]
  3. let fun = function(a,b,c) {
  4. console.log(a,b,c)
  5. }
  6. fun(...arr)
  7. </script>

结果:

● 先定义了一个arr数组,然后用...arr把arr数组里面的内容拿出来,当做实参传进去。。

(3)伪数组转为数组

○ ES5的方法:Array.from(arguments)

  1. <script>
  2. function fun(){
  3. var arr = Array.from(arguments)
  4. console.log(arr)
  5. }
  6. fun(1,2,3,4,5)
  7. </script>

结果:

○ ES5的方法:[...arguments]

  1. <script>
  2. function fun(){
  3. var arr = [...arguments]
  4. console.log(arr)
  5. }
  6. fun(1,2,3,4,5)
  7. </script>

结果:

● 注意:arguments的作用是:在没有形参的情况下,用来接收实参的

(4)对象合并

  1. <script>
  2. let obj1 = {
  3. name:"yiyi",
  4. age:21
  5. }
  6. let obj2 = {
  7. location:"henan"
  8. }
  9. let obj = {
  10. ...onj1,
  11. ...obj2
  12. }
  13. console.log(obj)
  14. </script>

 ● 注意:同名的键后面的会覆盖前面的,比如我合并了obj1和obj2,如果obj1和obj2都有name这个键,那么name的值就等于obj2的name值。

(5)解构赋值也可以放在形参里

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/131174
推荐阅读
相关标签
  

闽ICP备14008679号