分为:解构对象,解构数组
作用:快速从对象或者数组中获取成员
解构对象
语法:const { 键名1,键名2,...... } = 对象
作用: 从对象中获取同名键名定义为变量
注意: 使用 {} 解构对象,并且不用一一对应,因为对象是没有顺序的,只要是能对应就行
特点:解构对象可以起一个别名,之后就用别名取值,用原来的名字取不到
语法: const { 键名:别名 } = 对象
方法:数据怎么写, 解构就怎么写
把数据变成变量
// 解构赋值的方式从对象中获取成员
const obj = {
name: 'Yuanyuan',
age: 18,
gender: '男'
}
// 前面的 {} 表示我要从 obj 这个对象中获取成员了
// obj 必须是一个对象
const { age } = obj
console.log(age)
// 解构赋值的方式从对象中获取成员
const obj = {
name: 'Yuanyuan',
age: 18,
gender: '男'
}
const { age,score } = obj
console.log(age,score) // 不会报错,相当于是加了一个score,只不过显示undefined
或者可以给解构对象起别名
// 解构对象可以起一个别名
const obj = { name: 'Yuanyuan', age: 18, gender: '男' }
/*
相当于是取出'Yuanyuan'这个值,并且起一个别名叫n,g也是一样,
后面用的时候就用别名,相当于是起了一个简单点的名字,
之后取值用n,age,b,用name和gender取不到值
*/
const { name: n, age, gender: g } = obj
console.log(n, age, g)
解构多维对象
// 解构多维对象
const obj = {
name: 'Yuanyuan',
age: 18,
gender: '男',
info: {
name: 'Lala',
weight: 180,
height: 180,
desc: {
message: '这个人很懒, 啥也没说!'
}
},
hobby: [ '健身', '吃肉', '睡觉' ]
}
const {
name,
age: a2,
info: {
name1,
weight,
height,
desc: {
message: m
}
},
hobby: [ a, b, c ]
} = obj
console.log(m, a2, a) // 可以起别名,也可以需要的就写,不需要的就不写
解构数组
语法:const [ 变量1,变量2,......] = 数组
作用:按照数组的索引顺序, 依次给变量赋值
注意:使用 [] 解构数组,并且是有顺序的,必须一一对应,后面的可以不写,但是中间不能不写
// 使用解构赋值的方式从数组中获取成员
const arr = ['reo', 'yuta', 'hayato']
// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] = arr
解构多维数组
原则: 数组怎么写的, 解构就怎么写
把数据替换成变量
// 解构多维数组
const arr = [1, 2, [3, 4, [5, 6, [7, 8, [9]]]]]
// 需求: 获取 9 这个数据
const [a, b, [c, d, [e, f, [g, h, [i]]]]] = arr
console.log(i, d)