TypeScript筆記 5--變量聲明(解構和展開)

解構是什么

解構(destructuring assignment)是一種表達式，將數組或者對象中的數據賦給另一變量。

在開發過程中，我們經常遇到這樣問題，需要將對象某個屬性的值賦給其它兩個變量。代碼如下:

var person = {
    name:'xxxx',
    age: 20,
    hobby:['football', 'run']
}

var a = person.name;
var hobby = person.bobby;

有了解構，我們可以精簡代碼了

var person = {
    name:'xxxx',
    age: 20,
    hobby:['football', 'run']
}
let {a, hobby} = person;

let [first] = person.hobby;

數組解構

let nums = [1,2,3]
let [f,s] = nums;
console.log(f); // 輸出： 1
console.log(s); // 輸出： 2

將數組中前兩項的值分別賦給f和s

變量值交換

[f, s] = [s, f];
console.log(f); // 輸出： 2
console.log(s); // 輸出： 1

使用...創建剩余變量

let nums= [1,2,3,4]
let [f, ...rest] = nums;
console.log(f);   // 輸出： 1
console.log(rest);// 輸出： [2,3,4]

忽略數組中某些元素

let [first] = [1, 2, 3, 4];
console.log(first); // 輸出： 1
let [, second, , fourth] = [1, 2, 3, 4];

對象解構

let o = {
    a: "foo",
    b: 12,
    c: "bar"
}
let { a, b } = o;
console.log(a);   // 輸出： foo
console.log(b);// 輸出： 12

將對象o.a賦值給a,0.b賦值給b，這里的a,b都是對象屬性名且必須一致，而屬性c則會忽略

重命名
上述例子中聲明的變量a和b必須和對象中屬性一致，如果想換一個名字，寫法如下：

let { a: aa, b: bb } = o;

默認值

let o = {
    a: "foo",
    b: undefined,
    c: "bar"
}
let {a, b=1}= o;
console.log(a);   // 輸出： foo
console.log(b);// 輸出： 1

當屬性b的值為undefined時，解構表達式會使用默認值

展開

展開和解構正好相反，將一個數組展開為另一個數組，或將一個對象展開為另一個對象。
數組展開

let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

console.log(bothPlus);// 輸出：0,1,2,3,4,5

展開操作會對數組first和second淺拷貝，如果fisrt值修改，則bothPlus值不會改變。但是如果first中是對象數組，改變對象內部的值，bothPlus對應的值會改變。

對象展開

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };
console.log(search); //輸出：{food: "rich", price: "$$", ambiance: "noisy"}

展開是從做到右處理，意味着對象后面的屬性會覆蓋前面的。如下：

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = {food: "rich", ...defaults };
console.log(search); //輸出：{food: "spicy", price: "$$", ambiance: "noisy"}

注意：使用...創建展開，請使用typescript@2.1.x版本