原精

ES6 新增特性解构赋值

5084人阅读 2020/6/24 16:44 总访问：110590 评论：0 收藏：0 手机

分类: ES6

## ES6 中数据解构赋值
在 ES6 中通过使用解构赋值代码可以方便时使我们快速的上手代码的实现方式 

### · 数组的解构:
有一下的代码块:
```javascript
let arr = [1, 2, 3]
```

现在要求取出数组的每一项
```javascript
// 传统的方式
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log(a, b, c) // 1, 2, 3
```
在 ES6 中提供了 解构 的语法  可以得到数组中的某一项, 如：
```javascript
let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1, 2, 3
```
结构赋值就是将数组中的某一项按照指定的顺序结构赋值给左边的变量 等于号的左右两边都应该是一个数组才可以 两边的值都应该一一对应
```javascript
let [a, b, c] = [1, 3, [3, 4]]
// 通过解构赋值的一一对应的原则
console.log(1, 3, [3, 4])
```

```javascript
let [a, b, c, d] = [1, 2, [3, 4]]
// 通过解构赋值的一一对应结果
console.log(a, b, c, d) // 1 2 [3, 4] undefined
```

通过上一段代码输出可知 这里的 a, b, c 都有与之对应的值匹配 而 d 没有对应的值匹配 为 undefined 如何解决这个 undefined 的问题呢??

通过在解构的时候设置默认的初始值
```javascript
let [a, b, c, d = 5] = [1, 2, [3, 4]]
console.log(a, b, c, d) // 1, 2, [3, 4], 5
```

解构赋值是一种惰性的 如果有传值 就以传递的值为准 如果没有就是用默认值 如果连默认值都没有那就是 undefined

难度提升 => 如何将一下的数组全部展开??
以上要求我们可以通过 数据的解构赋值配合扩展运算符实现
```javascript
let [a, b, ...c] = [1, 2, [3, 4]]
// 注意 这里的 c 输出的值为 [3, 4] 通过扩展运算符的形式即可展开数组
```


#### · 对象的解构：

有一个对象:
```javascript
let user = {
	name: 'xiaojianjian',
	age: 18,
}
```

传统获取 name 和 age 的方式
```javascript
let name = user.name
let age = user.age
console.log(name, age) // xiaojianjian 18
```

es6 中结构赋值的方式

```javascript
let { name, age } = user
console.log(name, age) // xiaojianjian 18
```

解构时顺序的调换是否正常

```javascript
let { age, name } = user
console.log(age, name) // 18, xiaojianjian
// 输出的结果可知 解构与顺序没有关系
```

解构时不想使用原来的属性名称 >>> 如何更换

```javascript
let { age, name: userName } = user
console.log(age, name) // 报错
console.log(age, userName) // 18, xiaojianjian

// 通过以上的代码可知 在解构变量时候 通过给变量起别名的方式即可将解构的值赋值给新变量名
```


字符串的解构赋值
字符串如何解构 <=> 如何字符串中的每个字符

传统的方式
```javascript
let str = 'xiaojianjian'
for(let i = 0; i < str.length; i++) {
	console.log(str[i]) // x i a o j i a n...
}
```

ES6 中对字符的解构就如同对数组的解构 两种解构的方式是一样的
```javascript
let str = 'xiaojianjian'
let [a, b, c, d] = str
console.log(a, b, c, d) // x, i, a, o
```


开发场景
设置默认值在代码中增强防御式代码

对象解构默认值
```javascript
let { name:'liuxiaojian', age: 18 } = {
	name: 'xiaojianjian',
	age: 20,
}

console.log(name, age) //正常情况下 xiaojianjian 20
console.log(name, age) // 非正常情况下取默认值 liuxiaojian 18
```

数组解构默认值

```javascript
let [a = 3, b = 4] = [1 ,2]
console.log(a, b) //正常情况下 1, 2
console.log(name, age) // 非正常情况下取默认值 3 4
```

以上的代码段中不难看出 数组解构默认值 通过 赋值号 " = " 对象默认的赋值号 " : "

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

叼着奶瓶逛酒吧

大概你身上总有我喜欢的味道，所以我一见你就开心的笑

博主信息

排名

文章

粉丝

文章类别

祈祷永无bug 8篇

初吻给了奶嘴 1篇

Vue课程笔记 3篇

ES6 5篇

TypeScript 1篇

ES6 新增特性解构赋值

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

ES6 新增特性 解构赋值

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

ES6 新增特性解构赋值