es6--解构赋值

es6--解构赋值

---

目录

1. 参考资料
2. 解构赋值
3. 数组的解构赋值
4. 对象的解构赋值
5. 字符串的解构赋值
6. 数值和布尔值的解构赋值
7. 函数参数的解构赋值
8. 圆括号
9. 解构赋值的用途

参考资料 ⇧

阮一峰—es6入门

解构赋值 ⇧

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行复制，这称为解构。

数组的解构赋值 ⇧

• 规则：按照对应的顺序进行匹配,解构不成功变量的值等于undefined ;可以嵌套赋值;

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

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

var arr = [1,[2,3]];
var [a,[b,c,d]] = arr;
console.log(a,b,c,d); //1 2 3 undefined

• 默认值：解构赋值允许使用默认值。(默认值可以引用解构赋值的其他变量，前提是这些变量已被声明)

ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

var [a='1',b='2'] = []; //这里[]中为空，即[]中的值是未定义的，因此就有 undefined=== undefined，所以a,b默认值生效;
console.log(a,b);  //1,2 (string,string)
var [a='1',b='2'] = [2];  // 2 !== undefined a的默认值不会生效
console.log(a,b);  //2,2 (number,string)

对象的解构赋值 ⇧

• 规则：按照对应的名字。(变量名与属性名不一致，变量值等于undefined);可以嵌套赋值;

var obj = {
        foo:function () { },
        o :{},
        arr:[],
        str:'123'
    }
    let{foo,str,arr,name} = obj;  //次序无影响
    console.log(foo,str,arr,name); //function(){},123,[],undefined
    console.log(typeof name);  //undefined
   
var obj = {
        foo:function () { },
        o :{},
        arr:[],
        str:'123'
    }
    var{foo,str,arr,name} = obj;  //次序无影响
    console.log(foo,str,arr,name); //function(){},123,[],'undefined'
    console.log(typeof name);  //string
//提问:当用var 和 let 分别定义变量name时，为什么typeof name 得到的值是string和undefined？

var { foo } = { foo: "aaa", bar: "bbb" };
console.log(foo) //'aaa'

//嵌套赋值
let obj = {
        say: [
            'Hello',
            { said: 'World' }
        ]
    };

let { say: [str, { said }] } = obj;
console.log(str,said); //Hello World

对象的解构赋值的内部机制： 先找到同名属性，然后再赋给对应的变量

let{say:n,age:a} = {say:'hello',age:'24'};   //say是模式 n才是变量 注意与var { foo } = { foo: "aaa", bar: "bbb" }的区别
console.log(n,a); //hello 24
console.log(say)  //say is not defined

• 默认值：与数组一样，允许使用默认值解构赋值，

默认值生效的条件是，对象的属性值严格等于undefined。

var {x = 3} = {x: undefined};
console.log(x) // 3

var {x = 3} = {x: null};
console.log(x) // null

字符串的解构赋值 ⇧

let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);//h e l l o

数值和布尔值的解构赋值 ⇧

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

函数参数的解构赋值 ⇧

根据参数是数组还是对象套用数组和对象的解构赋值

圆括号⇧

ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

• 不能使用圆括号的情况

  （1）变量声明语句中，不能带有圆括号。

  （2）函数参数中，模式不能带有圆括号。

  （3）赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中。

• 使用圆括号的情况

  赋值语句的非模式部分，可以使用圆括号

解构赋值的用途 ⇧

1. 交换变量的值
2. 从函数返回多个值
3. 函数参数的定义
4. 提取JSON数据
5. 函数参数的默认值
6. 遍历Map结构
7. 输入模块的指定方法

回到顶部