ES6解構賦值,了解這些可以解決80 業務場景

2021-09-26 06:43:20 字數 1155 閱讀 4961

什麼是解構?

在es5的時候,如果物件中提取某個字段,得進行申明變數後賦值的操作,步驟較為繁瑣。es6通過解構賦值操作,可以將屬性/值從物件/陣列中取出,快速賦值給其他變數。

簡單的例子:

// 物件

const author = ;

const = author; // 等同於 const name = user.name;

console.log(name); // cmyh

// 陣列

const arr = [10, 20, 30, 40, 50];

[a, b, ...rest] = arr;

console.log(a, b, rest); // 10 20 [30, 40, 50]

從簡單中進行公升級:

1. 如何賦初值?

const author = ;

const = author;

console.log(age); // 18

2. 如何重新命名?

(例如我不想要name,要換成nickname)

const author = ;

const = author;

console.log(nickname); // 注意此時再取name就找不到了哦

3. 物件裡面有物件/陣列咋辦?

const author = 

};const } = author;

console.log(value); // 此處可以給value重新命名和賦初值哦,結合上面的

做出這個題目,吃透解構:

const author = ,

html:

}};// 要求:

// 1.把dom中的key取出來,並且賦值給變數domname,預設值為'body'

// 2.把style中的'color: #333'取出來,賦值給變數color,['width: 100','height: 100']賦值給變數area

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...