ES6中的Javascript解构

coldplay.xixi

发布： 2020-10-27 17:34:32

转载

2021人浏览过

今天javascript栏目介绍ES6中的Javascript解构。

ES6中的Javascript解构

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

lst = [3, 5]
first, second = lst 
print(first, second)复制代码

登录后复制

first和second两个变量，分别被赋值上了数组中的3和5，是不是很简单很清晰？

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

let list = [3, 5]let first = list[0]let second = list[1]复制代码

登录后复制

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

let [first, second] = list;复制代码

登录后复制

对象的解构

基础对象解构

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

const family = {	father: ''
	mother: ''}const { father, mother } = family;复制代码

登录后复制

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

解构没有声明过的对象

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

const { father, mother } =  {father: '',mother: ''}复制代码

登录后复制

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

解构对象并重命名变量

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

const { father: f, mother:m } =  {father: '1',mother: '2'}console.log(f); // '1'复制代码

登录后复制

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

解构默认值

想象一下一种场景，后台返回了一个family对象，原本family对象约定了有三个属性，分别为father，mother，child。你拿到返回的数据并解构这三个属性：

const { father, mother, child } =  {father: '1',mother: '2', child: '3'}复制代码

登录后复制

这看上去没有什么问题，但现实情况总是不如人意。后台由于代码有bug，返回的family对象中，只包含了mother和child，漏了father。这时经过上面代码的解构后， father就会变成undefined：

const { father, mother, child } =  {father: '1',mother: '2'}console.log(child) //undefined复制代码

登录后复制

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

const { father = '1', mother = '2', child = '3'} =  {father: '1',mother: '2'}console.log(child) //'3'复制代码

登录后复制

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

const { father: f = '1', mother: m = '2', child: c = '3'} =  {father: '1',mother: '2'}复制代码

登录后复制

在函数参数中解构

const family = {	father: ''
	mother: ''}function log({father}){	console.log(father)
}
log(family)复制代码

登录后复制

在函数的参数中，运用解构的方式，可以直接获取出入对象的属性值，不需要像以往使用family.father传入。

解构嵌套对象

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

const family = {	father: 'mike'
	mother: [{		name: 'mary'
	}]
}const { father, mother: [{	name:motherName
}]} = family;console.log(father); //'mike'console.log(motherName) //'mary'复制代码

登录后复制

数组的解构

数组的解构方式其实跟对象的非常相似，在文章开头也略有提及，不过我们还是来看一下数组解构的一些典型场景。

基础对象解构

const car = ['AUDI', 'BMW'];const [audi, bmw] = car;console.log(audi); // "AUDI"console.log(bmw); // "BMW"复制代码

登录后复制

只要对应数组的位置，就能正确的解构出相应的值。

解构默认值

同对象解构的默认值场景，很多时候我们也需要在解构数组的时候加上默认值以满足业务需要。

const car = ['AUDI', 'BMW'];const [audi, bmw, benz = 'BENZ'] = car;console.log(benz); // "BENZ"复制代码

登录后复制

在解构中交换变量

假设我们有如下两个变量：

let car1 = 'bmw';let car2 = 'audi'复制代码

登录后复制

如果我们想交换这两个变量，以往的做法是:

let temp = car1;
car1 = car2;
car2 = temp;复制代码

登录后复制

需要借助一个中间变量来实现。那利用数组的解构，就简单很多：

let car1 = 'bmw';let car2 = 'audi'[car2, car1] = [car1, car2]console.log(car1); // 'audi'console.log(car2); // 'bmw'复制代码

登录后复制

如果是想在一个数组内部完成元素位置的交换，比如吧[1,2,3]交换成[1,3,2]，那么可以这么实现：

const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];console.log(arr); // [1,3,2]复制代码

登录后复制

从函数的返回解构数组

很多函数会返回数组类型的结果，通过数组解构可以直接拿值：

functin fun(){	return [1,2,3]
}let a, b, c; 
[a, b, c] = fun();复制代码

登录后复制

当然，如果我们只想要函数返回数组中的其中一些值，那也可以把他们忽略掉

functin fun(){	return [1,2,3]
}let a, c; 
[a, , c] = fun();复制代码

登录后复制

可以看到，ES6的解构特性在很多场景下是非常有用的。期望大家能更多的将解构运用到项目中，让代码变得更加简单，清晰易懂。

相关免费学习推荐：javascript（视频）

以上就是ES6中的Javascript解构的详细内容，更多请关注php中文网其它相关文章！

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

ES6中的Javascript解构

今天javascript栏目介绍ES6中的Javascript解构。

对象的解构

基础对象解构

解构没有声明过的对象

解构对象并重命名变量

解构默认值

在函数参数中解构

解构嵌套对象

数组的解构

基础对象解构

解构默认值

在解构中交换变量

从函数的返回解构数组