解构赋值语法(多个变量赋值)

ES6能够简化赋值的写法,支持一次赋值多个变量。但是使用时我们要注意,不要乱用解构赋值,以免降低代码的可读性。

基于数组的解构赋值

原始写法:

let a = 1;
let b = 2;
let c = 3;

简化的写法:

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

基于对象的解构赋值

let obj1 = {
    key1: 'val1',
    key2: 'val2'
};

let {key2, key1} = obj1;

基于数组的解构赋值,赋值的顺序是根据数组的索引决定的,对于基于对象的解构赋值,赋值顺序是根据对象键值对中,键名决定的。

使用基于对象的解构赋值机制实现函数参数

这是一种比较常用的写法,因此单独拿出来说明以下。函数参数中也可以使用解构赋值定义,这样我们传入的参数就应该是一个对象,但是对象的字段需要和参数中的字段相对应。

因为JavaScript是动态类型语言,是基于对象的面向对象,而不是基于类定义的,函数参数采用结构赋值的方式能够一定程度上规定传入的参数对象类型,许多JavaScript框架都大量采用这种方式传参数,来弥补动态类型带来的API函数使用方式不明所以、代码可读性差的问题(这个问题实际编写代码时就会深切感受到)。

let obj1 = {
    key1: 'val1',
    key2: 'val2'
};

function foo({key1, key2}) {
    console.log(key1);
    console.log(key2);
}
foo(obj1);

实际上,函数参数还可以结合基于数组的解构赋值使用,但是这种情况很少使用,也没什么特别的优势。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。