TypeScriptの解体と展開

解构とは何か
デコンストラクション(デコンストラクション付与)は、配列またはオブジェクト内のデータを別の変数に与える式です.
開発の過程で、オブジェクトの属性の値を他の2つの変数コードに割り当てる必要があるという問題がよく発生します.

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

配列の最初の2つの値をそれぞれ割り当てる˚Fとトランペット
変数値の交換

[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

オブジェクトOAを1つに付与.bはBに与えられ、ここでのA,Bはすべてオブジェクト属性名で一致しなければならないが、属性ߏは無視される.
上記の例で宣言した変数の1つと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の場合、解離式ではデフォルト値が使用されます.
展開
展開と解体は正反対で、1つの配列を別の配列に展開するか、1つのオブジェクトを別のオブジェクトに展開します.配列展開

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

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

展開操作は配列の第1および第2の浅いコピーになり、前のページの値が変更された場合、bothPlusの値は変更されません.ただし、第1のオブジェクト配列がオブジェクト内部の値を変更すると、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"}

注意:使用...配置を作成します[email protected]バージョン#バージョン#