深入理解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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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代码
2008/04/09 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
有趣的python小程序分享
2017/12/05 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python数组并集交集补集代码实例
2020/02/18 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
荣耀商城:HIHONOR
2020/11/03 全球购物
学校隐患排查制度
2015/08/05 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL
python_tkinter事件类型详情
2022/03/20 Python
Python中itertools库的四个函数介绍
2022/04/06 Python