[AVAScript-構文]ES 6構文

ES6
1.オブジェクトイニシエータ
オブジェクトのkeyとvalueの値が同じであれば、記述を省略できます.

{
  const ellie1 = {
    name: 'Ellie',
    age: '18',
  };

  const name = 'Ellie';
  const age = '18';

  // 💩
  const ellie2 = {
    name: name,
    age: age,
  };

  // ✨
  const ellie3 = {
    name,
    age,
  };

  console.log(ellie1, ellie2, ellie3);
  console.clear();
}

どちらも同じ結果を得た.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer
2.分配構造分解

オブジェクトにアクセスするキーと値.nameでアクセスする場合、構造分解を使用してカッコでオブジェクトキー名{}を定義し、=studentと記入すると、スチュワートの値はname、levelにそれぞれ割り当てられます.

別の名前で発表したいなら
新しい名前の作成:必要な名前をコロンで宣言します.

配列にも使用でき、indexを使用して配列にアクセスできます.
もちろん、配列を使用する場合は[]カッコを使用します.

  // object
  const student = {
    name: 'Anna',
    level: 1,
  };

  // 💩
  {
    const name = student.name;
    const level = student.level;
    console.log(name, level);
  }

  // ✨
  {
    const { name, level } = student;
    console.log(name, level);

    const { name: studentName, level: studentLevel } = student;
    console.log(studentName, studentLevel);
  }

  // array
  const animals = ['🐶', '😽'];

  // 💩
  {
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);
  }

  // ✨
  {
    const [first, second] = animals;
    console.log(first, second);
  }
  console.clear();
}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
3.Spread Syntax

新しい配列を作成し、配列内の各項目をコピーします.
spreadを用いて...array配列を簡単にコピーすることができる.
つまり、...arrayとは、並べられたものを一つ一つコピーして、単独で持ってくることを意味する.

新しいアイテムを追加するとき...array syntaxを使用して、追加したいアイテムを作成します.

オブジェクトはリファレンスのみをコピーするため、エクスパンダを使用して元の値を変更すると、すべてのオブジェクトが変更されますので、注意してください.

オブジェクトをコピーするために使用することもできます.

2つの配列をコピーしてインポートしてマージする方法で、2つ以上の配列をマージできます.

マージ時には、鍵が同じ場合、一番後ろの鍵が前の鍵を上書きすることに注意してください.

{
  const obj1 = { key: 'key1' };
  const obj2 = { key: 'key2' };
  const array = [obj1, obj2];

  // array copy
  const arrayCopy = [...array];
  console.log(array, arrayCopy);

  const arrayCopy2 = [...array, { key: 'key3' }];
  obj1.key = 'newKey';
  console.log(array, arrayCopy, arrayCopy2);

  // object copy
  const obj3 = { ...obj1 };
  console.log(obj3);

  // array concatenation
  const fruits1 = ['🍑', '🍓'];
  const fruits2 = ['🍌', '🥝'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits);

  // object merge
  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  const dog = { ...dog1, ...dog2 };
  console.log(dog);
  console.clear();
}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
4.Default parameters
パラメータを持つ関数を定義すると、関数を呼び出すときにパラメータが呼び出されない場合、undefinedが表示されます.これを防止するにはif文でデバッガメッセージを出力する必要がありますが、デバッガパラメータを使用すると、パラメータの後にデフォルト値を指定して設定したデバッガ値を出力し、コードをよりきれいにすることができます.

{
  // 💩
  {
    function printMessage(message) {
      if (message == null) {
        message = 'default message';
      }
      console.log(message);
    }

    printMessage('hello');
    printMessage();
  }

  // ✨
  {
    function printMessage(message = 'default message') {
      console.log(message);
    }

    printMessage('hello');
    printMessage();
  }
  console.clear();
}

/**
 * Ternary Operator
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
 */


{
  const isCat = true;
  // 💩
  {
    let component;
    if (isCat) {
      component = '😸';
    } else {
      component = '🐶';
    }
    console.log(component);
  }

  // ✨
  {
    const component = isCat ? '😸' : '🐶';
    console.log(component);
    console.log(isCat ? '😸' : '🐶');
  }
  console.clear();
}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters
5. Ternary Operator
例のisCat変数がtrueかfalseかで構成部品をクリーンアップする場合は、次の操作を行います.
文処理を使用する場合は、Ternary Operatorを使用してコード記述を簡略化できます.

{
  const isCat = true;
  // 💩
  {
    let component;
    if (isCat) {
      component = '😸';
    } else {
      component = '🐶';
    }
    console.log(component);
  }

  // ✨
  {
    const component = isCat ? '😸' : '🐶';
    console.log(component);
    console.log(isCat ? '😸' : '🐶');
  }
  console.clear();
}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
6. Template Literals
カッコ、ドル記号、カッコを使用して、変数と文字列を簡単に表すことができます.${}

{
  const weather = '🌤';
  const temparature = '16°C';

  // 💩
  console.log(
    'Today weather is ' + weather + ' and temparature is ' + temparature + '.'
  );

  // ✨
  
  console.log(`Today weather is ${weather} and temparature is ${temparature}.`);

}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
7.const/letブロックスキャン
varの変数スキャンは関数単位で、
const/letはブロック単位です.
constは定数であり、letは変数を宣言するために使用されます.
変数を宣言するときにvar、let、constを使用できます.通常はvarが好きではありません.これはvarが向上した特性のためです.
護衛とはvar宣言や関数宣言などをその標的の一番前にドラッグするように動作する特性である.

function foo() {
    let a = 1
    if (true) {
        let a = 2
        console.log(a)  // 2
    }
    console.log(a)  // 1
}

8. Class
プロトタイプベースの代替材料として使用
クラスは、オブジェクト向けプログラミングで特定のオブジェクトを作成するために変数とメソッドを定義するフレームワークで、オブジェクトのステータス(メンバー変数)とメソッド(関数)を定義します.簡単に言えば、様々なオブジェクトを作るための青写真と考えられる.

class Shape {
    constructor() {}
}

class Rectangle extends Shape {
    constructor(w, h) {
        super(w, h)
        this.w = 20
        this.h = 10
    }    
    getArea(w, h) {
        return w * h
    }
 	// get, set, static 예약어로 메서드를 설정할 수 있음
}
let rect = new Rectangle()
console.log(rect.getArea(30, 20))	// 600

Arrow function

// #1: 일반적인 화살표 함수
let square = (num) => {
    return num * num
}
console.log(square(4))	// 16

// #2: 화살표 내의 this는 ES5의 function 내의 this와 다름
console.log(this === window)		// true
let basket = {
    _name: "ball",
    _mates: ["rebound", "shoot", "pass"],
    matesCount() {
        console.log(this === window)	// false
        console.log(this)				// basket 객체를 가리킴
        this._mates.forEach(f => console.log(this._name + " is " + f ))
    }
}
basket.matesCount()

// #3: 화살표 함수의 return 값
const even = [2, 4, 6, 8, 10, 12, 14]
const odd  = even.map(n => n + 1)
const num  = even.map((n, i) => n + i)	// map(crruentValue, index, array)
console.log(even)	// [2, 4, 6, 8, 10, 14]
console.log(odd)	// [3, 5, 7, 9, 11, 13, 15]
console.log(num)	// [2, 5, 8, 11, 14, 17, 20]

// #4: 비구조화 지원
const f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
console.log(f())	//	6

Fetch/Promise/Async-await
データ非同期要求に関連する転送の表示