ES6之解构赋值

何为解构赋值？

解构赋值语法是⼀个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。如果理解起来感觉抽象，直接看下⾯例⼦：

数组解构：

我们在以前要给变量赋值需要像下⾯这样写：

var arr=[1,2.3];var a = arr[0];var b = arr[1];var c = arr[2];

是不是感觉略繁琐了点？⽽如果我们⽤解构赋值的话，可以怎么写呢？看下⾯代码：

let [a,b,c] = [1,2,3];console.log(a,b,c);

此时我们可以看出返回结果如下图：

是不是感觉⽤起来爽多了？

为了防⽌从数组中取出⼀个值为undefined的对象，可以为这个对象设置默认值。如以下代码：

let [a = 5, b = 7] = [1];console.log(a); // 1console.log(b); // 7

解构函数中，我们可以直接交换变量。以前的话，还需要⼀个中间值。我们现在就可以直接写成下⾯这样⼦了：

let a = 1;let b = 3;

[a, b] = [b, a];

console.log(a); // 3console.log(b); // 1

如果你想忽略某些值，可以像下⾯这样⼦写：

function f() { return [1, 2, 3];}

var [a, , b] = f();console.log(a); // 1console.log(b); // 3

当解构⼀个数组时，可以使⽤剩余模式，将数组剩余部分赋值给⼀个变量。

var [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]

剩余元素必须是数组的最后⼀个元素，所以剩余元素后⾯不能放其他东西了。

解构对象：

基本赋值：

let {name, pass} = {name: 'Maria',pass: 123456}console.log(name, pass)

返回结果如下图：

对象同样可以赋默认值：

var {x = 10, y = 5} = {x: 3};console.log(x); // 3console.log(y); // 5

函数参数赋默认值如下：

function drawChart({size = 'big', cords = { x: 0, y: 0 }, radius = 25}) { console.log(size, cords, radius);}

drawChart({

cords: { x: 18, y: 30 }, radius: 30});