ES6 学习 之 解构赋值

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20087231/article/details/83179853

ES6允许按照一定模式从数据和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)

1.基本用法

// let name = '张三',
        // age = 18,
        // sex = '男';
        let [name, age, sex] = ['李四', 20, '女'];
        name = 'aaa';
        console.log(name); // aaa
        console.log(age); // 20
        console.log(sex); // 女

2.对象的解构赋值

以key的形式取值

        let {
            name,
            age,
            friends,
            pet
        } = {
            name: '张三',
            age: 55,
            friends: ['lulu', 'wangwu'],
            pet: {
                name: '土豆',
                age: 5
            }
        };

        console.log(name); // 张三
        console.log(age); // 55
        console.log(friends); // ['lulu', 'wangwu']
        console.log(pet); // {name: '土豆',age: 5}

 如果以键值对来取值，只能取到值，不推荐

        let {
            name: str
        } = {
            name: '张三'
        };

        console.log(name); // null
        console.log(str); // 张三

3.数组的解构赋值

只需要结构一致

        // let [name,age,sex] = ['李四',20,'女'];
        let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
        console.log(arr1, arr2, arr3, arr4, arr5); // 1 2 3 4 5
        
        let [arr1] = [];
        console.log(arr1); // undefined 可以取到

        let [a, , ,c] = [1,2,3];
        console.log(a); // 1
        console.log(c); // undeifined

4. 基本类型的解构赋值（字符串可以，数值不行）

        let [a, b, c, d, e] = '我是中国人';
        console.log(a); // 我
        console.log(b); // 是
        console.log(c); // 中
        console.log(d); // 国
        console.log(e); // 人