ES6解构赋值的功能与用途实例分析


Posted in Javascript onOctober 31, 2017

本文实例讲述了ES6解构赋值的功能与用途。分享给大家供大家参考,具体如下:

(1)交换变量的值

[x, y] = [y, x];

上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。

(2)从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

// 返回一个数组
function example() {
 return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一个对象
function example() {
 return {
  foo: 1,
  bar: 2
 };
}
var { foo, bar } = example();

(3)函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

(4)提取JSON数据

解构赋值对提取JSON对象中的数据,尤其有用。

var jsonData = {
 id: 42,
 status: "OK",
 data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

上面代码可以快速提取JSON数据的值。

(5)函数参数的默认值

jQuery.ajax = function (url, {
 async = true,
 beforeSend = function () {},
 cache = true,
 complete = function () {},
 crossDomain = false,
 global = true,
 // ... more config
}) {
 // ... do stuff
};

指定参数的默认值,就避免了在函数体内部再写

var foo = config.foo || 'default foo';

这样的语句。

(6)遍历Map结构

任何部署了Iterator接口的对象,都可以用for…of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
 console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名,或者只想获取键值,可以写成下面这样。

// 获取键名
for (let [key] of map) {
 // ...
}
// 获取键值
for (let [,value] of map) {
 // ...
}

(7)输入模块的指定方法

加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

更多相关内容可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程》

希望本文所述对大家基于ECMAScript的程序设计有所帮助。

Javascript 相关文章推荐
JqGrid web打印实现代码
May 31 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
深入理解js中this的用法
May 28 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
js原生日历的实例(推荐)
Oct 31 #Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 #Javascript
详解RequireJs官方使用教程
Oct 31 #Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 #Javascript
ES6解构赋值实例详解
Oct 31 #Javascript
js 获取json数组里面数组的长度实例
Oct 31 #Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
You might like
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
javascript常用函数(1)
2015/11/04 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Python常用模块介绍
2014/11/21 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Python partial函数原理及用法解析
2019/12/11 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
成品仓管员岗位职责
2013/12/11 职场文书
运动会获奖感言
2014/02/11 职场文书
3分钟演讲稿
2014/04/30 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书