什麼是解構?
在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 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...