深入理解ES6之解构

变量赋值的痛

• 对象

let o = {a:23,b:34};
let a = o.a;
let b = o.b;

如上文代码，我们经常会遇到在各种场合需要获取对象中的值的场景，舒服一点的是获取单个属性，很多时候，要获取的是接口中的各个对象，在ES5中，我们不得不如上文一样，将同一行代码复制多遍

• 数组

let s = [1,2,3,4];
let a = s[0];
let b = s[2];

如上文，所以ES6提供了处理这些场景的方法：解构赋值

解构

destructuring：百度百科的意思是结构分解，ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

• 作用
  这是一种将数据结构分解为更小的部分的过程，从而达到简化提取信息的目的。

对象解构

• 形式
  对象解构语法是在赋值对象的左侧使用了对象字面量，如：
  同名变量解构赋值

let node = {
        type : 'identifier',
        name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'

不同变量解构赋值

let node = {
        type : 'identifier',
        name : 'foo'
};
let {type:localType,name:localName} = node;
console.log(localType);//'identifier'
console.log(localName);//'foo'

• 注意点
  • 使用var、let、const对对象进行解构时，必须提供初始化器（即等号右边的值）
  • 不使用var、let、const赋值时，需要将解构语句使用（）进行包裹

   （{type，name} = node);//{}在js中作为代码块，单独使用加等号会报错会报错
  

• 默认值
  当你使用解构赋值语句时，如果指定的本地变量没有同名属性，那么该变量会被赋值为undefined，可以对其进行指定默认值

   let node = {
        type : 'identifier',
        name : 'foo'
    };
    let {type,name,val} = node;
    console.log(val);//undefined
    ({type,name,val = '234'}  = node)
    console.log(val);//'234'
  

• 嵌套的对象解构
  使用类似于对象字面量的语法，可以深入到嵌套的对象结构中去提取你想要的数据

 let node = {
     type: "Identifier",
     name: "foo",
     loc: {
       start: {
             line: 1,
             column: 1
        },
       end: {
             line: 1,
             column: 4
        }
    }
};
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1

这种方法使得本地变量start被赋值node中的loc的start对象，值得注意的是这种操作与直接node.loc.start的赋值是一致的，所以要注意值类型与引用类型的区别

• 注意点:此语句中并没有任何变量被绑定

   // 没有变量被声明！
  let { loc: {} } = node;

数组解构

• 形式
  数组解构的语法看起来与对象解构非常相似，只是将对象字面量替换成了数组字面量。数组解构时，解构作用在数组内部的位置上，而不是作用在对象的具名属性上

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

所以，对于数组解构，最主要在于位置的固定，当然，如果不想赋值某些值，可以直接略过，如：

var s = [1,2,3,4,5];
let [,,T] = s;
console,log(T);//3

• 注意点
  • 使用var、let、const对对象进行解构时，必须提供初始化器（即等号右边的值）
  • 不使用var、let、const赋值时，需要将解构语句使用（）进行包裹，因为数组的[]，与{}是不同的
  • 对互换两个变量的值很有用，如排序算法中使用的，可以直接用

  let a = 3;
  let b = 4;
  [b,a] = [a,b];
  console.log(a);//4
  console.log(b);//3
  

• 默认值
  数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或其值为undefined ，那么该默认值就会被使用

  let colors = [ "red" ];
  let [ firstColor, secondColor = "green" ] = colors;
  console.log(firstColor); // "red"
  console.log(secondColor); // "green"
  

• 嵌套的数组结构
  与对象类似，只是仍使用的是数组字面量

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
console.log(secondColor); // "green"

• 剩余项
  数组解构有个与函数的剩余参数类似的、名为剩余项（ rest items ）的概
  念，它使用" ..." 语法来将剩余的项目赋值给一个指定的变量

  let colors = [ "red", "green", "blue" ];
  let [ firstColor, ...restColors ] = colors;
  console.log(firstColor); // "red"
  console.log(restColors.length); // 2
  console.log(restColors[0]); // "green"
  console.log(restColors[1]); // "blue"

混合解构

既有函数的解构，也有数组的解构，也只需要对象的创建出字面量来赋值即可，如：

let node = {
    type: "Identifier",
    loc: {
      start: {
      line: 1,
      column: 1
       }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
  } = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

实际使用- 参数解构

如：

// options 上的属性表示附加参数
function setCookie(name, value, options) {
       options = options || {};
       let secure = options.secure,
       path = options.path,
       domain = options.domain,
       expires = options.expires;
       // 设置 cookie 的代码
}
//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}

总结

以上，便是学到的ES6的解构赋值的内容，主要区分对象解构与数组解构的形式，整体上很好使用，刚开始有点蒙，后面发现其实还是很有规律的对象字面量与数组字面量的使用，当然，注意点是要划重点的，记录到这，各位好梦！

 

 

9人点赞

 

ES6

 

 

作者：紫陌于微
链接：https://www.jianshu.com/p/ab4e4338047b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。