Spread

const arr = [7, 8, 9];
const badNewArr = [1, 2, arr[0], arr[1], arr[2]];
console.log(badNewArr); // [1, 2, 7, 8, 9]
const newArr = [1, 2, ...arr];
console.log(newArr);// [1, 2, 7, 8, 9]

Spread文法は...arrという形で書かれています.上記の例に示すように、配列内のすべての情報を要素として入れることを意味します.spread構文は非配列だけではありません.すべてのiterable形式の資料構造が適用されます.たとえば、すべての配列、文字列、Map、Setなどです.

💡 Iterable : arrays, strings, maps, sets ❗️Not Objects

文字列への展開の適用

const str = 'doodream';
const strArr = [...str];
console.log(strArr); //(8) ["d", "o", "o", "d", "r", "e", "a", "m"]

使用例 const testObj = { testFunc: function (name, age, gender) { console.log(name, age, gender); }, }; const tmp = ['doodream', 29, 'male']; testObj.testFunc(...tmp); //doodream 29 male

オブジェクトへのSpreadの適用

ES 2018以降、拡張構文はオブジェクトにも適用されている.

アレイとは異なり、順序は重要ではありません.ただし、二重オブジェクトの深度コピーは同様にできません.

const testObj = {
  testFunc: function (name, age, gender) {
    console.log(name, age, gender);
  },
};
const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
};
console.log(testObj2);
const testObjCopy = { ...testObj2 };
// {name: "doodream", age: 28, testFunc: ƒ}
testObjCopy === testObj2
  ? console.log(`it's not copy`)
  : console.log(`it's copy`);
// it's copy

コピー後に二重オブジェクトの属性が変更されると、コピーされたオブジェクトの属性も同様に変化することがわかります.つまり、深刻な放射線は発生しません.

const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  testObj,
};

const testObjCopy = { ...testObj2 };
testObj2.testObj.gender = 'female';
console.log(testObjCopy.testObj.gender); // female
console.log(testObj2.testObj.gender); // female

testObjCopy === testObj2
  ? console.log(`it's not copy`)
  : console.log(`it's copy`);
// it's copy

アレイ内の...rest

const testArr = [1, 2, 3, 4, 5];
const [a, b, ...other] = testArr;
console.log(a, b, other); // 1 2 (3) [3, 4, 5]

const testArr = [1, 2, 3, 4, 5];
const testArr2 = [6, 7, 8, 9];
const [a, , b, ...other] = [...testArr, ...testArr2];
console.log(a, b, other); // 1 3 (6) [4, 5, 6, 7, 8, 9]

上記の例でスキップした部分を除いて、配列は他のイラン変数に圧縮されます.この圧縮可能なspread構文をrestと呼ぶ.restはいつも最後にしなければならない.

const testArr = [1, 2, 3, 4, 5];
const testArr2 = [6, 7, 8, 9];
const [a, , b, ...other, c] = [...testArr, ...testArr2];
console.log(a, b, other); 
//Uncaught SyntaxError: Rest element must be last element

以上のようにRestに関するエラーが発生したためである.したがって,1回のデータ構造化では,REST構文は1回しか使用できない.

オブジェクトで..。rest

const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
};

const { name, ...rest } = testObj2;
console.log(name, rest);
// doodream, {age:28, gender: 'male'}

上記のコードのように、拡散コードを使用して残りのオブジェクトのプロパティを取り出して読み込むことができます.

伝達関数のパラメータ

const testArr = [1, 2, 3, 4, 5];
const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
};
const testFunc = (...number) => {
  console.log(number); 
};
testFunc(...testArr);// 1, 2, 3, 4, 5
testFunc(...testObj2); // [{name: "doodream", age: 28, gender: "male"}]

上記のコードに示すように、関数ではパラメータとして...構文を使用する場合、この変数は配列を表します.ここで相手を伝えるのも同じです.

const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
};

const testArr = [1, 2, 3, 4, 5];
const testFunc = ({ name, ...number }) => {
  console.log(name); // doodream
  console.log(number);// {age: 28, gender: "male"}
};

testFunc(testObj2);

上記のコードに示すように、オブジェクトのプロパティを分離するには、{}カッコ内のオブジェクト分解割り当てを使用する必要があります.