ES6新特性之解构赋值

ECMA Script 2015也就是ES6中有了一个新的概念，叫做解构赋值。下面我们一起来看下这个东西的使用方法吧！

1. 对于数组使用解构赋值

1.1 基本使用

先看一个简单的案例，其实规律很简单，我们直接照葫芦画瓢写一个数组，里面放上变量，他就可以自动把目标数组里对应位置上的数据赋值给对应位置上的变量:

// 先看一个简单的案例
let arr = [1,2,3];
let [a,b,c] = arr;//注意这一步其实就是声明了a,b,c三个变量，然后赋值为1,2,3
console.log(a,b,c);//1 2 3

1.2 交换两个变量的值

看一个编程中经典的题目，交换两个变量的值，你是不是脑子里想到的是这个：

let a = 1;
let b = 2;
let c = a;
a = b;
b = c;

但是有了解构赋值以后，你这样用就可以实现a、b两个变量的值交换:

let a = 1;
let b = 2;
let [a,b] = [b,a];

1.3 获取指定位置的数据 

现在来个难一点的问题，数组里有三个数字，但是我只想要第三个，其他两个不想要，怎么做呢?很简单，直接用逗号隔开就好，只在需要的位置上放变量

let [,,c] = [1,2,3];

1.4 嵌套数组里的使用

问题又来了，如果目标数组是一个嵌套的数组，我该怎么获取到里面的内容呢？其实一样的道理，还是照葫芦画瓢，在需要的位置上写变量就行。

let [a,[b,c,d],e] = [1,[2,3,4],5];

1.5 为变量设置默认值

现在问题来了，如果说未来我们解构赋值已经写好了，但是我们拿到的数组是个空的，这不就出问题了么，不用慌，解构赋值里的变量是可以赋初始值的

比如向下面这段代码，就是当未来a没有在目标数组中匹配到对应的值时，就取值为1

 let [a=1] = [];

2. 对于对象使用解构赋值

对象的解构赋值没有顺序的要求，只要属性名可以对应上就行；用哪个就取哪个，不需要全写

2.1 一个小案例

对象的解构赋值没有顺序的要求，只要属性名可以对应上就行；用哪个就取哪个，不需要全写

let obj = {
    name:'mikaisa',
    age:18
}

let { name } = obj;
console.log(name);//mikaisa

2.2 防止命名冲突

但是有个小问题，如果说未来的代码中，我之前已经声明过一个name了，如果还按照上面那段代码，肯定会导致重复声明的报错，该怎么避免呢？

很简单，我们可以通过{name:name2}这样的写法，意思就是去目标对象里寻找name属性对应的值，并赋值给name2变量。这样就避免了命名冲突

let name = '小明';
let obj = {
    name:'mikaisa',
    age:18
}

let { name:name2 } = obj;
console.log(name2);//mikaisa

2.3 为变量设置默认值

和数组里的使用一样，如果未来目标对象里匹配不到对应属性，我们可以设置一个默认值，比如这里我们可以把sex变量默认设置为'男'

let obj = {
    name:'mikaisa',
    age:18
}

let { sex='男' } = obj;

3. 在字符串中使用

虽然基本用不到，但是还是要提一下，解构赋值是可以对字符串进行使用的。使用方法和对数组进行解构赋值一样。看一下就行了，图一乐

let [x,y,z] = '我爱你';
console.log(x);//我

好了，以上就是本次文章的全部内容了，觉得不错的还请点赞收藏加关注呀，我是努力冲击大厂的小韩！