深入理解ES6之数据解构的用法


Posted in Javascript onJanuary 13, 2018

一 对象解构

对象解构语法在赋值语句的左侧使用了对象字面量

let node = {
  type: true,
  name: false
}

//既声明又赋值
let {
  type,
  name
} = node;

//或者先声明再赋值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false

type与name标识符既声明了本地变量,也读取了对象的相应属性值。

解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时,会抛出错误。

默认值

当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为undefined

let node = {
  type: true,
  name: false
},
  type, name, value;
({type,value,name} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//undefined

你可以选择性地定义一个默认值,以便在指定属性不存在时使用该值。

let node = {
    type: true,
    name: false
  },
  type, name, value;
({
  type,
  value = true,
  name
} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//true

赋值给不同的本地变量名

let node = {
  type: true,
  name: false,
  value: "dd"
}
let {
  type: localType,
  name: localName,
  value: localValue = "cc"
} = node;
console.log(localType);
console.log(localName);
console.log(localValue);

type:localType这种语法表示要读取名为type的属性,并把它的值存储在变量localType上。该语法与传统对象字面量的语法相反

嵌套的对象结构

let node = {
type: "Identifier",
name: "foo",
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
}
}

let {
loc: localL,
loc: {
  start: localS,
  end: localE
}
} = node;

console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}

当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中(loc: {start: localS,end: localE})

二 数据解构

数组解构的语法看起来跟对象解构非常相似,只是将对象字面量换成了数组字面量。

let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow

你也可以在解构模式中忽略一些项,并只给感兴趣的项提供变量名。

let colors = ["red","green","blue"];

let [,,thirdC] = colors;
console.log(thirdC);//blue

thirdC之前的逗号是为数组前面的项提供的占位符。使用这种方法,你就可以轻易从数组任意位置取出值,而无需给其他项提供名称。

解构赋值

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

数组解构有一个非常独特的用例,能轻易的互换两个变量的值。

let a =1,b =2;
[a,b] = [b,a];
console.log(a);//2
console.log(b);//1

嵌套的解构

let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue

剩余项

let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue

使用剩余项可以进行数组克隆

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

三 混合解构

let node = {
type: "Identifier",
name: 'foo',
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
},
range: [0, 3]
}

let {
type,
name: localName,
loc: {
  start: {
    line: ll
  },
  end: {
    column: col
  }
},
range: [, second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
vue-router传参用法详解
Jan 19 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue-model实现简易计算器
Aug 17 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 #Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 #Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 #Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 #Javascript
js 索引下标之li集合绑定点击事件
Jan 12 #Javascript
简单的Vue SSR的示例代码
Jan 12 #Javascript
详解如何在react中搭建d3力导向图
Jan 12 #Javascript
You might like
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
python第三方库学习笔记
2020/02/07 Python
Python @property原理解析和用法实例
2020/02/11 Python
python实现连连看游戏
2020/02/14 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
企业务虚会发言材料
2014/10/20 职场文书
2015元旦标语横幅
2014/12/09 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
员工辞职信范文
2015/03/02 职场文书
求职简历自我评价范文
2015/03/10 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
病假条格式范文
2015/08/17 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
MySQL触发器的使用
2021/05/24 MySQL
Java实现注册登录跳转
2022/06/16 Java/Android