昨日HA試験は時間通りに終わり、ES 6文法のarrow関数を復習しました.
今回はspread文法と構造分解配分を復習します.

Spread文法とは?

複数の値からなる配列など、単一の値のリストを展開します。

※Restparameter:関数に渡されるパラメータリストを配列とするために、パラメータ名の前に…ラベル枚

要点を整理する

rest parameterはパラメータリストを配列として渡します.
Spread構文は、これらのrestパラメータを展開することによって、単一の値のリストを作成します.

Spread構文で使用可能なターゲット

Array String Map Set DOMはパラメータのように...書けるもの

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

console.log(...'Yeonlisa'); // Y e o n l i s a

console.log(...new Map([['a','1'], ['b','2']])); // ['a', '1'], ['b', '2']

console.log(...new Set([1, 2])); // 1 2

非かわいい通常のオブジェクトはターゲットではなく、Spread syntaxの成果物も値として使用できません.

Spread構文が使用可能な場合

1.関数呼び出し文の引数リストで使用

場合によっては、要素の集合配列を展開し、各値のリストとしてリストし、関数の引数リストに渡す必要があります.
Spread構文が現れる前に、この場合はFunctionです.prototype.Applyを使用しました

ex)
ES5)
var arr = [1,2,3,4]
// apply 함수의 두번째 인수(배열)는 apply 함수가 호출하는 함수의 인수 목록이다.
// 배열이 펼쳐져서 인수로 전달되는 효과가 있다.
var max = Math.max.apply(null, arr); // 4

ES6)
let arr = [1,2,3,4]
// Spread syntax를 사용하여 배열을 1,2,3,4로 펼쳐서 Math.max에 전달한다.
// Math.max(...[1,2,3,4]) === Math.max(1,2,3,4)
let max = Math.max(...arr); // 4

本当にシンプルで清潔感があります^^

2.タイル文字の内部で使用

1. concat

Spread構文が表示される前に、2つの配列を1つの配列にマージする場合はconcatメソッドを使用する必要があります.

ex)
ES5)
var arr = [1,2,3].concat([4,5,6]);
// 배열 [1,2,3]에 [4,5,6]을 concat해야 했다.
console.log(arr); // [1,2,3,4,5,6]

ES6)
let arr = [...[1,2,3],...[4,5,6]];
// 배열 안에서 Spread syntax를 사용하여 배열을 1,2,3,4,5,6으로 펼친다.
console.log(arr); // [1,2,3,4,5,6]

2. splice

Spread構文が現れる前に、ある配列の間に他の配列の要素を追加または削除する際にspliceメソッドが使用されました.このとき、2番目のパラメータ(配列)が分解されてapplyメソッドで呼び出された関数に渡され、3番目のパラメータが配列を渡すと、配列自体が追加されます.

ex)
ES5)
var arr1 = [1,4];
var arr2 = [2,3];
// apply 메서드의 두 번째 인수(배열)는 apply 메서드가 호출한 splice 메서드의 인수 목록이라고 했다.
// apply 메서드의 두 번째 인수 [1,0].concat(arr2)는 [1,0,2,3]으로 평가된다.
// 따라서 [1,0,2,3]이 해체되어 전달된다.
// 즉, arr1[1]부터 0개의 요소를 제거하고 그 자리에 새로운 요소(2,3)을 삽입한다.
Array.prototype.splice.apply(arr1, [1,0].concat(arr2));
console.log(arr1); // [1,2,3,4]

ES6)
let arr1 = [1,4];
let arr2 = [2,3];
arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1,2,3,4]

3.アレイのコピー

Spread構文が表示される前に、sliceメソッドを使用して配列をコピーします.

ex)
ES5)
var origin = [1,2,3];
var copy = origin.slice();

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

ES6)
let origin = [1,2,3];
let copy = [...origin];

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

このときcopyは、元の配列の各要素を浅いコピー(浅いコピー)して作成される新しいコピーです.
アドレス値にコピーしないため、copy=originはfalseです.

4.iterableを配列に変換

Spread構文が表示される前にiterableを配列に変換するには、Functionを実行します.prototype.applyまたはfunction.prototype.callメソッドを使用してsliceメソッドを呼び出す必要があります.

ex)
ES5)
function sum() {
  // iterable이면서 유사 배열 객체인 arguments를 배열로 변환한다.
  var args = Array.prototype.slice.call(arguments);
  
  return args.reduce(function (pre, cur) {
    return pre + cur;
  }, 0);
}

console.log(sum(1,2,3,4)); // 10

