zoukankan      html  css  js  c++  java
  • 【ES6 】ES6 解构赋值--对象解构赋值

    对象的解构与数组有一个重要的不同。

    数组的元素是按次序排列的,变量的取值由它的位置决定

    而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    基本用法

    •  如果解构失败,变量的值等于undefined。 
      let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
      foo // "aaa"
      bar // "bbb"
      
      let { baz } = { foo: 'aaa', bar: 'bbb' };
      baz // undefined
    • 如果变量名与属性名不一致,必须写成下面这样。
      let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
      baz // "aaa"
      foo // error: foo is not defined

      上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo

    对象解构默认值

    • 默认值生效的条件是,对象的属性值严格等于undefined
      var {x = 3} = {};
      x // 3
      
      var {x, y = 5} = {x: 1};
      x // 1
      y // 5
      
      var {x: y = 3} = {};
      y // 3
      
      var {x: y = 3} = {x: 5};
      y // 5
      
      var { message: msg = 'Something went wrong' } = {};
      msg // "Something went wrong"
      
      var {x = 3} = {x: undefined};
      x // 3
      
      var {x = 3} = {x: null};
      x // null
    • 如果要将一个已经声明的变量用于解构赋值,必须非常小心。
      // 错误的写法
      let x;
      {x} = {x: 1};
      // SyntaxError: syntax error上面代码的写法会报错,
      //因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。
      //只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。
      // 正确的写法 let x; ({x} = {x: 1});
    • 解构赋值允许等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
      ({} = [true, false]);
      ({} = 'abc');
      ({} = []);

      上面的表达式虽然毫无意义,但是语法是合法的,可以执行。

    • 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构
      let arr = [1, 2, 3];
      let {0 : first, [arr.length - 1] : last} = arr;
      first // 1
      last // 3
  • 相关阅读:
    go系列之数组
    node.js 下依赖Express 实现post 4种方式提交参数
    javascript的数据类型
    工作中常用的mysql操作
    Linux如何查看进程、杀死进程、启动进程等常用命令
    局域网两台笔记本如何使用svn
    固定电话的验证
    phpexcel来做表格导出(多个工作sheet)
    char.js专门用来做数据统计图
    Out of resources when opening file 错误解决
  • 原文地址:https://www.cnblogs.com/websmile/p/11528527.html
Copyright © 2011-2022 走看看