zoukankan      html  css  js  c++  java
  • Es6 变量的解构赋值

    ES6解构:es6允许按照一定模式匹配,从数组和对象中提取值,对变量进行赋值,这被称之为解构

       1. 解构一般有三种情况,完全解构,不完全解构,解构不成功

    <script>
            //完全解构
            var [a,b,c] = [1,2,3];
            console.log(a+b+c); //6
    //不完全解构 let [x,y] = [1,2,3]; console.log(y);//2 //解构不成功 let [bar, foo] = [1]; console.log(foo); //undefined </script>

     2 .对象的解构赋值

      1. 对象的解构与数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

       2. 对象的解构赋值的内部机制,是先找到同名属性,然后再赋值给对应的变量,真正被赋值的是后者,而不是前者。

       3.解构也可以用于嵌套结构的对象 ,注意模式和变量的区别。

    //对象的解构
            let { foo, bar } = { foo: "aaa", bar: "bbb" };
            console.log(foo);   //aaa
            console.log(bar);   //bbb
    
            let { fo: ba } = { fo: 'aaa', bar: 'bbb' };
            console.log(ba);  //aaa
            console.log(fo); ///报错,fo is not defined
    例子1:
    let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World"
    注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。
    例子2:
    let obj = {
      p: [
        'Hello',
        { y: 'World' }
      ]
    };
    
    let { p, p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"
    p // ["Hello", {y: "World"}]
     
    例子3:
     
    const node = {
      loc: {
        start: {
          line: 1,
          column: 5
        }
      }
    };
    
    let { loc, loc: { start }, loc: { start: { line }} } = node;
    line // 1
    loc  // Object {start: Object}
    start // Object {line: 1, column: 5}

    上面代码有三次解构赋值,分别是对locstartline三个属性的解构赋值。注意,最后一次对line属性的解构赋值之中,只有line是变量,locstart都是模式,不是变量。
     
  • 相关阅读:
    Oracle中有大量的sniped会话
    Error 1130: Host '127.0.0.1' is not allowed to connect to this MySQL server
    汉字转换为拼音以及缩写(javascript)
    高效率随机删除数据(不重复)
    vs2010 舒服背景 优雅字体 配置
    mvc中的ViewData用到webfrom中去
    jquery ajax return值 没有返回 的解决方法
    zShowBox (图片放大展示jquery版 兼容性好)
    动感效果的TAB选项卡 jquery 插件
    loading 加载提示······
  • 原文地址:https://www.cnblogs.com/gshao/p/10111635.html
Copyright © 2011-2022 走看看