解构 - 三个点运算符

1.数组-拆分

const arr =[1,2,3,4,5,6,7]
const [a,b,...c] = arr
console.log(a,b,c)

2.数组-合并

const a = [1,2,3],b = [4,5,6]
const c = [...a,...b]
console.log(c)

3.字符串-转数组

const [...arr] = 'string'

4.类数组-转数组

const [...div] = document.getElementsByTagName('div')

5.实现迭代器接口的数据

const obj = {
     *[Symbol.iterator](){
          yield 1
          yield 2
          yield 3
          yield 4
          yield 8
     }
}
console.log([...obj])

6.对象解构

let {name,age,...other} = {name:'zhangsan',age:18,job:'前端开发',province:'深圳'}
console.log(name,age,other)

7....赋值语句

 const obj = {a:1,b:2}
 const o = {a:8,c:13,...obj}

 const obj1 = {a:12,b:23}
 const obj = {c:89,d:99}
 const newobj = {...obj1,...obj2}

8.使用表达式

const isTrue = true
const obj = {...(isTrue? obj1:obj2),c:33}

9.三点(...)赋值解构数组,会隐式调用其object方法

console.log({...[1,2,3]})
console.log({...'string'})

10. 函数使用:... 获取剩余参数

 function demo(a,b,...params){
     console.log(params)
 }
 demo(1,2,3,4,5,6)

11.将数组传递给参数

function demo(...args){
      console.log(args)
}
const arr = [2,3,4,5]
demo.apply(null,arr)
demo(...arr)

12.其它

不能解构 null 和undefined
结构是浅复制
... 无法解构原型属性,属性解构是可以的

 

posted @ 2021-08-05 18:11  卷叶小树  阅读(181)  评论(0编辑  收藏  举报