深入理解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 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 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面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
Python中反射和描述器总结
2018/09/23 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python3字符串输出常见面试题总结
2020/12/01 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
七一建党节演讲稿
2014/09/11 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
党员批评与自我批评
2014/10/15 职场文书
班主任先进事迹材料
2014/12/17 职场文书
放牛班的春天观后感
2015/06/01 职场文书
军训后的感想
2015/08/07 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
Android Studio 计算器开发
2022/05/20 Java/Android
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python