解构对象object

前端-dom-bom/（前端-dom-bom）Ts-（前端-dom-bom）Typescript/（前端-dom-bom）Js-（前端-dom-bom）JavaScript-ES-ECMAScript JS

梗概

• 这里以ts中解构的语法为例，实际上只是比js解构对象多了一个类型声明罢了

1. 解构对象并赋值给变量

let obj = {a:"hi",b:666};
let 名字1,名字2;
//其他代码
({a:名字1, b:名字2}: {a: string, b: number} = obj);

1. 说明:

1. 如果前面已经定义了用于接受的变量, 则必须要用()括起来
2. 花括号内的冒号用来重命名
3. 花括号外的冒号用来指定类型

2. 定义变量并解构对象来初始化

let obj = {a:"hi",b:666};
let {a:名字1, b:名字2}: {a: string, b: number} = obj;

1. 说明:

1. 花括号内的冒号用来重命名
2. 可省略
3. 花括号外的冒号用来指定类型
4. 可省略

2. 解构嵌套对象

const obj = {
  A: 'value1',
  inlineObj: {
    B: {
      c: 'value3'
    },
    b: 'value2'
  }
};
 
// Object destructuring:
const { inlineObj: { B: {c},b } } = obj;
b; // 'value2'
c; // 'value3'

1. 说明:

1. 可以无限嵌套

运用可变(动态)键名解构:

const obj ={
	A:'value1',
	B:'value2'
}
 
const prop = 'A';
const { [prop]: name } = obj;
name; // 'value1'

包装剩余属性成一个新对象

const obj={
	A:'value1',
	B:'value2',
	C:'value3',
}
const {A,...rest} = obj
rest//{B:'value2' , C:'value3'}

实际运用:

1. 如果待解构对象都保存在一个数组中, 常搭配数组内置的map()方法替换原数组的每个对象

实例

之一：对象解构数组

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

• 动态属性名