7.ES6 變量的解構賦值 (Destructuring)

-------------------------------------數組的解構賦值-------------------------------------------

解構:

     ES6允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱爲解構(Destructuring).

不完全解構:

           等號左邊的模式,只匹配一部分的等號右邊的數組。

指定默認值:

      注:ES6內部使用嚴格相等運算符(===)判斷一個位置是否有值。所以,如果一個數組成員不嚴格等於undefined,默認值是不會生效的。

let和const命令:

       只要某種數據結構具有lterator接口,都可以採用數組形式的解構賦值。

注:只要是可遍歷的結構或數組都可以被解構。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數組解構</title>
    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <script type="text/traceur">
        // ES5
        /* var a=1;
        var b=2;
        var c=3; */

        // ES6
        var [a,b,c]=[1,2,3];

        console.log(a);  // 1
        console.log(b);   // 2
        console.log(c);   //3
    </script>
</head>
<body>
    
</body>
</html>


---------------------------------------------對應位置---------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>對應位置</title>
    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <script type="text/traceur">
        let [foo,[[bar],base]]=[1,[[2],3]];
        console.log(foo);  //1
        console.log(bar);  // 2
        console.log(base); // 3

        let [,,third]=["first","second","third"];
        console.log(third); // third

        let [one,,three]=["one","two","three"];
        console.log(one);   // one
        console.log(three);  //three

        let [head,...tail]=[0,1,2,3,4,5,6,7,8,9];
        console.log(head);  // 0
        console.log(tail);   // [1,2,3,4,5,6,7,8,9]


    </script>
</head>
<body>
    
</body>
</html>


--------------------------------------------------------數組解構不成功-------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數組解構不成功</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
       var [temp]=[];
       console.log(temp);  //undefined
       
       var [first,second]=[100];
       console.log(first);  //100
       console.log(second);  //undefined

       //解構不成功的默認值都是undefined
    </script>
</head>
<body>
    
</body>
</html>


------------------------------------------------不完全解構--------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不完全解構</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
       let [x,y]=[1,2,3];
       console.log(x); //1
       console.log(y); //2

       let [a,[b],c]=[1,[2,3],4];
       console.log(a);  //1
       console.log(b);  //2
       console.log(c);  //4
    </script>
</head>
<body>
    
</body>
</html>


----------------------------------------------------指定默認值------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指定默認值</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
       var [temp="string"]=[];
       console.log(temp); //string

       var [temp="string"]=["tempString"];
       console.log(temp); //tempString

       var [x="aaa",y]=["bbb"];
       console.log(x); //bbb
       console.log(y);  //undefined

       var [m,n="aaa"]=["bbb"];
       console.log(m); //bbb
       console.log(n); //aaa

       var [p,q="aaa"]=["bbb",undefined];
       console.log(p); //bbb
       console.log(q); //aaa
    </script>
</head>
<body>
    
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非遍歷解構----報錯</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
      var [temp]=1;             // 1[Symbol.iterator] is not a function
      
      var [temp]=false;             // false[Symbol.iterator] is not a function
      var [temp]=NaN;               //NaN[Symbol.iterator] is not a function
      var [temp]=undefined;       // Cannot read property 'Symbol(Symbol.iterator)' of undefined
      var [temp]=null;         //Cannot read property 'Symbol(Symbol.iterator)' of null

      //以上的都會報錯的
    </script>
</head>
<body>
    
</body>
</html>


------------------------------------------let和const命令----------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lterator接口</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
      //let和const命令
      //只要某種數據結構具有lterator接口,都可採用數組形式的解構賦值。
      
      let [a,b,c]=new Set(["a","b","c"]);
      console.log(a);  //a
      console.log(b);  //b
      console.log(c);  //c

      function* fibs(){  //指針函數具有lterator接口,可遍歷
        let a=0;
        let b=1;
        while(true){
            yield a;
            [a,b]=[b,a+b];

        }
      };
      var [first,second,third,fourth,fifth,sixth]=fibs();
      console.log(sixth); //5
    </script>
</head>
<body>
    
</body>
</html>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章