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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
jQuery阻止同类型事件小结
2013/04/19 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python中将字典转换为列表的方法
2016/09/21 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python实现猜单词游戏
2020/05/22 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
行政经理岗位职责
2013/11/09 职场文书
品质主管的岗位职责
2013/12/04 职场文书
农场厂长岗位职责
2013/12/28 职场文书
项目总经理岗位职责
2014/02/14 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
物流专业自荐信
2014/05/23 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
六一儿童节开幕词
2015/01/29 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
放射科岗位职责
2015/02/14 职场文书
68句权威创业名言
2019/08/26 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python