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 Tab 导航插件 (23个)
Jun 11 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
vue组件name的作用小结
May 23 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
vue实现户籍管理系统
May 29 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
jquery validate demo 基础
2015/10/29 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python的re模块使用方法详解
2019/07/26 Python
python计算导数并绘图的实例
2020/02/29 Python
css3的transition属性详解
2014/12/15 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
大学校务公开实施方案
2014/03/31 职场文书
房屋租赁协议书
2014/04/10 职场文书
煤矿安全承诺书
2014/05/22 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
内乡县衙导游词
2015/02/05 职场文书
小学教研工作总结2015
2015/05/13 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers