深入理解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 设置文本框中焦点的位置
Nov 20 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
Vue 进阶之路(三)
Apr 18 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
其他功能
2006/10/09 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
php使用google地图应用实例
2014/12/31 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
Python中使用ElementTree解析XML示例
2015/06/02 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python如何将模块打包并发布
2020/08/30 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
写出二分查找算法的两种实现
2013/05/13 面试题
烹调加工管理制度
2014/02/04 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
少儿节目主持串词
2014/04/02 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
篮球比赛策划方案
2014/06/05 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
交通事故和解协议书
2014/09/25 职场文书
毕业论文致谢词
2015/05/14 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
Go语言测试库testify使用学习
2022/07/23 Golang