ES6)
방법1. Spread syntax 사용
function sun() {
  // iterable이면서 유사 배열 객체인 arguments를 배열로 변환한다.
  return [...arguments].reduce((pre, cur) => pre + cur, 0);
}

console.log(sum(1,2,3,4)); // 10

방법2. Rest parameter 사용
let sum = (...args) => args.reduce((pre, cur) => pre + cur, 0);
// Rest parameter인 args는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

console.log(sum(1,2,3,4)); // 10

ここでSpread構文を使用すると、iterableを配列に変換するのがより容易になります.argumentsオブジェクトはiterableであり、類似配列オブジェクトであり、Spread構文の構文オブジェクトとすることができる.
rest parameterの使用はSpread構文よりも簡潔です
★ここで気をつけたいのは!iterable以外の類似配列オブジェクトはSpread構文の構文ターゲットとして使用できません.

ex)
// iterable이 아닌 유사 배열 객체 
let arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  3: 4,
  length: 4
}

let arr = Array.prototype.slice.call(arrayLike); // [1,2,3,4]
console.log(Array.isArray(arr)); // true

// Spread syntax 사용할 수 없는 예시
let arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  3: 4,
  length: 4
}

let arr = [...arrayLike]; // Uncaught TypeError: arrayLike is not iterable

// 방법 : Array.from 메소드를 사용한다.
Array.from(arrayLike); // [1, 2, 3, 4]

iterableではなくアレイのようなオブジェクトをアレイに変更するには、Arrayを使用します.fromメソッドを使用すればいいです.Array.from:類似配列オブジェクトまたはiterableを配列に変換します.

3.対象文字の内部で使用

Spread構文のターゲットはiterableですが、Spreadプロパティでは通常のオブジェクトに対してSpread構文を使用できます.

ex)
// Spread property
// 객체 복사(얕은 복사)
let obj = { x: 1, y: 2, z: 3 };
let copy = { ...obj };
console.log(copy); // {x: 1, y: 2, z: 3}
console.log(obj === copy); // false

// 객체 병합
let merged = { x: 1, y: 2, z: 3, ... { a: 4 }};
console.log(merged); // {x: 1, y: 2, z: 3, a: 4}

Spreadアトリビュートが表示される前に、オブジェクト.assignメソッドを使用して、複数のオブジェクトをマージするか、特定のプログラムを追加または変更します.

ex)
// 객체 병합. property가 중복되는 경우 뒤에 위치한 property가 우선권을 갖는다.
let merged = Object.assign({}, { x: 1, y: 2}, { y: 3, z: 4});
console.log(merged); // {x: 1, y: 3, z: 4}

// 특정 property 변경
let changed = Object.assign({}, { x: 1, y: 2}, { y: 10 });
console.log(changed); // {x: 1, y: 10}

// property 추가
let added = Object.assign({}, { x: 1, y: 2}, { z: 0 });
console.log(added); // {x: 1, y: 2, z: 0}

Spreadプロパティが表示され、Objectが表示されます.付与方法の代わりに使用できます.

ex)
// 객체 병합. property가 중복되는 경우 뒤에 위치한 property가 우선권을 갖는다.
let merged = { ...{ x: 1, y: 2}, ...{ y: 3, z: 4}};
console.log(merged); // {x: 1, y: 3, z: 4}

// 특정 property 변경
let changed = Object.assign({}, { x: 1, y: 2}, { y: 10 });
 // -> changed = { ... { x: 1, y: 2}, ...{ y: 10 });
console.log(changed); // {x: 1, y: 10}

// property 추가
let added = Object.assign({}, { x: 1, y: 2}, { z: 0 });
// -> added = { ... { x: 1, y: 2}, ...{ z: 0 });
console.log(added); // {x: 1, y: 2, z: 0}

構造分解配分とは?

構造化配列などのiterableまたはオブジェクトの構造を破壊し、1つ以上の変数に個別に割り当てます。 これは、アイテムやオブジェクトの文字(配列など)から必要な値だけを抽出して変数に割り当てる場合に便利です。

アレイ構造分解の割り当て

ES 6におけるアレイ構造分解割当は、アレイ内の各要素をアレイから抽出し、1つ以上の変数に割り当てる.
このときの配列構造分解割り当てのターゲット(すなわち、割り当て文の右側)はiterableであり、割り当て基準は配列のインデックスである必要があります.
つまり、順番に配分されます.
配列構造分解割当ては、配列と同じiterableに必要な要素のみを抽出し、変数に割り当てたい場合に便利です.

ex)
ES5에서 구조 분해하여 1개 이상의 변수에 할당하는 방법)
var arr = [1,2,3,4];

var one = arr[0];
var two = arr[1];
var three = arr[2];
var four = arr[3];

