[ES6] destructuring assignment（解构赋值）

#

解构赋值（destructuring assignment）
它使得从数组或者对象中提取数据赋值给不同的变量成为可能。
可以用一个表达式读取整个结构

#

    var foo = ["one", "two", "three"];
            // 没有解构赋值
            var one = foo[0];
            var two = foo[1];
            var three = foo[2];
            console.log(one,two,three);//"one"  "two"  "three"
            // 解构赋值
            var [one, two, three] = foo;
            console.log(one,two,three);//"one"  "two"  "three"

 

#交换变量

            var a = 1;
            var b = 3;
            [a, b] = [b, a];
            console.log(a, b);//3 1

 

#返回多值

            function f() {
                return [1, 2];
            }
            var a, b;
            [a, b] = f();
            console.log("A is " + a + " B is " + b); //A is 1 B is 2
            a = f();
            console.log("AA is " + a);//AA is 1,2

 

#忽略某些返回值

            function f() {
                return [1, 2, 3];
            }
            var [a, , b] = f();
            console.log("A is " + a + " B is " + b);//A is 1 B is 3
            //[, , ] = f();//忽略所有返回值

 

#正则表达式

            var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
            var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
            //["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript", index: 0, input: "https://developer.mozilla.org/en-US/Web/JavaScript"]
            console.log(parsedURL);
            var [, protocol, fullhost, fullpath] = parsedURL;
            console.log(protocol); // 输出"https:"

 

#解构对象

            var o = {
                p: 42,
                q: true
            };
            var {
                p,
                q
            } = o;
            console.log(p); // 42
            console.log(q); // true 
            // 用新变量名赋值
            var {
                p: foo,
                q: bar
            } = o;
            console.log(foo); // 42
            console.log(bar); // true

 

#设置函数参数默认值

        //ES5
            function drawES5Chart(options) {
                options = options === undefined ? {} : options;
                var size = options.size === undefined ? 'big' : options.size;
                var cords = options.cords === undefined ? {
                    x: 0,
                    y: 0
                } : options.cords;
                var radius = options.radius === undefined ? 25 : options.radius;
                console.log(size, cords, radius);
                // big Object {x: 18, y: 30} 30
            }
            drawES5Chart({
                cords: {
                    x: 18,
                    y: 30
                },
                radius: 30
            });
            
            //ES6
            function drawES6Chart({
                size = 'big',
                cords = {
                    x: 0,
                    y: 0
                },
                radius = 25
            } = {}) {
                console.log(size, cords, radius);
                // big Object {x: 18, y: 30} 30
            }
            drawES6Chart({
                cords: {
                    x: 18,
                    y: 30
                },
                radius: 30
            });

 

#加载模块

const { Loader, main } = require('toolkit/loader');

 

#解构嵌套对象和数组

        var metadata = {
                title: "Scratchpad",
                translations: [{
                    locale: "de",
                    localization_tags: [],
                    last_edit: "2014-04-14T08:43:37",
                    url: "/de/docs/Tools/Scratchpad",
                    title: "JavaScript-Umgebung"
                }],
                url: "/en-US/docs/Tools/Scratchpad"
            };
            var {
                title: englishTitle,
                translations: [{
                    title: localeTitle
                }]
            } = metadata;
            console.log(englishTitle); // "Scratchpad"
            console.log(localeTitle); // "JavaScript-Umgebung"

 

#For of 迭代和解构

            var people = [{
                name: "Mike Smith",
                family: {
                    mother: "Jane Smith",
                    father: "Harry Smith",
                    sister: "Samantha Smith"
                },
                age: 35
            }, {
                name: "Tom Jones",
                family: {
                    mother: "Norah Jones",
                    father: "Richard Jones",
                    brother: "Howard Jones"
                },
                age: 25
            }];
            for (var {
                    name: n,
                    family: {
                        father: f
                    }
                }
                of people) {
                console.log("Name: " + n + ", Father: " + f);
            }
            // "Name: Mike Smith, Father: Harry Smith"
            // "Name: Tom Jones, Father: Richard Jones"

 

#从作为函数实参的对象中提取数据

            function userId({
                id
            }) {
                return id;
            }

            function whois({
                displayName: displayName,
                fullName: {
                    firstName: name
                }
            }) {
                console.log(displayName + " is " + name);
            }
            var user = {
                id: 42,
                displayName: "jdoe",
                fullName: {
                    firstName: "John",
                    lastName: "Doe"
                }
            };
            console.log("userId: " + userId(user)); // "userId: 42"
            whois(user); // "jdoe is John"

 

#对象属性计算名和解构

            let key = "z";
            let {
                [key]: foo
            } = {
                z: "bar"
            };
            console.log(foo); // "bar"

 

#ES7

var a, b, rest;
[a, b] = [1, 2]
console.log(a) // 1
console.log(b) // 2

[a, b, ...rest] = [1, 2, 3, 4, 5]//ES7
console.log(a) // 1
console.log(b) // 2
console.log(rest) // [3, 4, 5]

({a, b} = {a:1, b:2})//ES7
console.log(a) // 1
console.log(b) // 2

({a, b, ...rest} = {a:1, b:2, c:3, d:4}) //ES7