TS學習之解構與展開

一、解構

1.解構數組

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

 a) 運用於函數

function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f([6,8]);  
//6
//8

b) 剩余語法 ...(注意...之前的空格)

let [one, ...rest] = [1,2,3,4,5,6];
console.log(one);   //1
console.log(rest)   //[2,3,4,5,6]

let [first] = [1,2,3,4,5,6]
console.log(first)  //1

let [,two,,four] = [1,2,3,4];
console.log(two)    //2
console.log(four)   //4

2.對象解構

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

a)  剩余語法 ...

let o = {
    a: "foo",
    b: 12,
    c: "test"
}
let { c, ...rest } = o;
console.log(c);  //"test"
console.log(rest)   //{ a: 'foo', b: 12 }

b)運用於函數

type C = { a: string, b?: number }
function f({ a, b }: C): void {
    // ...
}

二、展開

它允許你將一個數組展開為另一個數組，或將一個對象展開為另一個對象。

let a1 = ["aa", "bb"];
let a2 = [0, 1];
let a3 = ["a", ...a1, "m", ...a2];
console.log(a3) //[ 'a', 'aa', 'bb', 'm', 0, 1 ]

let o1 = { name: "test", age: 20 };
let o2 = { ...o1, height: 180 }
console.log(o2);    //{ name: 'test', age: 20, height: 180 }