Rest parameter

これは、パラメータを使用するために

変数の前に拡張オペレータ(...3点)を追加することを意味します.

restパラメータを使用して、関数に渡されたパラメータリストを配列として受信します.

function foo(...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

論点はparamおよびrestパラメータ

に順次割り当てられる

関数bar(.rest,param 1,param 2)restパラメータは、最初の変数として使用できません.

は常に最後にある必要があります.

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

restパラメータはパラメータ個数が可変関数の場合に役立ちます!

ArgumentsオブジェクトVS Restパラメータ

パラメータオブジェクトは類似配列オブジェクトであり、restパラメータは配列である.

タイルのようなオブジェクトはタイルのように見えますが、オブジェクトの性質があるため、タイルの方法は使用できません.類似した配置オブジェクトは、オブジェクトオブジェクトの方法を使用できます.

は、同様にオブジェクトを並べてキー値でインデックスを返します.

function getAllParamsByRestParameter(...args) {
      return args;
    }
function getAllParamsByArgumentsObj() {
      return arguments;
    }

const restParams = getAllParamsByRestParameter('first', 'second', 'third');
const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');

console.log(typeof restParams) // object
console.log(typeof argumentsObj) // object
console.log(Array.isArray(restParams)) // true
console.log(Array.isArray(argumentsObj)) // false
console.log(Object.keys(argumentsObj)) // ["0", "1", "2"])
console.log(Object.values(argumentsObj)) // ['first', 'second', 'third']

Spread syntax

Spread構文は、ターゲットを単一の要素に分離します.

配列を展開してパラメータとして渡すか、各要素として入れるのによく使用されます.

function foo(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}
const arr = [1, 2, 3];
foo(...arr); // Array를 매개변수로 전달.

Spread構文を使用してパラメータがrestパラメータであることを定義します.

function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3 ]
}
foo(1, 2, 3);

Spread構文を使用するパラメータは、各要素によって別々に渡されます.(RestパラメータX)

restパラメータは最後のパラメータでなければなりませんが、Spread構文を使用した引数は自由に使用できます.

function bar(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}
bar(...[1, 2, 3]);

配列での展開構文の使用

配列をコピーするには、sliceメソッドを使用します.

var arr  = [1, 2, 3];
var copy = arr.slice();

console.log(copy); // [ 1, 2, 3 ]

// copy를 변경한다.
copy.push(4);

console.log(copy); // [ 1, 2, 3, 4 ]
// arr은 변경되지 않는다.
console.log(arr);  // [ 1, 2, 3 ]

Spread構文もsliceと同様に既存の配列は変更されないため可変である.

const arr = [1, 2, 3];
const copy = [...arr];

console.log(copy); // [ 1, 2, 3 ]
copy.push(4);

console.log(copy); // [ 1, 2, 3, 4 ]
// arr은 변경되지 않는다.
console.log(arr);  // [ 1, 2, 3 ]

arr.concat()メソッドのように組み合わせを並べることができます.

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; 

console.log(arr1) // [0, 1, 2, 3, 4, 5]

オブジェクトでの展開構文の使用

obj 1とclonedobjのキーと値は同じですが、参照は異なります.

オブジェクトが結合された場合、同じキー値が存在する場合は、後のオブジェクトの値で上書きされます.

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

console.log(clonedObj) // {foo: "bar", x: 42}
console.log(mergedObj) // {foo: "baz", x: 42, y: 13}
console.log(clonedObj === obj1) // false

次に、浅いコピーとdeepcopyについて説明します.