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

在Javascript的6版解析解构的任务

在Javascript的6版解析解构的任务
什么是解构任务

解构任务允许您使用类似数组或对象文字的语法将数组和对象的属性值赋给一系列变量,这种语法比传统的属性访问更简洁明了。

在没有解构赋值的情况下,数组的前三项被访问:

VaR首先somearray { 0 };
无功二= somearray { 1 };
功第三= somearray { 2 };

VaR首先somearray { 0 };
无功二= somearray { 1 };
功第三= somearray { 2 };
在解构任务之后,相应的代码变得更加简洁易读:

var {第一,第二,第三} = somearray;

var {第一,第二,第三} = somearray;
SpiderMonkey(Firefox的Javascript引擎)支持大部分的解构分配的特点,但它是不完整的。

数组和一个解构对象分配

我们已经看到了上面的数组解构赋值的一个例子。语法的一般形式是:

{ variable1,variable2,…,variablen } =阵列;

{ variable1,variable2,…,variablen } =阵列;
这将指定数组中variable1到variablen对应项。如果您需要在同一时间声明变量,可以在表达式之前添加VaR、LET或const关键字。

var { variable1,variable2,…,variablen } =阵列;
让{ variable1,variable2,…,variablen } =阵列;
const { variable1,variable2,…,variablen } =阵列;

var { variable1,variable2,…,variablen } =阵列;
让{ variable1,variable2,…,variablen } =阵列;
const { variable1,variable2,…,variablen } =阵列;
事实上,还可以嵌套任何深度:

var { { { } foo,酒吧,巴兹} } = { 1,3 } { 2 } {,};
console.log(Foo);
1
console.log(酒吧);
2
console.log(Baz);
3

var { { { } foo,酒吧,巴兹} } = { 1,3 } { 2 } {,};
console.log(Foo);
1
console.log(酒吧);
2
console.log(Baz);
3
此外,还可以跳过数组中的某些项。

{第三,}
(第三)console.log;
/ / 巴兹
{第三,}
(第三)console.log;
/ / 巴兹

还可以使用REST表达式来捕获数组中的剩余项:

var,…尾} { 1, 2, 3,4 };
console.log(尾);
{ { 2, 3, 4 }

var,…尾} { 1, 2, 3,4 };
console.log(尾);
{ { 2, 3, 4 }
如果数组超过边界或访问数组中不存在的项,则使用数组索引访问相同的值:未定义的。

console.log({ } { 0 });
未定义

丢失的} { };
console.log(失踪);
未定义

console.log({ } { 0 });
未定义

丢失的} { };
console.log(失踪);
未定义

注意数组赋值也适用于ergodicable对象解构:

功能*小谎(){
var a=0;
var b=1;
当(真){
产量;
{ A,B,},A,B,};
}
}

var {第一,二,第三,第四,第五,第六} =谎言();
(第六)console.log;
5

功能*小谎(){
var a=0;
var b=1;
当(真){
产量;
{ A,B,},A,B,};
}
}

var {第一,二,第三,第四,第五,第六} =谎言();
(第六)console.log;
5

对象的解构赋值

对象的解构赋值允许您将变量绑定到对象的不同属性值。指定绑定属性名,然后绑定到变量:

VaR robota = {姓名:弯曲};
无功robotb = {姓名:柔性};

var {姓名:NAMEA } =机器人;
var { } = robotb名称:全国船用发动机建造商协会;

console.log(NAMEA);

console.log(全国船用发动机建造商协会);
VaR robota = {姓名:弯曲};
无功robotb = {姓名:柔性};

var {姓名:NAMEA } =机器人;
var { } = robotb名称:全国船用发动机建造商协会;

console.log(NAMEA);

console.log(全国船用发动机建造商协会);
当绑定属性名与接收到的属性值的变量名相同时,有一个语法糖:

