TIL no.36 - JS Spread operator

2671 ワード
TIL js ES6 テキストリンク

Spread operator


ES 6に追加された構文は、...によって使用することができる.
コードで確認してみましょう!
const arr = [1,2,3,4,5];

console.log(arr) // [ 1,2,3,4,5 ]
console.log(...arr) // 1,2,3,4,5
arr配列をspread 연산자とマークすると、配列の個別要素ではありません.
const arr = [1,2,3,4,5];
const a = [...arr];

console.log(a) // [1,2,3,4,5]
既存のarr配列を新しい配列にコピーする場合は、전개 연산자を使用すると簡単に作成できます.

배열의 병합

const arrA = [1,2,3]
const arrB = [4,5,6]

// concat 사용
console.log(arrA.concat(arrB)); // [1,2,3,4,5,6]

// Spread 사용
console.log([...arrA, ...arrB]); [1,2,3,4,5,6]
spread 연산자を使用すると、array.concat()の代わりに使用することができる.
const arrA = [1,2,3];
const arrB = [4,5,6];

const newArr = [...arrA, "전개연산자", ...arrB];
console.log(newArr) [1, 2, 3,'전개연산자', 4, 5, 6]
これにより,配列結合時に中間に新しい値を容易に加算できる.

객체 복제

const obj = { a:1 , b:2 , c:3 };
const newObj = {...obj , b:4};
オブジェクトをコピーしたり、変更したりできます.

アレイのオブジェクト化


アルゴリズムを解くときにとても良い機能を見つけました!
const obj  = [1,2,3]

const objArr = {...obj}

console.log(objArr) // { '0': 1, '1': 2, '2': 3 }
spread 연산자を使用すると、配列を簡単にオブジェクトに変換できます.

Math 사용

let arr = [11, 30, 45, 28]
let value = Math.max(arr)
console.log(value) // NaN
 
let arr = [11, 30, 45, 28]
let maxValue = Math.max(...arr)
let minValue = Math.min(...arr)
console.log(maxValue) // 45
console.log(minValue) // 11
전개 연산자とMathを用いると,配列された最大数,最小数が容易に得られる.

オブジェクトの変更


オブジェクトの変更
const user = {
  name: "jongjin",
  age: 31,
  password: 12345
};

const killPassword = ({ password, ...rest }) => rest;

const cleanUser = killPassword(user);

console.log(cleanUser); // name,age 만 출력됨
デフォルトの設定
const user = {
  name: "jongjin",
  age: 31,
};

const setCountry = ({ country = "KR", ...rest }) => ({ country, ...rest });

console.log(setCountry(user));

Rest Parameter


spread演算は配列を個別に展開し、restパラメータは単一の要素を配列に結合します.
function func(...rest) {
  console.log(rest);
}

func(1, 2, 3); // [ 1, 2, 3 ]
関数を呼び出すときに使用される関数パラメータ(Parameter)をspread 연산자と書きます.
Rest Parameterといいます
Springboot統合SpringDataJPAにError creating bean with name'entityManagerFactory'defined in classが表示される
オブジェクト向けプログラミング