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 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
修复IE9&safari 的sort方法
Oct 21 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 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/06 日漫
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
js自带函数备忘 数组
2006/12/29 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
HTML文本属性&颜色控制属性的实现
2019/12/17 HTML / CSS
九年级英语教学反思
2014/01/31 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
公务员政审材料范文
2014/12/23 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书