ECMAScript6详细学习笔记（三）-------解构赋值

ECMAScript6解构赋值

一、解构的概念：从数组和对象中提取值，对变量进行赋值，这就称为解构

二、哪些可以解构：

    1. 数组解构
    2. 对象解构
    3. 字符串解构

三、应用之地：

    1. 函数参数的解构赋值
    2. 函数返回值
    3. 变量互换
    4. Json应用

四、实例说明：

(1) 数组解构

         let  arr = [1,2];
         //传统的从arr数组取值 var a = arr[0];  var b = arr[1];
         let [a,b] = arr; //用解构方法
         console.log('a='+a,'b='+b);
         //深度认识
         let arr1 = [3,4,[5,6],7];
         let [c,d,e,f] = arr1;
         console.log('c='+c,'d='+d,'e='+ e,'f='+f);

         let [h,j,[k,l],x] =arr1;
         console.log('h='+h,'j='+j,'k='+k,'l='+l,'x='+x);

         let [q,w,[r,t],g=10,i] = arr1;
         console.log('q='+q,'w='+w,'r='+r,'t='+t,'g='+g,'i='+i);

运行结果：

(2) 对象解构

  let obj = {
             name:'zs',
             age:20,
         }
         let {x,y} = obj;//undefined undefined
         let {name,age} = obj;//zs 20
         console.log(x,y);
         console.log(name,age);

运行结果：

(3) 字符串解构

       let str = "abcdef";
       let [a,b,c,d,e,f] = str;
       console.log(a,b,c,d,e,f);//结果为：a b c d e f

(4)解构设置默认值

  function fn([x,y,z=100]){//解构时z有对应的值传入时为解构的值，，无则为默认值100
            console.log(x,y,z);
        }
        fn([1,2,3])

运行结果：

(5)变量互换

        let a =5;
        let b =6;
       // var  c ;c =a;a =b; b =c;
        let [e,f] =[a,b];
        a =f;b=e;

五、总结：

1.数组和字符串解构都是默认按索引对应解构取值，而对象则是通过相同属性名。

2.从数组、字符串和数组中提取值时未找到对应索引或属性名的值此时为undefined

3.函数参数的解构赋值时，有对应解构的值则为解构的值，无则为默认值

代码链接: https://github.com/kingMid/JustdoIT/blob/master/KnowledgePoints/ES6/3_%E8%A7%A3%E6%9E%84.html.