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开发技术大全-第1章javascript概述
Jul 03 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
网络传输协议(http协议)
Nov 18 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript add event remove event
2008/04/07 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
python的re正则表达式实例代码
2018/01/24 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
Pytorch的mean和std调查实例
2020/01/02 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
企业申诉管理制度
2014/01/30 职场文书
高中军训感言800字
2014/03/05 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
使用Python开发冰球小游戏
2022/04/30 Python
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python