Es6解构

一.对象的解构与解构赋值

举个例子方便理解.其实原本就很简单。

这里先写一个对象.

const obj = {
    firstName:'苑文浩'，
    lastName: '尼古拉斯',
    myAge: 30,
    phone: {
        number: 1419383791,
        brand: '魅族',
        color: '黑色'
}。
// 1. 使用对象解构初始化同名变量
        // 告诉 obj 对象，把 firstName 属性的值赋值给同名变量 firstName，把 lastName 属性的值赋值给同名变量 lastName
        let { firstName, lastName } = obj;
        console.log(firstName, lastName)  // '苑文浩' '尼古拉斯'

// 2. 使用对象解构初始化非同名变量
        // 告诉 obj 对象，把 firstName 属性的值赋值给变量 first_name，把 lastName 属性的值赋值给变量 last_name

        let { firstName: first_name, lastName: last_name } = obj;
        console.log(first_name, last_name)  // '苑文浩' '尼古拉斯'

// 3. 为变量指定默认值
        // 当 obj 对象中没有 myAge 属性时，变量 myAge 默认会被赋值为 20
        let { firstName, lastName, myAge = 20 } = obj;
        console.log(firstName, lastName, myAge)  // '苑文浩' '尼古拉斯' 30

        // 当 obj 对象中没有 myAge 属性时，变量 my_age 默认会被赋值为 20
        let { firstName: first_name, lastName: last_name, myAge: my_age = 20} = obj;
        console.log(first_name, last_name, my_age)  // '苑文浩' '尼古拉斯' 30

// 4. 使用对象解构为已有变量重新赋值
        // let first_name = '郭帅', last_name = '莱昂纳多';

        // JS 解析引擎不允许赋值操作符（=）左边出现花括号，但是可以使用小括号将整个赋值语句包裹起来，这样一来，整个赋值语句就变成了一个表达式。
        ({ firstName: first_name, lastName: last_name } = obj);
        console.log(first_name, last_name)  // '苑文浩' '尼古拉斯'

// 5. 嵌套对象解构
        // 告诉 obj 对象，把 phone 对象中的 number 属性的值赋值给变量 number，把 phone 对象中的 brand 属性的值赋值给变量 brand
        let { phone: { number, brand } } = obj;
        console.log(number, brand)

二.数组的解构

//这里先定义一个数组。
const colors = ['red', 'green', 'blue', 'orange', [ 'black', 'white' ] ];

        // 1. 使用数组解构初始化变量
        // 数组中的元素会按照顺序赋值给这 3 个变量
          let [ firstColor, secondColor, thirdColor ] = colors;
        console.log(firstColor, secondColor, thirdColor)
        
        // 2. 使用数组解构为变量重新赋值
        let firstColor = 'black', secondColor = 'white';
        // 数组中的元素会按照顺序赋值给这 2 个变量
        [ firstColor, secondColor ] = colors;
        console.log(firstColor, secondColor)

        // 3. 为变量指定默认值
        // 当数组中没有第 4 个元素时，变量 fourthColor 会被赋值成默认值 'pink'
        let [ firstColor, secondColor, thirdColor, fourthColor = 'pink' ] = colors;
        console.log(firstColor, secondColor, thirdColor, fourthColor)

        // 4. 跳过数组中的指定元素
        let [ firstColor, , ,fourthColor ] = colors;
        console.log(firstColor, fourthColor)
        
        // 5. 嵌套数组解构
        let [,,,,[nestedFirstColor, nestedSecondColor]] = colors;
        console.log(nestedFirstColor, nestedSecondColor);

三.混合解构

        let node = {
            type: 'Identifier',
            name: 'foo',
            loc: {
                start: {
                    line: 1,
                    column: 1
                },
                end: {
                    line: 4,
                    column: 4
                }
            },
            range: [0, 3]
        };

        // 把 node 对象中 loc 对象的 start 属性的值赋值给变量 start，把 range 数组中第 2 个元素赋值给变量 endIndex
        let { loc: { start }, range: [, endIndex] } = node;

        console.log(start, endIndex);

四.参数解构

// 1. 以普通方式传参时，相当于把 obj 对象赋值给形参 student
        student = obj

        function getFullName (student) {
            return student.firstName + ' · ' + student.lastName;
        }

        let obj = {
            firstName: '刘旭凯',
            lastName: '约翰尼'
        };

        console.log(getFullName(obj))

        
        // 2. 以对象解构的方式传参
        // 把 obj 对象中的 firstName 属性的值传递给形参 firstName，把 lastName 属性的值传递给形参 lastName
        { firstName, lastName } = obj;

        function getFullName ({ firstName, lastName }) {
             return firstName + ' · ' + lastName;
        }

        let obj = {
             firstName: '刘旭凯',
             lastName: '约翰尼'
        };

        console.log(getFullName(obj))

        // 3. 为形参指定默认值
        // 当 obj 对象没有 lastName 属性时，形参 lastName 就会使用默认值 '尼古拉斯'
        function getFullName ({ firstName, lastName = '尼古拉斯' }) {
            return firstName + ' · ' + lastName;
        }

        let obj = {
            firstName: '刘旭凯',
            lastName: '克里斯蒂安' 
        };

        console.log(getFullName(obj))