当前位置:首页 > 日记 > 正文

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

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

本文实例讲述了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的程序设计有所帮助。

相关文章

ps制作拟物胶囊药丸icon图标教程

ps制作拟物胶囊药丸icon图标教程

图标,药丸,胶囊,教程,电脑软件,这个拟物ps胶囊的原图来自insfire studios.因为器新奇的创意和一些细致的细节,所以我临摹了这个作品,并且将其做成教程,将这个ps“药丸”教程分享给大家。12 3 4 阅读全文1 23 4 阅读全文1 2 34 阅…

Photoshop制作非常酷的都市战争海

Photoshop制作非常酷的都市战争海

海报,战争,都市,电脑软件,Photoshop,作者设计水平非常厉害,效果不管是构图、用色、细节、光影等都表现的非常到位;新手练习的时候可以学到不少东西。最终效果一、头脑风暴 头脑风暴是为了提炼关键词找素材,这次我们做的事都市战争合成海报,所以…

WPS中如何使用免费的稻壳模板

WPS中如何使用免费的稻壳模板

模板,稻壳,如何使用,电脑软件,WPS,  wps中很多漂亮的模板需要付费,但是我们可以使用稻壳模板,只需要签到赚稻米就可以了。以下是小编为您带来的关于WPS免费使用稻壳模板,希望对您有所帮助。WPS免费使用稻壳模板1、WPS的 PPT word 表格 都有…

深入浅出es6模板字符串

深入浅出es6模板字符串

字符串,模板,深入浅出,电脑软件,本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面。举个栗子$('#result').append( 'There are <b>' + basket.count + '</b> ' + '…

ps怎么导图色板? ps色板新增颜色的

ps怎么导图色板? ps色板新增颜色的

教程,颜色,电脑软件,ps,Photoshop强大的功能令我们对该软件痴迷,当我们使用该软件进行图片效果时,常常需要使用一些多样的颜色色板,这时我们该怎么办呢,今天我就带领大家来看看,Photoshop如何导入色板的吧。如图所示:软件名称:Adobe Photoshop 8.0…

wps文字怎么同时输入上下标wps文字

wps文字怎么同时输入上下标wps文字

输入,文字,方法,下标,标的,  wps文字怎么同时输入上下标?WPS文字是现代办公文档编辑的首选软件,因此我们都应该熟练掌握WPS文字的基本功能,精通WPS文字的操作技巧;如何实现上下标同时输入?直接在右键字体选项里设置是无法实现同时输入的,…

Vue 组件间的样式冲突污染

Vue 组件间的样式冲突污染

冲突,污染,组件,样式,电脑软件,一、污染是如何产生的?得益于 Vue-loader,在 Vue 中可以使用类似于 Web Component 的组件化写法, <template></template><style></style><script></script> ,在大多数情况下,我们希望组件间定义的样式是相互隔离…

利用Node.js编写跨平台的spawn语句

利用Node.js编写跨平台的spawn语句

语句,跨平台,详解,电脑软件,Node,前言Node.js 是跨平台的,也就是说它能运行在 Windows、OSX 和 Linux 平台上。很多 Node.js 开发者都是在 OSX 上做开发的,然后再将代码部署到 Linux 服务器上。由于 OSX 和 Linux 都是基于 Unix 的,因此两者共…

Bootstrap滚动监听组件scrollspy.j

Bootstrap滚动监听组件scrollspy.j

组件,使用方法,详解,电脑软件,Bootstrap,其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮。实现功能1、当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项2、导…

PS鼠绘一把超逼真的金属质感弯刀

PS鼠绘一把超逼真的金属质感弯刀

弯刀,质感,超逼真,电脑软件,PS,这篇教程教的PS鼠绘学习者们使用PS鼠绘超强质感弯刀,教程主要介绍的使用PS来体现弯刀的金属质感和锋利。对于学习鼠绘的朋友来说还是挺有用的,推荐过来和的朋友们一起分享,一起学习了,我们先来看看最终的效果图:下…

创建一般js对象的几种方式

创建一般js对象的几种方式

对象,几种,方式,电脑软件,js,1.对象字面量创建对象var obj = { a:1,b:2 };注意:对象字面量是一个表达式,这种表达式每次运算都会创建并初始化一个新对象,并计算这个新对象的每个属性值。所以如果在循环体内使用对象字面量,每次循环时都会创建新…

ai怎么绘制多重线条?

ai怎么绘制多重线条?

绘制,多重,线条,电脑软件,ai,AI线条的变化可以绘制出很多的图形,下面我们就来看看简单的例子。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:205MB更新时间:2014-05-111、新建一个图层2、选矩形工具画矩形设置…