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 相关文章推荐
js 与或运算符 || && 妙用
Dec 09 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
简单实现js浮动框
Dec 13 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 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中检查文件或目录是否存在的代码小结
2012/10/22 PHP
php常见的魔术方法详解
2014/12/25 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python人脸识别初探
2017/12/21 Python
python 输出上个月的月末日期实例
2018/04/11 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
财务工作个人求职的自我评价
2013/12/19 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
车间主任岗位职责
2014/03/16 职场文书
品德评语大全
2014/05/05 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
服装设计专业求职信
2014/06/16 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
生产设备维护保养制度
2015/08/06 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python