console.log(one, two, three, four); // 1 2 3 4

ES6에서 구조 분해 할당하는 방법)
let arr = [1,2,3,4];

// 변수 one, two, three, four를 선언하고 배열 arr를 구조분해하여 할당한다.
// 이때의 할당 기준은 배열의 인덱스다. 즉, 순서대로 할당된다.
let [one, two, three, four] = arr;

console.log(one, two, three, four); // 1 2 3 4

に道を教える

アレイ構造の割当てを分割し、割当て演算子の左側に値を割り当てる変数を宣言します.
このとき,変数は配列順で宣言される.

ex)
let [x, y, z] = [1, 2, 3];

このとき、右側にiterableが指定されていない場合はエラーが発生します.

ex)
let [x, y, z]; // SyntaxError: Missing initializer in destructuring declaration
let [a, b, c] = {}; // TypeError: {} is not iterable

アレイ構造分解割当の基準は、アレイのインデックスである.すなわち,このとき変数の個数とiterableの要素個数が必ずしも一致するとは限らない.

ex)
let [a, b] = [1, 2];
console.log(a, b); // 1 2

let [c, d] = [1];
console.log(c, d); // 1 undefined

let [e, f] = [1, 2, 3];
console.log(e, f); // 1 2

let [g, , h] = [1, 2, 3];
console.log(g, h); // 1 3

アレイ構造分解割り当ての変数では、restパラメータのrest要素に類似しています.使用できます.
rest要素はrestパラメータと同様に最後に配置する必要があります.

ex)
// Rest element
let [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [2, 3];

オブジェクト構造分解の割り当て

ES 5では、属性キーを使用してオブジェクトの各属性をオブジェクトから構造に分解し、変数に割り当てる必要があります.

ex)
ES5)
var user = { firstName: 'Lisa' , lastName: 'Yeon' };

var firstName = user.firstName;
var lastName = user.lastName;

console.log(firstName, lastName); // Lisa Yeon

ES 6におけるオブジェクト構造分解割当は、オブジェクトから抽出されたオブジェクトの各属性を分解し、1つ以上の変数に割り当てる.
オブジェクト構造分解割り当てのターゲット(割り当て文の右側)は、属性として割り当てられたオブジェクトである必要があります.
すなわち,順序は意味がなく,宣言した変数名と属性キーが一致する限り割り当てられる.

ex)
ES6)
let user = { firstName: 'Lisa' , lastName: 'Yeon' };

// 변수 lastName, firstName을 선언하고 user 객체를 구조분해하여 할당한다.
// 이때 property 키를 기준으로 구조분해 할당이 이루어지며 순서는 의미가 없다.
let { lastName, firstName } = user;

console.log(firstName, lastName); // Lisa Yeon

に道を教える

オブジェクト構造分解を割り当てるには、属性値を割り当てる変数を分配演算子の左側に宣言し、変数をオブジェクト文字形式として宣言する必要があります.

ex)
let { lastName, firstName } = { firstName: 'Lisa' , lastName: 'Yeon' };

右側にオブジェクトまたはオブジェクトとして評価できる式(String、Number、Arrayなど)を指定しないとエラーが発生します.

ex)
let { lastName, firstName }; // SyntaxError: Missing initializer in destructuring declaration
let { lastName, firstName } = null; // TypeError: Cannot destructure property 'lastName' of 'null' as it is null.

属性略語表現で宣言することもできます.

ex)
let { lastName, firstName } = user;
// 위와 아래는 같은 표현이다.
let { lastName: lastName, firstName: firstName } = user;

オブジェクトの属性キーとその他の変数名を使用して属性値を割り当てるには、次の変数を宣言します.

ex)
let user = { firstName: 'Lisa' , lastName: 'Yeon' };
// property 키를 기준으로 구조분해 할당이 이루어진다.
// property 키가 lastName인 property 값을 ln에 할당하고,
// property 키가 firstName인 property 값을 fn에 할당한다.
let { lastName: ln, firstName:fn } = user;
console.log(fn, ln); // Lisa Yeon

オブジェクトから属性キーを抽出するために必要な属性値のみを変数に割り当てる場合に便利です.

ex)
let str = 'Coding';
// String 래퍼 객체로부터 length property만 추출한다.
let { length } = str;
console.log(length); // 6

let todo = { id: 1, content: 'HTML' , completed: true };
// todo 객체로부터 id property만 추출한다.
let { id } = todo;
console.log(id); // 1

オブジェクト構造分解割当の変数については、restパラメータまたはrest要素に類似したrest属性を使用します...使用できます.最後にする必要があります.

ex)
let { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }