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 相关文章推荐
jQuery之网页换肤实现代码
Apr 30 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
小程序实现发表评论功能
Jul 06 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 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
咖啡语言
2021/03/03 咖啡文化
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
javascript实现雪花飘落效果
2020/08/19 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
一些网络技术方面的面试题
2014/05/01 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
总经理助理职责
2014/02/04 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
初中生物教学随笔
2015/08/15 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers