zoukankan      html  css  js  c++  java
  • es6 解构赋值

    1、在es5中我们进行相关赋值的时候,只能一个一个进行赋值,使用逗号的进行赋值也只是最右边的赋值 才生效。在es6中出现了赋值解构,分两种情况一个是数组解构,一个是对象解构赋值。这么好用的方法给我带来很多便利。

    • 数组解构赋值:
     1    // //解构赋值:通过数组对应,对变量进行对应赋值。
     2     let [a,c,v,b]=[1,2,3,4];
     3     console.log(a,c,v,b);
     4     //这种赋值叫做 模式匹配。只要等号两边结构一样就可以进行赋值。
     5     let [k,[[n],d]]=[1,[[2],3]];
     6     console.log(k,n,d);
     7     //如果解构不成功,对应变量值为undefined;
     8     let [l,m]=[1];
     9     console.log(m);
    10     //不完全解构,如果等号左边没有全部匹配右边也是可以结构成功的。
    11     let [vv,vb,vc]=[1,2,3,4];
    12     console.log(vv,vb,vc);
    13     //变量结构需要等号右边需要itrator结构,也就是说具备可以被迭代。否则解构不成功。
    14     try {
    15         // let [cc]=2;//右边并不是数组 TypeError: 2 is not iterable
    16         let [dd]={};//不具备iteraor 所以解构也不成功。TypeError: {} is not iterable
    17     }catch (e) {
    18         console.log(e)
    19     }
     1  // 解构允许有默认值。
     2     let [a1,a2=2]=[1];
     3     console.log(a1,a2);
     4     // 需要注意的是在es6内部使用的是严格相等来判断一个位置是否有值。只有当数组中的成员严格等于undefined 默认值才能生效。
     5     // 如果默认值里是null,因为null不严格等于undefined 所有默认值也不会生效。
     6     let  [a=2]=[null];
     7     console.log(a);//a=null
     8     // 如果默认值是表达式,这个表达式是惰性求值。只有用到的时候才会求值。
     9     fn=()=>{
    10       return 2;
    11     };
    12 
    13     let [a=fn()]=[1];
    14     console.log(a);
    15     //只有a对应的右边的位置的值为undefined的时候,才会执行fn,否则不会执行相当于:
    16     let x;
    17     x=[1][0]===undefined?fn():[1][0];//只有在对应的右边的元素为undefined的时候才会计算表达式。和函数的默认为表达式也是惰性求值。
    1     // 默认值也可以是其他结构解构的变量,但是对应的变量需要提前声明,否则会报错。
    2     try {
    3         let [ov,oc=ov]=[1];
    4         console.log(ov,oc);
    5         let [k1=k2,k2]=[undefined,2];
    6         console.log(k1,k2);//ReferenceError: Cannot access 'k2' before initialization
    7     }catch (e) {
    8         console.log(e)
    9     }
    • 对象解构赋值:对象解构,语法解构:let {匹配字符:变量名}={匹配字符:变量值} 例如:let {a:c}={a:2,c=3} ,我们常常用缩写形式let {c}={c:2} 缩写形式,匹配的字符和变量是一样的。
    1    //对象解构:对象解构不需要位置和数组解构位置一致,只要保证解构的变量名和属性一致即可。
    2     let {a,c}={c:4,a:2};
    3     console.log(a,c);
    4     //如果解构失败,变量赋值为undefined.
    5     let {acd}={f:2};
    6     console.log(acd);
    • 对象解构还有一个常用的功能,就是取js的一些方法,类似python的反射功能。
    1 // 我们在使用对象解构的时候,可以获取对应的对象的方法类似有点想python的反射
    2     let {log}=console;
    3     log(222);
    4     //对象解构 上面的例子都是简写形式。实际上是如下://也就是说:a是匹配的关键字 而真正的白能量是c.
    5     let {a:c}={a:2,c:4};
    6     console.log(c)
    • 对象解构嵌套解构对象,这种情况下对应嵌套的解构匹配属性不能省略。
       //在解构的时候,我们也可以用在解构中嵌套解构对象,也就是说可以在对象解构中嵌套数组解构 这种情况嵌套对象的属性不能省略匹配的同名属性。
        let {ac:ac,ff:[c,a]}={ac:22,ff:[1,2]};
        console.log(ac,c,a);
  • 相关阅读:
    第11组 团队Git现场编程实战
    团队项目-需求分析报告
    团队项目-选题报告
    第10组 Alpha事后诸葛亮
    第10组 Alpha冲刺(6/6)
    第10组 Alpha冲刺(5/6)
    第10组 Alpha冲刺(4/6)
    第10组 Alpha冲刺(3/6)
    第10组 Alpha冲刺(2/6)
    第10组 Alpha冲刺(1/6)
  • 原文地址:https://www.cnblogs.com/evilliu/p/10837242.html
Copyright © 2011-2022 走看看