前端开发

ES6解构赋值

2019-03-08  本文已影响9人  海之深处爱之港湾

解构赋值注意 :

    1. 左右两边结构必须一样;

    2. 右边必须是一个东西;

    3. 声明和赋值不能够分开(必须在一句话中完成);

    数组和json都可以玩解构赋值

    let [a,b,c] =  [12,34,55];

    let {a,b,c} = {a:12,b:33,c:66};

    复杂结构解构赋值

    let[{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'cxzy'];

    console.log(a,b,n1,n2,n3,num,str) //12 5 12 5 8 8 "cxzt"

    eg:

    let [foo, [[bar], baz]] = [1, [[2], 3]];

    foo // 1

    bar // 2

    baz // 3   

    let [ , , third] = ["foo", "bar", "baz"];

    third // "baz"

    let [x, , y] = [1, 2, 3];

    x // 1

    y // 3

    let [head, ...tail] = [1, 2, 3, 4];

    head // 1

    tail // [2, 3, 4]

    let [x, y, ...z] = ['a'];

    x // "a"

    y // undefined

    z // []


1. 如果解构不成功,变量的值就等于undefined。

    let [foo] = [];

    let [bar, foo] = [1];

    以上两种情况都属于解构不成功,foo的值都会等于undefined。

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

    var {x = 3} = {x: undefined};

    x // 3

    var {x = 3} = {x: null};

    x // null

    上面代码中,属性x等于null,因为null与undefined不严格相等,所以是个有效的赋值,导致默认值3不会生效。

3. 不能使用圆括号的情况

    以下三种解构赋值不得使用圆括号。

    (1)变量声明语句

    // 全部报错

    let [(a)] = [1];

    let {x: (c)} = {};

    let ({x: c}) = {};

    let {(x: c)} = {};

    let {(x): c} = {};

    let { o: ({ p: p }) } = { o: { p: 2 } };

    上面 6 个语句都会报错,因为它们都是变量声明语句,模式不能使用圆括号。

    (2)函数参数

    函数参数也属于变量声明,因此不能带有圆括号。

    // 报错

    function f([(z)]) { return z; }

    // 报错

    function f([z,(x)]) { return x; }

    (3)赋值语句的模式

    // 全部报错

    ({ p: a }) = { p: 42 };

    ([a]) = [5];

    上面代码将整个模式放在圆括号之中,导致报错。

    // 报错

    [({ p: a }), { x: c }] = [{}, {}];

    上面代码将一部分模式放在圆括号之中,导致报错。

4.可以使用圆括号的情况

    可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。

    [(b)] = [3]; // 正确

    ({ p: (d) } = {}); // 正确

    [(parseInt.prop)] = [3]; // 正确

    上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。

上一篇下一篇

猜你喜欢

热点阅读