es6的解构赋值

1.数组的解构赋值

  // 数组解构赋值
        let arr = ['hello','world']
        let [a,b] = arr
        console.log(a); // hello
        console.log(b); // world

 // 只取部分值
         let arr = [1,2,3,4]
         let [a,,c] = arr 
         console.log(a);// 1
         console.log(c); // 3

2.对象的解构赋值

// 对象解构赋值
        let Obj = {
            a:1,b:2
        }
        let {a,b} = Obj
        console.log(a); // 1
        console.log(b); // 2
   

// 只取部分值
         let Obj = {
             a:1,b:2,c:3,d:4
         }
         let {a,c} = Obj
         console.log(a);
         console.log(c);
 

利用解构赋值给对象重新赋值

 // 利用解构赋值给对象属性重新赋值
             let user = {name:'zs',age:'12'}; // 这行必须加分号
             [user.name,user.age] = ['ls','13']
             console.log(user);

 

3.字符串解构赋值

 // 字符串解构赋值 
         let str = 'abcd'
         let [a,b] = str
         console.log(a); // a
         console.log(b); // b

   // 只取部分值
         let str = 'abcd'
         let [a,,c] = str
         console.log(a); // a
         console.log(c); // c

4.set集合的解构赋值

 // set集合的解构赋值
         let set = new Set(['a','b'])
         let [a,b] = set 
         console.log(a);
         console.log(b);

// 只取部分值
         let set = new Set([1,2,3,4])
         let [a,,c] = set
         console.log(a); // a 
         console.log(c); // c

5.对元素较多的数组进行解构赋值，只取有用的值

 let arr = [1,2,3,4,5,6,7,8,9,20]
         let [a,b,...v] = arr 
            console.log(a);// 1
            console.log(b); // 2
            console.log(v); // [3,4,5,6,7,8,9,20]

6.只取对象中有用的属性

  let obj = {
             name:'zs',age:12,addr:'gz'
         }
         let {name,...v} = obj 
         console.log(name); // zs
         console.log(v); // {age:12,addr:'gz'}

7.复杂数据的解构赋值

 // 复杂数据解构的解构赋值
         let options = {
             size:{
                 width:100,
                 height:200
             },
             extra:true ,
             users:['zs','ls']
         }

         let {size:{width},users:[,item]} = options
         console.log(width); // 100
         console.log(item); // ls

 8.嵌套对象的解构赋值

let obj = {
                 a:{
                     b:{
                         c:{
                             d:'e'
                         }
                     }
                 }
             }
             let {a:{b:{c:{d}}}} = obj 
             console.log(d); // e 

 

9.需要注意的地方：

let obj = {name:'zs',age:12}
let {name,age,addr='gz'} = obj
console.log(addr) // gz  
console.log(obj) // {name:'zs',age:12}  没有addr属性

 

10.截取数组的技巧

之前都是用splice截取数组的，例如，只想要数组后面两项：

let arr = [1,2,3,4]
arr.splice(2) // [3,4]

现在可以用结构达到这个目的：

let arr = [1,2,3,4]
let [,,...v] = arr
console.log([...v]) // [3,4]