es6學習筆記-解構--方便的資料訪問
阿新 • • 發佈:2018-12-12
陣列和物件是JS中最常用的表示形式。為了簡化提取資訊,ES6新增瞭解構,它能夠按照一定的模式,從陣列和物件中提取值,對變數進行賦值。
解構初體驗
一個簡單的栗子 在es5中,為變數賦值,需要一個一個的指定值。
let a = 1;
let b = 2;
let c = 3;
而用了es6的解構,就很簡潔了
let [a,b,c] = [1,2,3];
再舉一個栗子 我們在開發中會經常拿物件的屬性
const people = { name:will specialty:brilliant } const name = people.name const specialty = people.brilliant
而es6我們可以從物件或者資料中取出資料存入變數裡
const people = {
name:'will',
specialty:'brilliant'
}
const {name,specialty} = people;
有沒有很簡單! 但是需要注意一點,物件賦值可以無序,但是變數名和屬性必須是同名才能取到正確的值,否則你輸出那個也是undefined,這個情況下就視為解構失敗,你不信可以試試。
但是如果你非得寫那麼麻煩,非得自定義個變數名的話,可以寫成這樣的形式
let {name:newName} = {name:'will',age;18}\
newName;//will
但是何必和自己過不去呢
解構預設值
解構賦值允許存在預設值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
他會判斷那個位置有沒有值,undefined是有的,所以這個時候預設值生效,如果這個位置設定為null,則會解構賦值失敗。
但是這個預設值是惰性的,有需要的話他才出來,如果後面有具體的值,它連呼叫都不會呼叫。
function func(){ console.log('i am called!'); } let [a,b = func()] = [1,2];
這個func()連走都不會走的。
字串的解構賦值
字串也可以被解構,這是因為字串被轉換成了 類似陣列的東西
const [a,b,c,d,e] = 'hello';
a;//h
b;//e
c;//l
d;//l
e;//o