深入理解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 grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JS字符串截取函数实例
Dec 27 Javascript
javascript每日必学之循环
Feb 19 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
Admin generator, filters and I18n
2011/10/06 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python3.4中清屏的处理方法
2020/07/06 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
家具促销活动方案
2014/02/16 职场文书
网络编辑求职信
2014/04/30 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
毕业证委托书范文
2014/09/26 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
何玥事迹观后感
2015/06/16 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
python实现简易名片管理系统
2021/04/11 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python