21.对象解构赋值-ES6

发表于 | 分类于

注意点:

  1. 对象的解构赋值和数组的解构赋值 除了符号不一样, 其它的一模一样，数组解构使用[]，对象解构使用{}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
       // 1.在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构
       let [a, b, c] = [1, 3, 5];
       console.log(a, b, c); // 1 3 5

       // 2.在数组的解构赋值中, 两边的个数可以不一样
       let [a, b] = [1, 3, 5];
       console.log(a, b); // 1 3
       let [a, b, c] = [1, 3];
       console.log(a, b, c); // 1 3 undefined

       // 3.在数组的解构赋值中,如果右边少于左边, 我们可以给左边指定默认值
       let [a, b, c = 666] = [1, 3];
       console.log(a, b, c); // 1 3 666

注意点: 在对象解构赋值中, 左边的变量名称必须和
              对象的属性名称一致, 才能解构出数据
       let {age} = {name: "lnj",age: 34};
       console.log(age); // 34

       let {a, b} = {name: "lnj",age: 34};
       console.log(a, b); // undefined undefined

  • 注意点: 在对象解构赋值中, 左边的变量名称必须和对象的属性名称一致, 才能解构出数据

    1
    2
    let {age} = {name: "a",age: 34};
    console.log(age); // 34

  • 数组解构赋值和对象解构赋值的应用，简化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
        let arr = [1, 3];
        // function sum(a, b) {
        function sum([a, b]) {
            return a + b;
        }
        // let res = sum(arr[0], arr[1]);
        let res = sum(arr);
        console.log(res);
        */
        let obj = {
            name: "lnj",
            age: 34
        }
        // function say(name, age) {
        function say({name, age}) {
            console.log(name, age);
        }
        // say(obj.name, obj.age);
        say(obj);