ES6——对象解构和数组解构

Wesley13
• 阅读 620

为何使用解构功能
    在ES5及早期版本中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码,如下:

let options = {
repeat:true,
save:false
};
//从对象中取数据
let repeat = options.repeat,
save = options.save;
   这段代码从options对象中提取了repeat和save的值并将其存储为同名局部变量,提取的过程极为相似,想象一下,如果你要提取更多变量,则必须依次编写类似的代码来为变量赋值,如果其中还包含嵌套结构,只靠遍历是找不到真实信息的,必须要深入挖掘整个数据结构才能找到所需数据。

对象解构
    对象解构的语法形式是在一个赋值操作左边放置一个对象字面量,如:

let node = {
type:"Identifier",
name:"foo"
};
let {type,name} = node;
console.log(type);//"Identifier"
console.log(name);//"foo"
    在这段代码中,node.type的值被存储在名为type的变量中;node.name的值被存储在名为name的变量中。

注意:如果使用var、let、const解构声明变量,必须要提供初始化程序(也就是等号右侧的值),否则会导致程序抛出语法错误。

解构赋值
    同样可以在给变量赋值时使用解构语法,如下,在定义变量之后想要修改他们的值,可以这样:

let node = {
type:"Identifier",
name:"foo"
},

type = "Literal",
name = 5;

//使用解构语法为多个变量赋值
({type,name} = node);

console.log(type);//"Identifier"
console.log(name);//"foo"
    在这个示例中,声明变量type和name时初始化了一个值,在后面的几行中,通过解构赋值的方法,从node对象读取相应的值重新为这两个变量赋值。注意:一定要用一对小括号包裹解构赋值语句,javascript引擎将一对开放的花括号视为一个代码块,而语法规定,代码块不能出现在赋值语句的左侧,添加小括号后可以将块语句转化为一个表达式,从而实现整个解构赋值的过程。

默认值
    使用解构赋值表达式时,如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为undefined,如下:

let node = {
type:"Identifier",
name:"foo"
};
let {type,name,value} = node;
console.log(type);//"Identifier"
console.log(name);//"foo"
console.log(value);//undefined
    当指定的属性不存在时,可以随意定义一个默认值,在属性名称后添加一个等号(=)和相应的默认值即可:

let node = {
type:"Identifier",
name:"foo"
};
let {type,name,value = true} = node;
console.log(type);//"Identifier"
console.log(name);//"foo"
console.log(value);//true
为非同名局部变量赋值
    到目前为止的每一个实例中,解构赋值使用的都是与对象属性同名的局部变量,例如,node.type的值被存储在了变量type中。但如果你希望使用不同命名的局部变量来存储对象属性的值,ES6中的一个扩展语法可以满足:

let node = {
type:"Identifier",
name:"foo"
};
let {type:localType,name:localName} = node;
console.log(localType);//"Identifier"
console.log(localName);//"foo"
    当使用其他变量名进行赋值时也可以添加默认值,只需在变量名后添加等号和默认值即可:

let node = {
type:"Identifier"
};
let {type:localType,name:localName = "bar"} = node;
console.log(localType);//"Identifier"
console.log(localName);//"bar"
嵌套对象解构
let node = {
type:"Identifier",
name:"foo",
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:4
}
}
};

let {loc:{start}} = node;
console.log(start.line);//1
console.log(start.column);//1
    在这个示例中,我们在解构模式中使用了花括号,其含义为在找到node对象中的loc属性后,应当深入一层继续查找start属性。更进一步,也可以使用一个与对象属性名不同的局部变量名:

let node = {
type:"Identifier",
name:"foo",
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:4
}
}
};
//提取node.loc.start
let {loc:{start:localStart}} = node;
console.log(localStart.line);//1
console.log(localStart.column);//1
数组解构
    与对象解构的语法相比,数组解构就简单多了,它使用的是数组字面量,且解构操作全部在数组内完成,而不是像对象字面量语法一样使用对象的命名属性:

let colors = ["red","green","blue"];
let [firstColor,secondColor] = colors;
console.log(firstColor);//"red"
console.log(secondColor);//"green"
    在这段代码中,我们从colors数组中解构出了"red"和"green"这两个值,并分别存储在变量firstColor和变量secondColor中。在数组解构语法中,我们通过值在数组中的位置进行选取,且可以存储在任意变量中,未显式声明的元素都会直接被忽略。在这个过程中,数组本身不会发生任何变化。

    在解构模式中,也可以直接省略元素,只为感兴趣的元素提供变量名。比如,如果你只想取数组中的第三个值,则不需要提供第一个和第二个元素的变量名称:

let colors = ["red","green","blue"];
let [ ,,thirdColor] = colors;
console.log(thirdColor);//"blue"
解构赋值
    数组解构也可用于赋值上下文,但不需要用小括号包裹表达式,这一点与对象解构的约定不同。

let colors = ["red","green","blue"],
firstColor = "black",
secondColor = "purple";
[firstColor,secondColor] = color;
console.log(firstColor);//"red"
console.log(secondColor);//"green"
    数组解构还有一个独特的用例:交换两个变量的值。在ES5中交换两个变量的值需要引入第三个临时变量,但在ES6的数组解构中,就不再需要额外的变量了,如下:

let a = 1,
b = 2;

[a,b] = [b,a];

console.log(a);//2
console.log(b);//1
默认值
    也可以在数组解构赋值表达式中为数组中的任意位置添加默认值,当指定位置的属性不存在或其值为undefined时使用默认值:

let colors = ["red"];
let [firstColor,secondColor = "green"] = colors;
console.log(firstColor);//"red"
console.log(secondColor);//"green"
嵌套数组解构
let colors = ["red",["green","lightgreen"],"blue"];

let [firstColor,[secondColor]] = colors;

console.log(firsrColor);//"red"
console.log(secondColor);//"green"
    在此示例中,变量secondColor引用的事colors数组中的值"green",该元素包含在数组内部的另一个数组中,所以secondColor两侧的方括号是一个必要的解构模式。同样,在数组中也可以无限深入去解构,就像在对象中一样。

不定元素
    在数组中,可以通过…语法将数组中的其余元素赋值给一个特定的变量,如下:

let colors = ["red","green","blue"];

let [firstColor,...restColors] = colors;

console.log(firstColor);//"red"
console.log(restColors.length);//2
console.log(restColors[0]);//"green"
console.log(restColors[1]);//"blue"
注意:在被解构的数组中,不定元素必须为最后一个条目,在后面继续添加逗号会导致程序抛出语法错误。

混合解构
    可以混合使用对象解构和数组解构来创建更多复杂的表达式,如此一来,可以从任何混杂着对象和数组的数据解构中提取你想要的信息:

let node = {
type:"Identifier",
name:"foo",
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:1
}
},
range:[0,3]
};

let {
loc:{start},
range:[startIndex]
} = node;

console.log(start.line);//1
console.log(start.column);//1
console.log(startIndex);//0
    这段代码分别将node.loc.start和node.range[0]提取到变量start和startIndex中。记住:解构模式中的loc:和range:仅代表他们在对象中所处的位置,也就是该对象的属性。

原文:https://blog.csdn.net/DFF1993/article/details/82951227

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
3年前
ES6新语法(二)
1.解构在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。解构:自动解析数组或对象中的值,并赋值给指定的变量。、1.1数组解构vararr3,4,5;vara,b,carr;
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这