变量赋值的痛

  • 对象
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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

深入理解ES6之解构的更多相关文章

  1. 进军es6(2)---解构赋值

    本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久.目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需 ...

  2. ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?

    本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...

  3. ES6 对象解构

    ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...

  4. es6的解构赋值学习(1)

    相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...

  5. Es6 新增解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...

  6. ES6 之 解构赋值

    本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...

  7. ES6之解构赋值

    截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...

  8. 【读书笔记】【深入理解ES6】#5-解构:使数据访问更便捷

    ES6为对象和数组都添加了解构功能,将数据解构打散的过程变得更简单,可以从打散后更小的部分中获取所需信息. 对象解构 let node = { type: "Identifier" ...

  9. ES6多层解构

    const info = { person: { name: 'xiaobe', other: { age: 22, } }, song: 'rolling', } // 解构person的内容 co ...

随机推荐

  1. phpMyAdmin开启IP地址登录

    根本没有其他文章说的那么麻烦,又是修改配置文件,又是修改首页文件.在根目录下有个libraries文件夹,进去有个config.default.php文件,修改里面的AllowArbitrarySer ...

  2. python之os模块(os.path)

    我们在做自动化测试的时候,可能会遇到一些需要处理文件一些需求,那么我们可以通过直接写文件的目录进行操作,当然作为一名自动化测试工程师,怎么可能用这种方法?python中自带的有OS,我们可以通过os模 ...

  3. mysqlbinlog-Note

    binlog_format = mixedlog-bin = /data/mysql/mysql-binexpire_logs_days = 7 #binlog过期清理时间max_binlog_siz ...

  4. JS数组去掉某一个元素

    /**数组去掉某一个元素**/ Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index &g ...

  5. hibernate-positional-parameter-does-not-exist-1-in-query

    经过bug的排查,问题出在,scsj字段的赋值上; 通过字符串在数据库端生成即可:

  6. 2019年跨越速递Java工程师笔试题

    1.下面哪个选项可以用于JSP页面之间传递对象(A C) A application B page C session D error  E response 评语:这道题考察的是对JSP内置对象的了 ...

  7. FreeRTOS操作系统教程发布,支持F103,F407和F429,配套145个例子,1200页教程

    前言说明:1. 首先感谢大家对我们安富莱电子的支持. 2. FreeRTOS最大的优势就是开源免费,商业使用的话不需要用户公开源代码,也不存在任何版权问题,是当前小型嵌入式操作系统   市场使用率最高 ...

  8. Mybatis基本类型参数非空判断(异常:There is no getter for property...)

    先看一小段代码 <select id="queryByPhone" parameterType="java.lang.String" resultType ...

  9. fjnu2019第二次友谊赛 B题

    ### 题目链接 ### 题目大意: 给你一个 n * m 的地图以及小蛇蛇头的初始位置,告诉你它会往 上.下.左.右 四个方向走.若在走的过程中(包括结束时)会使得小蛇越界,则输出 "Ga ...

  10. Sql 中常用时间处理函数

    1.Sql 中常用时间处理函数  GETDATE()  返回当前的日期和时间 DATEPART()  返回日期/时间的单独部分 DATEADD()   返回日期中添加或减去指定的时间间隔 DATEDI ...