定义:从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
一、数组的解构
数组:
const arr = [1 , 2 , 3] ;
1.1解构所有值
常规数组值的获取是通过索引:
const a = arr[0] ;
const b = arr[1] ;
const c = arr[2] ;
console.log(a,b,c); //输出 1 2 3
通过数组解构进行:
const [a , b , c] = arr ;
console.log(a,b,c); //输出 1 2 3
通过数组解构获取二维数组中的值
const arr2 = [1,2,[3,4]] ;
const [a,b,c] = arr2 ;
console.log(c); //输出 [3,4]
通过数组解构获取二维数组中具体某个数的值
const arr2 = [1,2,[3,4]] ;
const [a, , [ , c]] = arr2 ;
console.log(c); //4
通过数组的解构交换两个变量的值
//交换两个变量的值
let a = 2 ;
let b = 1 ;
//把等号右边的值给左边
[a , b] = [b , a] ;
console.log(a , b); // 1 2
二、对象的解构
数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
对象:
const obj = {
name : 'yy' ,
age : 18 ,
say : function () {
console.log(this.name);
}
}
对象的访问:
点语法 ------ 具体的属性名 ------ 不能解析变量
[ ] 语法 ------ 通用const a = 'age' ; console.log(obj.age); //18 console.log(obj['age']); //18 console.log(obj[a]); //18
常规方式获取对象
const a = 'yy' ;
const b = 18 ;
const c = '100kg' ;
const fn = function () {
console.log(obj.name);
}
console.log(a); //输出:yy
解构获取所有值
const {name : a , age : b , say : fn} = obj ;
console.log(a , b , fn);
给对象添加属性和属性值
obj.weight = '1000kg' ;
console.log(obj);
简写 :属性名和属性值是一样的
const a1 = 1 ;
const a2 = 2 ;
const a3 = 3 ;
const obj2 = {
a1 ,
a2 ,
a3
}
console.log(obj2); // {a1: 1, a2: 2, a3: 3}
- 对象的遍历使用 for in
for(let key in obj){
console.log(key , obj[key]);
}