ES6新特性四:变量的解构赋值实例


Posted in Javascript onApril 21, 2017

本文实例讲述了ES6新特性之变量的解构赋值。分享给大家供大家参考,具体如下:

1. 数组的解构赋值

//① 可以从数组中提取值,按照对应位置,对变量赋值
var [a, b] = [1, 2]; //a = 1;b = 2
//② 下面是一些使用嵌套数组进行解构
var [d, [[c], f]] = [1, [[2], 3]];
var [,,third] = ["foo", "bar", "baz"];//third = "baz"
var [head, ...tail] = [1, 2, 3, 4];//head = 1;tail = [2, 3, 4]
//③不完全结构
var [x, y] = [1,2,6]; //x = 1;y = 2
//④ 解构赋值允许指定默认值
var [foo = true] = []; //foo = true
var [x, y='b'] = ['a'] // x='a', y='b'
var [x, y='b'] = ['a', undefined] // x='a', y='b'
//⑤ 解构不成功,变量的值就等于undefined
var [a6, a7] = [1]; //a7 = undefined

2. 对Set 的解构赋值

[a, b, c] = new Set(["a", "b", "c"])
console.log(a) // "a"

3. 对象的解构赋值

//对象的属性没有次序,变量必须与属性同名,才能取到正确的值
var { x, y } = { x: "aaa", y: "bbb" };//x = aaa, y = bbbb
var { c } = { a: "aaa", b: "bbb" }; // c = undefined
//严格遵守变量名与属性同名
var { d: e } = { d: "aaa", f: "bbb" }; //e = aaa
//指定默认值
var {x, y = 5} = {x: 1};// x = 1,y = 5

4. 用于遍历 Map

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
//获取键值对
for (let [key,value] of map) {
  console.log(key + " is " + value);
}
// 获取键名
for (let [key] of map) {
  console.log(key);
}
// 获取值
for (let [,value] of map) {
  console.log(value);
}

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
jQuery+pjax简单示例汇总
Apr 21 #jQuery
利用n工具轻松管理Node.js的版本
Apr 21 #Javascript
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
ES6新特性三: Generator(生成器)函数详解
Apr 21 #Javascript
Cookies 和 Session的详解及区别
Apr 21 #Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 #Javascript
原生javascript实现分页效果
Apr 21 #Javascript
You might like
日本十大惊悚动漫
2020/03/04 日漫
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
python简单实现刷新智联简历
2016/03/30 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
对Python3 序列解包详解
2019/02/16 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python和js交互调用的方法
2020/06/23 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
自主招生自荐书
2013/11/29 职场文书
保护母亲河倡议书
2014/04/14 职场文书
党员自我对照检查材料
2014/08/19 职场文书
成都人事代理协议书
2014/10/25 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python