Javascript |（四）解构赋值

解构赋值是ES6新增的特性。

数组的解构

下面是数组解构的一些例子。

const [x, y, z] = [1, 2, 3]; // 1, 2, 3
const [a, [b, c]] = [1, [2, 3]]; // 1, 2, 3
const [ , , m] = [1, 2, 3]; // 3

  

对象的解构

下面是对象解构的一些例子。如果获得不存在的属性，会得到undefined，同时报错。

const obj = {
	name: 'jim',
	age: 10,
	info: {
	  school: '山东大学',
	  pet: 'dog'
	}
}

// info不能获得，会报错
const {name, age:year, info:{school, sex = '男'}} = obj;
name, year, school, sex; // 'jim', 10, '山东大学', sex

有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误。这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来。

let x, y;
{x, y} = {x:1, y:2}; // 'Unexpected token ='
({x, y} = {x:1, y:2}); // 1, 2

  

使用场景

• 交换两个数：

const a = [1, 2];
[a[0], a[1]] = [a[1], a[0]];
a // [2, 1]

• 如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中。

function greet({firstName, secondName='James'}){
	return `Hello, my name is ${firstName} ${secondName}!`;
}
greet({firstName: 'LeBron'}); //Hello, my name is LeBron James!
greet({firstName: 'Kobe', secondName: 'Bryant'}); //Hello, my name is Kobe Bryant!