ES6 & Spread/Rest & Destructing & Class/Instance

学習の内容

Spread構文、Rest構文

設計(構造分解)

クラスおよびインスタンス

Spread/Rest構文

Spread構文

Spread構文は主に配列を展開してパラメータとして渡し,配列を展開して各要素として配列に入れるために用いられる.

function sum(num1, num2, num3) {
  return num1 + num2 + num3;
}

const numberArr = [1, 3, 5];

console.log(sum(...numberArr)); // 9

最新の構文

Rest構文は、配列の形でパラメータを受信することができる.
パラメータの個数が可変な場合に役立ちます!

function sum(...args) {
  return args.reduce(function(accumulator, currentValue) {
  	return accumulator + currentValue;
  }, 0); 
}

console.log(sum(1, 5, 8, 13));
console.log(sum(35, 2, 4, 7, 90));

Spreadアレイでの応用

1.連結シナリオ

let arr1 = ['spring', 'summer'];
let arr2 = ['word', ...arr1, 'string'];
console.log(arr2); // ["word", "spring", "summer", "string"]

let arr1 = [9, 8, 7];
let arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2]; // [9, 8, 7, 3, 4, 5]

spread構文は既存の配列を変更しません.(immutable)
arr 1の値を変更するには、再割り当てが必要です.
2.アレイのコピー

let arr1 = [1, 3, 5, 7, 9];
let arr2 = [...arr1]; // arr1.slice()와 유사하다!!

console.log(arr2); // [1, 3, 5, 7, 9]

arr2.push(7); // spread 문법은 기존 배열을 변경하지 않는다! (immutable)
console.log(arr1); // [1, 3, 5, 7, 9]
console.log(arr2); // [1, 3, 5, 7, 9, 7]

Spreadオブジェクトでの使用

let obj1 = {
  id: 'user1',
  age: 27,
  heigth: 167,
};

let obj2 = {
  id: 'user2',
  address: 'seoul',
  birth: 2020,
  email: '[email protected]',
};

let obj3 = {...obj1};
let obj4 = {...obj1, ...obj2};

console.log(obj3); // {id: "user1", age: 27, heigth: 167}
console.log(obj4); // {id: "user2", age: 27, heigth: 167, address: "seoul", birth: 2020,  email: '[email protected]'}

関数から残りのパラメータを取得

function printFunc(str1, str2, ...args) {
  console.log(str1);
  console.log(str2);
  args.forEach(arg => console.log(arg));
}

printFunc('안녕', '하세요', 'q', 'w', 'e', 'r', 't', 'y', 'u');

せっけい

構造分解割り当ては、Spread構文を使用して値をリストし、各値を変数に再割り当てするプロセスを表します.

分解後に新しい変数に割り当てる

整列

let [a, b, ...args] = [10, 20, 30, 40, 50, 60, 70];
console.log(a); // 10
console.log(b); // 20
console.log(args); // [30, 40, 50, 60, 70]

オブジェクト

let {a, b, ...keys} = {
  a: 'hello', 
  b: 'JavaScript',
  c: 'ES6',
  d: 'object',
  e: 'destructing',
}
console.log(a); // hello
console.log(b); // JavaScript
console.log(keys); // {c: "ES6", d: "object", e: "destructing"}

オブジェクト

メソッド呼び出し

メソッド呼び出しはオブジェクトです.メソッド()とは、オブジェクト内でメソッドを呼び出すメソッドです.
単純なオブジェクトの下のコードなどのフォーマットでよく使われます.Singletonモードと呼ばれます.
次のコードは、カウンタを実装するコードの例です.

let countObj = {
  value: 0,
  increase: function () {
    this.value++; // 메소드 호출을 할 경우, this는 countObj 가리킨다
  },
  decrease: function () {
    this.value--;
  },
  getValue: function () {
    return this.value;
  }
};

countObj.increase();
countObj.increase();
countObj.increase();
countObj.decrease();
console.log(countObj.getValue()); // 2

モジュールを使用した新規オブジェクトの作成

Singletonモードでは1つのオブジェクトしか作成できません.
では、同じ機能を持つオブジェクトを作成する必要がある場合は、その名前を変更し、そのメソッドや変数を同じにすればいいのでしょうか.
このようにすると、まったく同じコードをコピー/ペーストすることで再利用性が低下します.
したがって,モジュールモード(すなわち,同じ機能を複数回作成するモジュールモード)を用いて,以下にコードを実装する.

function makeCount() {
  return {
    value: 0,
    increase: function () {
      this.value++; // 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체이다.
    },
    decrease: function () {
      this.value--;
    },
    getValue: function () {
      return this.value;
    }
  }
}

let counter1 = makeCount();
counter1.increase();
console.log(counter1.getValue()); // 1

let counter2 = makeCount();
counter2.decrease();
counter2.decrease();
console.log(counter2.getValue()); // -2

class & instance

class

今回は上記のmakeCounter関数をclassとして作成して学習します.

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Count의 인스턴스이다.
  }
  increase() {
    this.value++; 
  }
  decrease() {
    this.value--; 
  }
  getValue() {
    return this.value;
  }
}

let counter1 = new Counter();
counter1.increase();
counter1.increase();
counter1.decrease();
console.log(counter1.getValue()); // 1

let counter2 = new Counter();
counter2.decrease();
counter2.increase();
counter2.decrease();
counter2.decrease();
counter2.decrease();
console.log(counter2.getValue()); // -3

this

thisと関数の実行方法

これは関数実行時呼び出し(呼び出し)メソッドによって決定される特殊なオブジェクトです!
これは関数を実行するときに決定されるので、実行するコンテキスト(execution context)に依存します.

機能コール

add();

メソッド呼び出し

obj.add();

の新しいキーワード呼び出しジェネレータ

を使用する.

new Add();

関数実行時のバインドモード

これは、関数の実行方法によって異なります.
これは、関数を実行するときの実行時によって異なります.
モードthisは何の値ですか?説明メソッド呼び出し親オブジェクト(実行時に温度点の左側にあるオブジェクト)が値に関連するメソッドを1つのオブジェクトに組み合わせて使用する場合、主にnewキーを使用するジェネレータが新しく生成したインスタンス向けオブジェクトプログラミングを呼び出すために使用されます.call or .apply呼び出しは、最初のパラメータに渡されるオブジェクトを指定するために使用されます.特にapplyでは、配列のセグメントを展開してパラメータに渡す場合に便利です.

矢印関数はどんな場合でもこの点を決定しません!

したがって、矢印関数がどのように実行されても、この値は影響しません.