ES6中Javascript解构是什么

　　介绍

这篇文章主要介绍了ES6中Javascript解构是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

ES6中的解构特性能让我们从对象(对象)或者是数组(数组)中取值的时候更方便,同时写出来的代码在可读性方面也更强。之前接触过python语言的小伙伴应该对这个不会陌生,这个特性早已在python中实现了。在python中,我们可以通过下面的代码来取值

lst=(3、5) 　　第一、第二=lst 　　打印(一、二)复制代码

第一和第二两个变量,分别被赋值上了数组中的3和5,是不是很简单很清晰?

那在有这个特性之前,我们一般怎么从对象或数组中取值呢?来看看下面的代码:

首先列表=[3,5]让=列表[0]让第二=[1]复制代码

在这种方式中,你必须得手动指定个数组下标,才能把对应的值赋给你指定的变量。那如果用ES6的解构特性,代码将会变得更简洁,可读性也更高:

让(一、二)=列表;复制代码

对象的解构

基础对象解构

首先我们来看看ES6中基本的对象解构应该怎么写:

const家庭={父亲:& # 39;& # 39; 　　母亲:& # 39;& # 39;}const{父亲、母亲}=家庭;复制代码

我们从家庭对象中解构出来了它的两个属性父亲和母亲,并赋值给了另外定义的父亲和母亲对象。此后,我们就能直接通过父亲和母亲变量获取到家庭中相应的关键值了。这个例子是解构对象最简单的一种应用,下面来看看更有趣的。

解构没有声明过的对象

在上面的例子中,我们先声明的家庭对象,然后再通过解构语法获取其中的值。那如果不声明是否可以呢:

const{父亲、母亲}={父亲:& # 39;& # 39;,母亲:& # 39;& # 39;}复制代码

其实也是可以的,在一些情况下,我们是没有必要特意去声明一个对象或是把对象赋值给一个变量,然后去才解构的。很多时候我们可以直接解构未声明的对象。

解构对象并重命名变量

我们也可以将对象中的属性解构之后,并对其重新命名,比如:

const{父亲:f,母亲:m}={父亲:& # 39;1 & # 39;,母亲:& # 39;2 & # 39;}console.log (f);//& # 39;1 & # 39;复制代码

在上面的代码中,对象中的父亲被解构出来后,重新赋值给了变量f,与前一个例子相比,相当于重名了了父亲变量为f。接下来就可以用f继续进行操作。

解构默认值

想象一下一种场景,后台返回了一个家庭对象,原本家庭对象约定了有三个属性,分别为父亲,母亲,孩子,你拿到返回的数据并解构这三个属性:

const{父亲、母亲、孩子}={父亲:& # 39;1 & # 39;,母亲:& # 39;2 & # 39;,孩子:& # 39;3 & # 39;}复制代码

这看上去没有什么问题,但现实情况总是不如人意。后台由于代码有错误,返回的家庭对象中,只包含了妈妈和孩子,漏了父亲。这时经过上面代码的解构后,父亲就会变成定义:

const{父亲、母亲、孩子}={父亲:& # 39;1 & # 39;,母亲:& # 39;2 & # 39;}console.log(孩子)//未定义复制代码

很多时候我们会想要在后台漏了某个属性的时候,也能解构出一个默认值。那其实可以这么写:

const{父亲=& # 39;1 & # 39;,母亲=& # 39;2 & # 39;,孩子=& # 39;3 & # 39;}={父亲:& # 39;1 & # 39;,母亲:& # 39;2 & # 39;}console.log(孩子)//& # 39;3 & # 39;复制代码

结合前一个例子,你既可以改变量名又能赋值默认值:

const{父亲:f=& # 39; 1 & # 39;,母亲:m=& # 39; 2 & # 39;,孩子:c=& # 39; 3 & # 39;}={父亲:& # 39;1 & # 39;,母亲:& # 39;2 & # 39;}复制代码

在函数参数中解构

const家庭={父亲:& # 39;& # 39; 　　母亲:& # 39;& # 39;}函数日志({父亲}){console.log(父亲) 　　} 　　日志(家庭)复制代码

在函数的参数中,运用解构的方式,可以直接获取出入对象的属性值,不需要像以往使用的家庭。父亲传入。

解构嵌套对象

在上面的例子中,家庭的属性都只有1层,如果家庭的某些属性的值也是一个对象或数组,那怎么将这些嵌套对象的属性值解构出来呢?来看看下面的代码:

const家庭={父亲:& # 39;迈克# 39; 　　母亲:[{名称:& # 39;玛丽# 39; 　　}) 　　}const{父亲、母亲:[{名字:motherName 　　}]}=家庭;console.log(父亲);//& # 39;迈克# 39;console.log (motherName)//& # 39;玛丽# 39;复制代码

ES6中Javascript解构是什么