ES6 基础之解构赋值

标签

HTML

正则表达式

Json

包管理工具

vite

CSS

XPath

JavaScript

Jquery

less

ES6

Vue

React

Layui

editor.md

sea.js

Zepto.js

mysql.js

mssql.js

NodeJs

Express

前端template

YAML

杂项

外部链接

ES6 基础之解构赋值

[TOC]

### 字符串的解构赋值

将一个字符串赋值给一个数组时，这时会字符串拆开逐个赋值给数组成员，字符串长度大于数组长度自动截取掉后面的字符串，如果数组长度大于字符串长度则无法进行对应赋值，输出结果就是 `undefined`

```javascript
let [a,b,c,d] = "hello word"
console.log(a,b,c,d)
// 输出：h e l l

let [a,b,c,d] = "hel"
console.log(a,b,c,d)
// 输出：h e l undefined
```

### 数组的解构赋值

数组赋值时需要注意赋值的顺序，数组对应索引下没有赋值默认为`undefined`

```javascript
// let [a,b,c] = [1,2,3]
// console.log(a,b,c)
// 输出：1 2 3

let [a = 1,b,c] = [,2,]
console.log(a,b,c)
// 输出：1 2 undefined
```

### 对象的解构赋值

对象赋值无需按照顺序

```javascript
let {foo,bar} = {foo:"hello",bar:"word"}
console.log(foo,bar)
// 输出：hello word
```

对象属性可以有别名

+ 如果对象属性使用别名，那么原来的名字就无效了，使用的话会提示 `is not defined` 下面示例代码第一段
+ 有别名的属性也不能使用别名进行赋值，赋值是无效的，输出结果是 `undefined` 下面示例代码第二段
+ 对象属性和数组一样也可以指定默认值，见示例第三段

```javascript
let { foo: parm1, bar } = { foo: "hello", bar: "word" }
console.log(foo, bar)
// 输出：foo is not defined

let { foo: parm1, bar } = { parm1: "hello", bar: "word" }
console.log(parm1, bar)
// 输出：undefined word

let { foo: parm1 = "hello", bar } = {  bar: "word" }
console.log(parm1, bar)
// 输出：hello word

let { foo: parm1, bar } = { foo: "hello", bar: "word" }
console.log(parm1, bar)
// 输出：hello word
```

对象赋值给对象属性成员自动匹配

+ 下面示例就是将 `Math` 对象中与定义中成员名称一致的属性进行了匹配赋值
+ 下面示例中最后定义了只有一个成员 `length` 的对象这时给对象赋值的字符串，其真实赋值给 `length` 成员的值是字符串对象中的 `length` 成员,所以输出的结果是字符串的长度

```javascript
let {cos,sin,random} = Math
console.log(typeof cos)
// 输出：function
console.log(typeof sin)
// 输出：输出：function
console.log(typeof random)
// 输出：输出：function

let {length} = 'hello word'
console.log(length)
// 输出：10
```