ES6基础之解构赋值(destructuring assignment)

我们经常可以在其他编程语言(如GO语言)中看到多返回值这种特性,因为在很多实际场景中,函数的返回值中,函数的返回值并不只有一个单一的值。ES6之前,并没有可以直接使用语法来实现多返回值的特性。ES6终于出现了解构赋值的语法糖来解决此类问题。

解构赋值是一种表达式,允许您使用数组或对象,将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值,大大的减少了代码量。解构表达式有两种:array和object。

今天的文章笔者将从以下方面进行介绍:

使用数组表达式解构赋值

常规用法

忽略数组中的某些值

使用展开语法

默认参数值

嵌套数组解构

作为函数参数

使用对象表达式解构赋值

常规用法

默认参数值

嵌套对象

作为函数参数

其他

解构对象的方法

获取字符串长度

拆分字符串

交换变量

遍历Map结构

加载指定模块的方法

常用场景介绍

使用数组表达式解构赋值

常规用法

如何将一个数组的值,赋值给多个变量?数组解构语法能让我们快速的迭代数组的元素,并赋值给多个变量。

E6之前,我们可以这种形式将数组的内容赋值给多个变量:

var myArray = [1, 2, 3]; var a = myArray[0]; var b = myArray[1]; var c = myArray[2];

ES6后,我们可以通过数组解构语法,在一行语句里完成上述操作。

let myArray = [1, 2, 3]; let a, b, c; [a, b, c] = myArray; //array destructuring assignment syntax

上述代码中,[a, b, c]就是解构表达式。在数组解构语句的左侧就是需要进行赋值的多个变量,等号右侧则是我们需要分配的值。

我们还可以让上述代码更短,你还可以这么写,代码如下:

let [a, b, c] = [1, 2, 3];

我们在同一行语句中创建变量,而不是分别创建。是不是更清爽。

如果左边的数值少于右边数组的项数,左边变量的值只会和右边数组的内容一一对应,多于的内容将会忽略。

忽略数组中某些值

如果只有两个变量,我们数组内容有三项,我们想跳过数组中的第二项,我们如何使用数组解构赋值呢?代码如下:

let [a, , b] = [1, 2, 3]; console.log(a); console.log(b);

上述代码我们使用, ,忽略数组中的第二项,建议中间有空格,方便我们阅读。

使用展开语法

上篇文章 《【ES6基础】展开语法(Spread syntax)》 ,笔者介绍了展开语法的几个应用场景,由于上篇文章没介绍解构赋值,所以在这里给大家介绍展开语法在解构赋值的应用。如下段代码所示:

let [a, ...b] = [1, 2, 3, 4, 5, 6]; console.log(a); console.log(Array.isArray(b)); console.log(b);”

上述代码则会输出:

1
true
2,3,4,5,6

上述代码,你可以看到b变量被解构赋值成数组,这里...就是我们上篇文章提到的剩余参数场景的运用。

如果想跳过数组中的部分值,我们可以这么做,如下段代码所示:

let [a, , ,...b] = [1, 2, 3, 4, 5, 6]; console.log(a); console.log(b);

上述代码则会输出:

1
4,5,6

这段代码我们跳过了数组的第2项和第3项。

默认参数值

笔者在 《【ES6基础】默认参数值》 给大家介绍了如何使用默认参数值,在解构赋值中,我们如何设置变量的默认值呢,如下段代码所示:

let [a, b, c = 3] = [1, 2]; console.log(c); //Output "3”

嵌套数组

我们还可以从多维数组中提取值并分配给变量,如下段代码所示:

let [a, b, [c, d]] = [1, 2, [3, 4]];

作为函数参数

我们还可以使用数组解构表达式作为函数参数来提取可迭代数组的值,作为参数传递给函数参数,如下段代码所示:

function myFunction([a, b, c = 3]) { console.log(a, b, c); //Output "1 2 3" } myFunction([1, 2]);

笔者在《【ES6基础】默认参数值》 提及到我们可以传递undefined,指定某个具体的参数使用默认值,我们可以使用结构赋值为相关变量提供一组默认值,并传入undefined,如下段代码所示:

function myFunction([a, b, c = 3] = [1, 2, 3]) { console.log(a, b, c); //Output "1 2 3" } myFunction(undefined);

在这里,我们将undefined作为参数传递,因此使用默认数组[1,2,3]进行提取赋值。

使用对象表达式解构赋值

常规用法

对象解构赋值将对象属性的值赋给多个变量。ES6之前我们可以这样把对象的属性赋值给多个变量,如下段代码所示:

var object = {name : "John", age : 23}; var name = object.name; var age = object.age;

在ES6里,我们可以使用对象解构表达式,在单行里给多个变量赋值,如下段代码所示:

let object = {name : "John", age : 23}; let name, age; ({name, age} = object); //object destructuring assignment syntax

对象解构赋值的左侧为解构赋值表达式,右侧为对应要分配赋值的对象。解构语句的两边千万 不要遗漏左右括号() ,否则会报错。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/8bad4bbb197440f94783bf1c7bfded4e.html