es6提供了一个非常好的特性,即变量的解构赋值。从而我们可以方便的从数组和对象中提取数据并将它们赋值给变量。这是非常必要的。先来看在这个新特性发布之前我们是如何从数组中提取数据的。如下:
let nums = [1,2,3,4,5];
let num1 = nums[0];
let num2 = nums[1];
console.log(num1); // logs 1
console.log(num2); // logs 2
复制代码
为了从 nums 数组中提取到数据,我们多次重复着相同的代码。es6的解构赋值将会让这个操作变得非常的容易且易于理解。
数组的解构赋值
从数组中取值并按照对应位置对变量进行赋值。如下:
let [num1,num2,num3] = [1,2,3];
console.log({num1},{num2},{num3})
复制代码
“模式匹配”赋值
这属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
let [num_s,nums,num_e] = [1,[2,3,4],5];
console.log(num_s) // logs 1
console.log(nums) // logs [2,3,4]
console.log(num_e) // logs 5
复制代码
用逗号跳过元素
let [num1,,,num4] = [1,2,3,4];
console.log(num1) // logs 1
console.log(num4) // logs 4
let [,num2,,num4] = [1,2,3,4];
console.log(num2) // logs 2
console.log(num4) // logs 4
复制代码
查看变量赋值左侧的数组。注意这里不是只有一个逗号,而是三个。逗号分隔符用于跳过数组中的值。所以如果你想要跳过数组中的一个项,只要用逗号就可以了。
数组中的其余部分的赋值
如果我们想将数组中的一些元素赋值给变量,而将数组中的其余元素存为一个数组赋值给指定的变量怎么办?在这种情况下,我们可以这样做:
let [num1,...nums] = [1,2,3,4];
console.log(num1) // logs 1
console.log(nums) // logs [2,3,4]
复制代码
应用这种方式,你可以轻松的把剩余的元素赋值给一个指定的变量。
解构失败,赋值undefined
let [num1] = [];
let [num2, num3] = [1];
console.log(num1) // logs undefined
console.log(num3) // logs undefined
复制代码
代码中的变量num1与变量num3 按照模式匹配原则,并没有对应的值与之匹配,故而返回undefined。而变量num2 按照模式匹配原则,被赋值为2。