1、数组解构就是能快速提取数组中的指定成员(数组的某一项值或所有的值)

例如:

解构赋值都是一一对应的,按照顺序。

const arr = [200,300,400]
const [a,b,c] = arr
console.log(a,b,c) // 200,300,400

也可以取数组的某一项值(结构必须保持一致)

const arr = [200,300,400]
const [, , c] = arr
console.log(c) // 400

还可在用“...”的方式提取所有的成员(注意的是这种...的写法只能在解构成员的最后一个成员使用)代码如下

const arr = [200,300,400]
const [a,...all] = arr
console.log(all) // [300,400] 会返回得到一个最后所有的数组

如果提取的解构成员小于数组的长度,就会从前到后的顺序来提取,代码如

const arr = [200,300,400]
const [a] = arr
console.log(a) // 200 按顺序提取第一个

如果提取成员大于数组长度,那么最后的提取的最后是undefined,代码如下

const arr = [200,300,400]
const [a,b,c,d] = arr
console.log(d) // undefined

2、对象解构和数组解构基本类似,只不过对象解构的取值方式是根据对象的属性名来取值

例如:

const obj = {name:'100',age:'30',size:'M'}
const { name } = obj
console.log(name) // 100

顺便说一下,对象里面的属性名和其他自定义的变量名称如果重名的时候要怎么解决,一旦重名就会报错,看代码:

const obj = {name:'100',age:'30',size:'M'}
const name = 'lucy'
const {name} = obj
console.log(name) // 会报错


// 要么重新命名,要么可以按照下面的写法来避免
const obj = {name:'100',age:'30',size:'M'}
const name = 'lucy'
const {name:nameObj} = obj // 对象属性名称的重新指定
console.log(nameObj) // 100

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