var { } = { foo foo,bar:也许你
console.log(Foo);
/ / 都
console.log(酒吧);
/ / 乱数假文

var { } = { foo foo,bar:也许你
console.log(Foo);
/ / 都
console.log(酒吧);
/ / 乱数假文
像数组一样,它也可以嵌套:

无功complicatedobj = { {
ArrayProp:{
他们
{二:B}
}
};

{ } { var arrayprop:第一{二= complicatedobj,} };

Console.log(一);
/ / 扎普
console.log(二);
/ / 无所遁形

无功complicatedobj = { {
ArrayProp:{
他们
{二:B}
}
};

{ } { var arrayprop:第一{二= complicatedobj,} };

Console.log(一);
/ / 扎普
console.log(二);
/ / 无所遁形

当对一个不存在的属性,你会得到不确定的:

丢失的} { };
console.log(失踪);
未定义

丢失的} { };
console.log(失踪);
未定义
对对象的解构赋值有一个潜在的陷阱,赋值时没有声明变量(没有VaR,让,或const关键字)。

{ } = {爆破爆破:10 };
语法错误

{ } = {爆破爆破:10 };
语法错误
这是因为Javascript语法告诉引擎,以{从{开始的任何语句都是语句块(例如,{ }是合法语句块)。解决方法是把整个句子用一对括号括起来。

({安全} { });
无错误

({安全} { });
无错误
其他情况

当您试图解构null或未定义时,您将得到类型错误:
var { } = null爆破;
空没有属性 / /列表:

var { } = null爆破;
空没有属性 / /列表:

但是,您可以解构其他基本类型(布尔、字符串和数字)并获得未定义:

var {跆拳道} =楠;
console.log(WTF);
未定义
var {跆拳道} =楠;
console.log(WTF);
未定义

结果可能会给你一个惊喜,但事实上,原因很简单,当对象被解构和分配,即解构的对象将转换为对象。除了空的和不确定的其他类型可以强制转换成对象。当一个数组的结构分配,即解构的对象有一个ergodicer。

默认值

可以为不存在的属性指定默认值:

var;
console.log(失踪);
/真

消息:错误};
console.log(MSG);
出了什么问题

3;
console.log(X);
3

var;
console.log(失踪);
/真

消息:错误};
console.log(MSG);
出了什么问题

3;
console.log(X);
3

实际应用

功能参数

作为开发人员,我们经常使用多属性对象作为函数参数来实现更灵活的API,而不是让API用户记住某些特定的序列参数,我们可以使用对象的解构赋值避免在每次使用参数时访问属性:

功能removebreakpoint({ URL、线、柱}){

}

功能removebreakpoint({ URL、线、柱}){

}
配置对象

完善上面的例子,我们可以为对象的默认值属性被解构,这是非常实用的那些配置参数的对象,因为很多配置项目有一个合理的默认值。例如,对jQuery的Ajax方法的第二个参数是一个配置对象,我们可以用这种方式实施:

jquery.ajax =功能(URL,{
async =真,
beforesend =空,
缓存=真,
完整的=空,
跨域= false,
全局=真,
更多配置…
{ })
做某事…
};

jquery.ajax =功能(URL,{
async =真,
beforesend =空,
缓存=真,
完整的=空,
跨域= false,
全局=真,
更多配置…
{ })
做某事…
};
这避免了类似这样的代码:复制VaR foo = config.foo thedefaultfoo | |;。

与迭代器一起使用

当遍历映射对象时,我们可以使用解构赋值遍历{键、值}:

新地图();
map.set(窗口,全球);
map.set(文件,文件);

对于(映射的键、值}){
console.log(键+是+价值);
}
窗口}是全局 对象
这是文件 / }或{对象
新地图();
map.set(窗口,全球);
map.set(文件,文件);

对于(映射的键、值}){
console.log(键+是+价值);
}
窗口}是全局 对象
这是文件 / }或{对象

仅遍历键:

对于(映射的{键}){

}
对于(映射的{键}){

}

仅遍历值:
对于(映射的{值}){

}
对于(映射的{值}){

}

返回多个值

返回一个数组,由解构赋值提取到返回值:

功能returnmultiplevalues(){
返回{ 1, 2 };
}
var { } = returnmultiplevalues foo,bar();
功能returnmultiplevalues(){
返回{ 1, 2 };
}
var { } = returnmultiplevalues foo,bar();

或者,返回具有键值对的对象:

功能returnmultiplevalues(){
返回{
美孚:1,
2条:
};
}
var { } = returnmultiplevalues foo,bar();
功能returnmultiplevalues(){
返回{
美孚:1,
Bar: 2
};
}
var { } = returnmultiplevalues foo,bar();

这两种方法都比使用中间变量更好。

功能returnmultiplevalues(){
返回{
美孚:1,
2条:
};
}
VaR的温度= returnmultiplevalues();
变量foo = temp.foo;
VaR吧= temp.bar;

功能returnmultiplevalues(){
返回{
美孚:1,
2条:
};
}
VaR的温度= returnmultiplevalues();
变量foo = temp.foo;
VaR吧= temp.bar;
使用延续类型:

功能returnmultiplevalues(K){
K(1, 2);
}
returnmultiplevalues((foo,bar)= >…);
功能returnmultiplevalues(K){
K(1, 2);
}
returnmultiplevalues((foo,bar)= >…);

导入指定的部分CommonJS模块

你还没有使用ES6模块呢,这至少CommonJS。当导入CommonJS模块,模块提供的方法可能比你实际使用。与解构的任务,你可以指定你需要使用模块部分:

{ SourceNode } = const sourcemapconsumer,要求(源图);

{ SourceNode } = const sourcemapconsumer,要求(源图);
如果你使用ES6模块机制,你可以看到在进口报关语法相似。

结论

我们知道解构在很多场景中都是有用的,在Mozilla,我们有很多经验,Lars Hansen 10年前将解构任务引入歌剧。布兰登·艾奇还增加了支持Firefox后有轻微的延迟。它最初出现在Firefox 2中,因此,解构任务已经渗透到我们日常使用的js中,悄悄地使我们的代码变得更短而整洁。

相关文章

ps用笔刷制作梦幻星云

ps用笔刷制作梦幻星云

星云,梦幻,电脑软件,ps,作者在制作人物时非常注重细节。在制作文本之前,在做出初步的虚幻选择区域之前对文本进行模糊处理。然后,用不同的例子,刷和粒子相加,大颗粒可以适当地处理高斯模糊。 当作者用词anexceptionaleyefordetail明星,之前的文…

空间微语录说,内心温暖足以开启QQ空

空间微语录说,内心温暖足以开启QQ空

空间,语录,内心,温暖,电脑软件,把空间微语录,写下人生的愤怒与悲伤,酸甜,记录自己的心情变化。 只有当你的心足够温暖,才开始爱,这样你才能照亮两个人的世界。最孤独无助的人不去爱,即使真的需要一点温暖。如果一颗冰冷孤独的心,爱是最好的。但那…

为什么word文档不显示的常见问题

为什么word文档不显示的常见问题

文档,常见问题,显示,电脑软件,word,1,可能是因为图片框的开口;查看选项。如果选择此选项,当文档中包含的图片打开,轮廓将由图像替换加快滚动速度,显示图片,点击菜单上的选项;单击;观;tab,然后清除图片框复选框;。 2,可能是由于关闭;图形查看选项。当一个…

PS图象处理软件创造了一个不平衡的

PS图象处理软件创造了一个不平衡的

不平衡,图象,银色,处理软件,创造了,制作不平等的文本是很麻烦的,基本上每一个凹部都要渲染高光和阴影,全部由手工完成,过渡部分需要柔化处理,这样文本的纹理是自然的。 最终效果 1。构建一个800×600像素的画布,选择渐变工具,将颜色设置为黑白,…

ai缩放笔划和偏爱效果的图形介绍实

ai缩放笔划和偏爱效果的图形介绍实

缩放,图形,笔划,实例,效果,本教程是介绍第一个选项方法和图形缩放效果的ai,很好的教程,值得学习,推荐,爱好的朋友一起学习。 这个例子是一个小把戏,我就遇到过这样的问题,作品在图形缩放操作完成时,所以不会中风的影响放大。搜索后,找到一个解决方…

何时激活手机令牌,何时继续绑定常见

何时激活手机令牌,何时继续绑定常见

绑定,令牌,激活,常见,电脑软件,手机令牌何时使用激活;何时选择继续绑定 如果您的手机安装成功,它还没有绑定到QQ号,请选择激活; 如果你的手机已经安装了手机令牌并成功绑定了一个QQ号码,你可以选择继续绑定其他QQ。…

setTimeout在Javascript中使用指南

setTimeout在Javascript中使用指南

使用指南,电脑软件,setTimeout,Javascript,setTimeout在Javascript中使用指南 * 1 /方法 函数变慢({){ (15s弹出警报!; } setTimeout(减缓() 2 /方法 函数变慢({){ (15s弹出警报!; } setTimeout(减速,5000); * / 3 /方法 函数变慢({){ (15s弹出警报!; } setTimeout()函…

js实现简单的单位随机彩票(0-9)

js实现简单的单位随机彩票(0-9)

彩票,单位,简单,电脑软件,js,本文中介绍的网页特效是一个可以控制开始和停止的数字彩票游戏。它类似于许多数字彩票游戏在电视上。下面是我分享的代码。 简单的单位数随机抽奖,提取JS的随机数特效码。 VaR Num = document.getelementbyid(…

PS在孩子的衣服上合成一条小黑狗班

PS在孩子的衣服上合成一条小黑狗班

黑狗,衣服,孩子,电脑软件,PS,本教程介绍给一个朋友,用PS合成一只黑色的小狗,穿着儿童服装。这门课的效果还是很漂亮的,难度也不是很大。推荐并共同学习。 本教程主要是介绍一个小黑狗穿童装的PS。小狗最后合成的很好,难度也不是很大。让我们一…

人物性格的PS教程

人物性格的PS教程

教程,人物性格,电脑软件,PS,本教程是介绍一个朋友,以PS创建个性字符,图像和方法。教程产生的效果非常个人化,难度也不是很大。建议像你这样的朋友一起学习,希望能对你有所帮助。 本教程将介绍ps来创建个性化的字符、图像和方法。教程很简单。非…

PS图象处理软件出的梦幻般的中性黄

PS图象处理软件出的梦幻般的中性黄

草坪,图象,处理软件,梦幻般,蓝色,该材料的主要颜色是黄绿色,颜色有点暗。在处理黄绿色到黄色时,深蓝色稍多一点,然后减少饱和度中性的初始颜色。 材料的主要颜色是黄绿色,颜色有点暗,处理时先黄绿色到黄色;深蓝色多一点;然后减少饱和度是中性的初…

一个方法Word2007教程,节省了Word20

一个方法Word2007教程,节省了Word20

网页,文件,方法,教程,节省,Word2007可以将文档保存为网页格式,这样我们就可以用浏览器打开文件的预览。具体步骤如下: 第一步,打开word文档,点击左上角、Office按钮,然后选择保存它按钮,在弹出窗口中保存文件的副本;选择其他格式; 第二步,在弹出的…