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 相关文章推荐
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
JavaScript WeakMap使用详解
Feb 05 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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脚本的10个技巧(4)
2006/10/09 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python Series从0开始索引的方法
2018/11/06 Python
python实现简单名片管理系统
2018/11/30 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python 实现dict转json并保存文件
2019/12/05 Python
python实现滑雪者小游戏
2020/02/22 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
党校培训自我鉴定
2014/02/01 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
财政局个人年终总结
2015/03/03 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书