ES6

ES6
reactはes 6に基づいて設計されているので、まずes 6を見てみましょう.
ES 6(ES 2015):ECMA国際組織によって作成された標準ドキュメントECMAScriptの第6改訂版標準規格
(JavaScriptは、複数のブラウザで共通に作成されています)
へんすう

var:Xを使用(構文に制限がない場合はXを使用)

let:{ }、ブロック単位のscopeを限定

for(let i=0; i<10; i++){} console.log(i); //not defined

const:定数(値を再割り当てできなくても配列とオブジェクトの値を変更できます)

かたわく
文字列を接続するか、文字列の間に変数を挿入して使用します.

${} : let message = `Hello ${student.name} from ${student.city}`;

Default Parameter
パラメータなし関数の呼び出しにdefault値を使用する

function hello(name = 'KI', msg = 'Welcome') {
 return `${msg} ${name}`;
}

console.log(hello()); // Welcome KI

矢印関数
キーワード生成関数

2functionを使用する、returnを使用しない自動戻り値

を使用する.

 function(name){
 	return name.toUpperCase();
 }
 
 name => name.toUpperCase();
 name => () => console.log('hello');
 const name = (name,city) => console.log('${name}'은 ${city}에 산다');

矢印関数とthis

console.log(this.window);	//true
let basket = {
	name : "ball"
    hello(){
    console.log(this === window);	//false
    console.log(this);	//basket 객체
	}
}

ぶんかいこうぞう
すべてのオブジェクトを渡すことなく、必要なオブジェクトの内部にのみ変数を渡す

Array

//es5
const points = [1,2,3];
const x = points[0];
const y = points[1];
const z = points[2];
console.log(x,y,z);		//1,2,3

//ex6
const [x,y,z] = points;
console.log(x,y,z);		//1,2,3

const [x,,z] = points;
console.log(x,z);	//1,3

Object

//ex5
const car = {
type : 'suv'
,color : 'white'
,model : x6
};

const type = car.type;
const color = car.color;
const model = car.model;

console.log(type,color,model);	//suv white x6

//es6
const {type,color,model} = car;
console.log(type,color,model);	//suv white x6

オブジェクトの分離を改善
構造またはコンテンツを再構築するプロセス.

オブジェクト構造化

const type = 'suv'
const color = 'white'
const print = function(){
	console.log('${this.type}의 ${this.color}는 2021년식 모델이다')
}

let car = {type,color,print};
myCar.print();

変更されたオブジェクト宣言構文

// ES5
var skier = {
  name: name,
  sound: sound,
  powderYell: function() {
    var yell = this.sound.toUpperCase();
    console.log(yell + yell + yell + '!!!');
  }
  speed: function(mph) {
    this.speed = mph;
    console.log('속력(mph):', mph);
  }
}

// ES6
let skier = {
  name,
  sound,
  powderYell() {
    let yell = this.sound.toUpperCase();
    console.log(`${yell} ${yell} ${yell}!!!`);
  }
  speed(mph) {
    this.speed = mph;
    console.log('속력(mph):', mph);
  }
}

スプレッドシート演算子(...)

繰り返し可能オブジェクト

を展開する.

const points = [1,2,3];
console.log(...points);		//1 2 3

複数のアレイの組合せ

const points = [1,2,3];
const counts = [4,5,6];

const sum = [...points, ...counts];	//[1,2,3,4,5,6]

残差演算用

let points = [1,2,3,4,5];
let [first, ...rest] = points;
console.log(rest);		//2,3,4,5

パラメータ集約

function multiply(multiplier, ...theArgs) {
  return theArgs.map((element) => multiplier * element);
}

let arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

Promise
非同期リクエストの成功または失敗処理の簡素化

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

myAsyncFunction('https://jsonplaceholder.typicode.com/todos/1').then(
  json => console.log(json),
  err => console.log(new Error('조회 실패'))
)

Fetch API
HTTPパイプライン(requestやresponseなど)を構成する要素の処理

fetch要求非同期

を使用

fetch('https://jsonplaceholder.typicode.com/posts')
	.then(function (response) {
		return response.json();
	})
	.then(function (data) {
		console.log(data);
});

Class
クラス宣言が追加されました.extends拡張クラスの使用(継承)

class Vacation() {
  constructor(destination, length) {
    this.destination = destination;
    this.length = length;
  }

  print() {
    console.log(this.destination + "은(는) " + this.length + "일 걸립니다");
  }
}

const trip = new Vacation("칠레", 7);
trip.print() // 칠레은(는) 7일 걸립니다.

モジュール
モジュール:繰り返し使用可能なコードセグメントで、他のjsファイルから簡単にロードおよび使用できます.

// Example.js
const a = 1;
const b = 2;
export { a };
export const c = 3;
export default b;

// Example2.js
import d, { a, c as e } from './Example';
console.log(a, d, e); // 1, 2, 3