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 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
js tab效果的实现代码
Dec 26 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 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
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
javascript 数组排序函数
2009/08/20 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python实现自动发送邮件功能
2021/03/02 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python实现两个文件夹的同步
2019/08/29 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Python timeit模块原理及使用方法
2020/10/10 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
迪奥美国官网:Dior美国
2019/12/07 全球购物
长青弘远的面试题
2012/06/09 面试题
夜大自我鉴定
2013/10/31 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
面试后的感谢信范文
2014/02/01 职场文书
白血病募捐倡议书
2014/05/14 职场文书
暑期学习心得体会
2014/09/02 职场文书
爱的承诺书
2015/01/20 职场文书