解析赋值什么是解析赋值解构赋值语法是一种Javascript表达式。通过解构赋值, 可以将属性/值从对象 / 数组

什么是解析赋值

解构赋值语法是一种Javascript表达式。通过解构赋值, 可以将属性/值从对象 / 数组中取出,赋值给其他变量

解析赋值的写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。举个简单的例子：

var obj = {
  foo: 123
};
var { foo } = obj;
foo; // 123

我在obj里定义的变量，只要等式左边的属性名相同，就可以被赋值对应的同名属性

如果代码写得少，还真的觉得这个没啥用。使用解析赋值最常用的场景就是参数传递了

function loadData(obj) {
  const { pageSize, pageIndex } = obj;
  axios.get(`...?pageSize=${pageSize}&pageIndex=${pageIndex}`);
}

这样看好像代码一下子简洁了不少呢，如果没有解析赋值，我们就只能这样做了

function loadData() {
  axios.get(`...?pageSize=${obj.pageSize}&pageIndex=${obj.pageIndex}`)
}

这样的代码不够简洁，尤其是我们要获取更多的属性的时候，每次都要去做obj.xx

难道ES6的解析赋值只是用来优化代码美观的？

对象、数组、字符串、数值等等你知道的所有类型都可以使用解析赋值

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

我们可以从数组中提取值，按照对应位置对变量赋值，只要等号两边模式相同，自然，左边的变量就会被赋值对应的值

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo; // 1
bar; // 2
baz; // 3

当然，解析赋值不是完全结构，等号左边的模式如果只匹配一部分等号右边的数组也是可以的

let [x, y] = [1, 2, 3];
x; // 1
y; // 2

字符串页可以被解构赋值，但是意义不是很大，我反正是没遇到过这种使用场景

const [a, b, c] = 'abc';
a; // a
b; // b
c; // c

let { length: len } = 'abc';
len; // 3

同样，数值的解构赋值意义也不大

函数的参数也可以使用解构赋值

function add([x, y]) {
  return x + y;
}

add([1, 2])

我们可以给解构赋值加上默认值，假如没有拿到我们期望的值，就会赋值默认值

var { x = 3 } = {};
x; // 3

变量解构是一个非常有用的特性，我们在往后的开发中会经常使用到，所以这必须要掌握，用途很多（不去全部都细讲），包括但不限于以下。