深入理解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 相关文章推荐
基于jQuery的360图片展示实现代码
Jun 14 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 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 和 MySQL 基础教程(二)
2006/10/09 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
js module大战
2019/04/19 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python组合无重复三位数的实例
2018/11/13 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python中if有多个条件处理方法
2020/02/26 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python 下划线的不同用法
2020/10/24 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
Why we need EJB
2016/10/20 面试题
信访工作经验交流材料
2014/05/23 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
付款承诺函范文
2015/01/21 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书