解构赋值语法是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中 —— MDN
我们有这样一个数组 arr = [1,2,3,4];
我们希望将里面的值单独拿出来并赋值给不同的变量。
以前我们需要这么做
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
通过数组的结构赋值，我们可以 let [a, b, c, d] = arr;
等号左边右边都是数组的时候，就会进行一个匹配。根据位置一一对应起来。
我们再来看一个稍微复杂一点的结构赋值：
// 更复杂的匹配规则
const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]];
//只取 b
const [ , b] = arr;
//只取g，只要保证两边结构一样，肯定可以取到对应的值
//const [ , , g] = ['e', 'f', 'g']
//const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']];
const [ , , [ , , [ , , g]]] = arr;
扩展运算符 ‘...’
扩展运算符其中的一个功能就是用来合并多个数组。
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b'];
const arr3 = ['zz', 1];
const arr4 = [...arr1, ...arr2, ...arr3]; //arr4 == [1, 2, 3, "a", "b", "zz", 1]
//如果写成 const arr4 = [arr1, arr2, arr3]; 得到的arr4的值会是三个数组
扩展运算符与解构赋值结合起来给以达到一个效果
const arr = [1, 2, 3, 4, 5, 6];
const [a, b, ...c] = arr;
//它会除去1和2，把剩余的参数作为一个数组赋值给我们的c
注意，带有扩展运算符的变量必须放在最后一位，否则报错。
默认值
如果有变量没有被匹配到,变量的值为undefined。
const arr = [1, undefined, undefined];
const [a,b,c,d] = arr; // d = undefined
//如果我们给了一个默认的值，当变量匹配到的值为undefined，或启用默认值
//注意匹配到null不会
const arr = [1, null, undefined];
const [a, b = 2, c, d = 'aaa'] = arr;
//a=1
//b=null
//c=undefined
//d='aaa'
交换变量
以往的交换需要第三个变量
let a = 20;
let b = 10;
let temp;
temp = a;
a = b;
b = temp;
使用结构赋值只需要
[a,b] = [b,a]
接收多个 函数返回值
function getUserInfo(id) {
// .. ajax
return [
true,
{
name: '小明',
gender: '女',
id: id
},
'请求成功'
];
};
const [status, data, msg] = getUserInfo(123);
这里status会匹配到 true （第一项返回值），
data 会匹配到 { name: '小明', gender: '女',id: 123},（第二项返回值），
msg会匹配到 '请求成功' （第三项返回值）
网友评论