美文网首页
5. 解构:使数据访问更便捷

5. 解构:使数据访问更便捷

作者: 莣忧草_3b53 | 来源:发表于2019-11-05 23:23 被阅读0次

    1. 为何使用解构功能

    let options = {
      options1: 1,
      options2: 2
    }
    let options1 = options.options1
    let options2 = options.options2
    
    如果options中的属性足够多,这样将会比较麻烦
    

    2. 对象解构

    let options = {
      options1: 1,
      options2: 2
    }
    let { options1, options2 } = options;
    options1 // 1
    options2 // 2
    

    注意: 如果使用var let 或者const解构声明变量,则必须要提供初始化程序(也就是等号右侧的值)。下面几行代码为错误示范

     let {option1, option2};  //语法错误
     var {option1, option2};  //语法错误
     const {option1, option2}; //语法错误
    
    2.1 解构赋值

    我们可以给变量赋值的时候使用解构语法。

    let node = {
      type: 'Identifier',
      name: 'foo'
    },
    type = 'Literal',
    name = 5;
    
    ({type, name} = {node}); 
    // 注意使用括号包裹,因为js引擎会将{}视为代码块,语法规定 代码块不能出现在赋值语句左侧。()则表示表达式
    type // Identifier
    name // foo
    
    let node = {
      type: 'Identifier',
      name: 'foo'
    },
    type = 'Literal',
    name = 5;
    
    function outputInfo(value) {
      console.log(value === node); // true
    }
    outputInfo({type, name} = {node}); 
    type // Identifier
    name // foo
    // 调用outputInfo使用了解构表达式,js中,表达式的值为右侧的值,所以传入的值就是node。
    // 在解构的过程中为type和name赋予了新值
    
    2.2 默认值

    解构中,如果不存在对应名称的值,会为undefined。

    let node = {
      type: 'Identifier',
      name: 'foo'
    },
    type = 'Literal',
    name = 5;
    ({type, name, value} = {node})
    type // Identifier
    name // foo
    value // undefined
    
    不过可以
    ({type, name, value=true} = {node})
    type // Identifier
    name // foo
    value // true
    
    2.3 为非同名局部变量赋值

    我如果想让名字不同的值对应起来,可以采用下面方法

    let node = {
      type: 'Identifier',
      name: 'foo'
    },
    type = 'Literal',
    name = 5;
    
    ({type, name} = {node})
    let {type: localType, name: localName} = {node}
    
    localType // Identifier
    localName // 5
    
    // 当然 我们也可以添加默认值
    let {type: localType, name: localName = "bar"} = {node}
    
    2.4 嵌套对象解构

    可以将拆解来获取信息

    let node = {
      loc: {
        start: {
          line: 1
        }
      }
    }
    let {loc: {start}} = node;
    // start.line = 1;
    let {loc: {start: localStart}} = node;
    // localStart.line = 1;
    

    在上面所有冒号前的标识符,都表示在对象中检索位置,右侧表示被赋值的变量名;
    但是如果冒号是花括号,则一位置要赋予的最终值嵌套在对象内部的更深层级中。

    3. 数组解构

    这个过程中,数组不会发生任何变化。

    let color = ['red', 'green', 'blue'];
    let [firstColor, secondColor] = color;
    firstColor // red;
    secondColor // green
    let [, , thirdColor] = color;
    thirdColor // blue
    
    3.1 解构赋值
    let color = ['red', 'green', 'blue'],
        firstColor = 'black',
        secondColor = 'purple';
    [firstColor, secondColor] = color;
    firstColor // red;
    secondColor // green
    

    可以用于两值交换

    let a = 1, b=2;
    [a, b] = [b, a];
    a // 2
    b // 1
    
    3.2 默认值
    let color = ['red'],
    let [firstColor, secondColor='green'] = color;
    firstColor // red;
    secondColor // green
    
    3.3 嵌套数组解构
    let color = ['red', ['green', 'lightGreen'], 'blue'],
    let [firstColor, [secondColor]] = color;
    firstColor // red;
    secondColor // green
    
    // 如果是
    let [firstColor, secondColor] = color;
    firstColor // red;
    secondColor // ["green", "lightGreen"]
    
    3.4 不定元素

    在之前的传参中就使用过。

    let color = ['red', 'green', 'blue'],
    
    // 如果是
    let [firstColor, ...restColor] = color;
    firstColor // red;
    restColor // [ 'green', 'blue']
    

    在es5中遗漏数组复制功能。经常使用concant克隆数组。eg:

    let color = ['red', 'green', 'blue'];
    let clonedColor = color.concat();
    clonedColor //  ['red', 'green', 'blue'];
    
    // es6
    [...clonedColor] = color;
    

    不定元素后添加逗号会, 报错。

    4. 混合解构

    let node = {
      loc: {
        start: {
          line: 1
        }
      },
      range: [0, 3]
    }
    let {loc: {start}, range: [startIndex]} = node;
    // start.line = 1;
    // startIndex = 0;
    

    5. 解构参数

    5.1 必须传值的解构参数
    function setItem (a, b, {c, d, e}) {
      
    }
    // setItem(1, 2) 会报错!!!
    // 因为在函数内部做了这个操作
    // let {c, d, e} = {c, d, e}; 如果后面没有值 会报错 我们可以使用默认值
    function setItem (a, b, {c, d, e} = {}) {
      
    }
    
    5.2 解构参数的默认值
    function setItem (a, b, {c, d, e} = {}) {
      
    }
    // 如果我们想给c, d, e赋予默认值呢?
    function setItem (a, b, {c, d, e} = {c: 1, d: 2, e: 3}) {
      
    }
    // 但是当只给c传了值呢?这样就不能使用 = 后面的默认值了。因此
    function setItem (a, b, {c:1, d:2, e:3} = {c: 1, d: 2, e: 3}) {
      
    }
    // 接下来消除冗余
    let items =  {c:1, d:2, e:3};
    function setItem (a, b, {c:items.c, d:items.d, e:items.e} = items) {
      
    }
    

    相关文章

      网友评论

          本文标题:5. 解构:使数据访问更便捷

          本文链接:https://www.haomeiwen.com/subject/rytzvctx.html