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 程序编码规范
Nov 23 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
Angular 多模块项目构建过程
Feb 13 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python实现视频读取和转化图片
2019/12/10 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
关于Python错误重试方法总结
2021/01/03 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
谢师宴家长致辞
2015/07/27 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
作文之亲情600字
2019/09/23 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
python计算列表元素与乘积详情
2022/08/05 Python