ES6(5) - 變量的解構賦值

ES6容許按必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲 ‘解構’。

一.  數組的解構賦值

<script type="module">
       //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


       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>

2） 不徹底解構：等號左邊的模式，只匹配一部分的等號右邊的數組

<script type="module">
        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>

3） 指定默認值：ES6內部使用嚴格的相等運算符（===）判斷一個位置，因此若是一個數組成員不嚴格等於undefined，默認值是不會生效的

<script type="module">
        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>

注：非遍歷結構報錯

 <script type="module">
        var [temp] = 1; // Error: 1[Symbol.iterator] is not a function at eval
</script>

 

二. 對象的解構賦值

<script type="module">
        var {name, age} = {name:"Conan", age: 23};
        console.log(name); //Conam
        console.log(age); //23
</script>

2） 變量屬性名不一致：

<script type="module">
        var {person_name, person_age, person_id} = {id:"007", name:"Conan", age: 23};
        console.log(person_name); //undefined
        console.log(person_age); //undefined
        console.log(person_id); //undefined

        var {name: person_name,age: person_age, id: person_id} = {id:"007", name:"Conan", age: 23};
        console.log(person_name); //Conan
        console.log(person_age); //23
        console.log(person_id); //007


        let object = {first: "Hello", last: "World"};
        let {first:firstname, last:lastName} = object;
        console.log(firstname);
        console.log(lastName)
</script>

3） 對象解構默認值：

<script type="module">
        var{ x = 3 } = {};
        console.log(x); //3

        var{ x, y = 5} = {x: 1};
        console.log(x); //1
        console.log(y); //5

        var { message: msg = "u are crazy" } = {};
        console.log(msg); //u are crazy
</script>

 

三. 字符串解構賦值

字符串被轉換成一個相似數組的對象

<script type="module">
       const [a, b, c, d, e] = "Hello";
       console.log(a);// H
       console.log(b);// e
       console.log(c);// l
       console.log(d);// l
       console.log(e);// o
</script>

2） 字符串的屬性解構賦值：

<script type="module">
        const {length: len} = "Hello";
        console.log(len); //5
</script>

 

四. 函數參數的解構賦值

 <script type="module">
        function sum([x,y]){
            return x + y;
        };
        console.log(sum([1,2])); //3
</script>

 

2） 函數參數解構賦值的默認值：

<script type="module">
       function fun({x = 0, y = 0} = {}){
           return[x,y];
       };

       console.log(fun({x:100,y:200})); //[100,200]
       console.log(fun({x:100})); //[100,0]
       console.log(fun({})); //[0,0]
       console.log(fun()); //[0,0]

</script>

 

五. 解構賦值的用途

1） 交換變量的值：

 <script type="module">
        //ES5:
        console.log("ES:5");
        var a = 100;
        var b = 200;
        console.log("交換前：");
        console.log("a="+a); // a=100
        console.log("b="+b); // b=200
        var temp;
        temp = a;
        a = b;
        b = temp;
        console.log("交換後");
        console.log("a="+a); // a=200
        console.log("b="+b); // b=100

        //ES6:
        console.log("ES:6");
        var x = 100;
        var y = 200;
        console.log("交換前：");
        console.log("x="+x); // x=100
        console.log("y="+y); // y=200
        [x, y] = [y, x];
        console.log("交換後：");
        console.log("x="+x); // x=200
        console.log("y="+y); // y=100
</script>

2） 從函數返回多個值：

<script type="module">
       function fun(){
           return [1, 2, 3];
       };
        var [x, y, z] = fun();
        console.log(x); //1
        console.log(y); //2
        console.log(z); //3
</script>

<script type="module">
        function fun(){
            return{
                id: "007",
                name: "Conan",
                age: 28
            }
        }
        var {id:person_id, name, age} = fun();
        console.log(person_id); // 007
        console.log(name); // Conan
        console.log(age); // 28

</script>

3） 函數參數的定義：（☆）

<script type="module">
       //參數是一組有次序的值
        function fun([x, y, z]){

        };
        fun([100, 200, 300]);
        //參數是一組無次序的值
        function fun({x, y, z}){

        };
        fun({
            x: 100,
            y: 200,
            z: 300
        })
</script>

4） 提取 json 數據：（☆）

 <script type="module">
       var jsondata = {
           id: "007",
           name: "Canon",
           age: 28,
           score: {
               Chinese: 98,
               Math: 148,
               English: 107
           }
       }

       //ES:5
       console.log("ES:5");
       console.log("Person's name is:" + jsondata.name);

        //ES:6
       console.log("ES:6");
        let {id: number, name, age, score} = jsondata;
        console.log(number); // 007
        console.log(name); // Canon
        console.log(age); // 28
        console.log(score.Chinese); // 98
</script>