欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

深入理解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'
  • 注意点

    {type,name} = node);//{}在js中作为代码块,单独使用加等号会报错会报错
    
    • 使用var、let、const对对象进行解构时,必须提供初始化器(即等号右边的值)

    • 不使用var、let、const赋值时,需要将解构语句使用()进行包裹

  • 默认值
    当你使用解构赋值语句时,如果指定的本地变量没有同名属性,那么该变量会被赋值为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
  • 注意点

    let a = 3;
    let b = 4;
    [b,a] = [a,b];
    console.log(a);//4
    console.log(b);//3
    
    • 使用var、let、const对对象进行解构时,必须提供初始化器(即等号右边的值)

    • 不使用var、let、const赋值时,需要将解构语句使用()进行包裹,因为数组的[],与{}是不同的

    • 对互换两个变量的值很有用,如排序算法中使用的,可以直接用

  • 默认值
    数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或其值为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的解构赋值的内容,主要区分对象解构与数组解构的形式,整体上很好使用,刚开始有点蒙,后面发现其实还是很有规律的对象字面量与数组字面量的使用,当然,注意点是要划重点的,记录到这,各位好梦!

来自  https://www.jianshu.com/p/ab4e4338047b

普通分类: