(Javascript)ES 6の主な特徴をまとめる

LetとConst

従来、JavaScriptは関数スキャンとグローバルスキャンのみをサポートし、変数のライフサイクルとアクセスを制御しています.しかし、ES 6からブロックスキャンもサポートされる.これを可能にしたのはletとconstです.次のコードは、ブロックスキャンに従う他の言語でエラーが発生する可能性があります.ただし、関数スキャンとグローバルスキャンに従うJavaScriptでは、正常に動作します.しかし、これは多くのエラーとエラーの原因であり、letとconstが導入された原因である.

if(false){
	var x = 'hello'
}
console.log(x) ; //undefined

今回はletを使います

if(false){
	let x = 'hello';
}
console.log(x); // ReferenceError x is no definded

letを使用すると、宣言された変数はブロック内でのみ有効です.したがって,ブロック外に近づくとRefenceErrorが生じる.constも同様にブロックスキャンに従う.constとletの違いは、constが値を定数として指定することです.したがって、値を変更しようとするとエラーが発生します.

const x = 'hello World';

x = 'show me the money' // uncaught TypeError : Assignment to constant variale.

ただし、これは正確な表現ではなく、constとバインドの値は定数になりますが、割り当てられた値は変更できます.したがって、以下のコードも正常に動作します.

const x = {};
// x = null; 에러
x.a = 'Apple';
x.b = 'Banana';

矢印関数
Es 6で紹介されている最も印象的な機能の一つは矢印関数のサポートです.より簡潔な構文でコールバックを定義する場合、矢印関数は特に便利です.次は古典的なフィルタリングの例です.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const even = numbers.filter(function (x) {
    return x % 2 === 0;
})

次はコードです.矢印関数で記述されたコード

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const even = numbers.filter(x => x % 2 === 0);

functionキーワードが消え、関数のパラメータが=>になってから本稿を書きます.本文に1つの回文しかない場合は{}を省略することができる.
矢印関数の最も重要な機能の1つは、語彙の範囲にバインドすることです.すなわち、矢印関数の内部のthis値は、親ブロックのthis値と同じです.次の例では、この値の範囲が異なるため、予想通りに動作しません.通常、functionキーワードは、この新しいthis値をそれぞれ生成します.

function DelayGreeter(name){
		this.name =name;
}

	DelayGreeter.prototype.greet = function(){
				setTimeout(function cb() {
				console.log('Hello' + this.name);
				},1000);
					}

		const greeter = new DelayGreeter('World');
        greeter.greet();  // Hello undefined

また、上記のコードを予想通りに実行するにはbindを使用して値をバインドする必要があります.

setTimeout((funcion cb() {
		console.log('Hello' + this.name);

}).bind(this),1000);

ただし、矢印関数は親ブロックのthisに自動的にバインドされるため、問題をより簡潔に解決できます.

setTimeout(() => console.log('Hello' + this.name), 1000);

クラス構文
ES 6はクラス構文を導入した.ただし、JavaScriptの実行時に内部でオブジェクトの管理方式が変更されたわけではないので、属性や関数をプロトタイプで継承することが重要です.
クラス構文のdoimは、開発者に便利で優れた可読性を提供します.ただ、便利さのためです.以下に、従来のプロトコル・タイプに基づくPerson関数を示します.

function Person( name, age, job){
			this.name = name;
            this.age=age;
            this.job = job;
            }
	
	Person.prototype.getAgeAndName = function () {
			return this.age + ' ' + this.name;
            }
	Person.older = function (person1, person2 ){
			return person1.age >= person2.age ? person 1: person2;
					}
				const seo = new Person('SDS' , 30 , 'Programmer');
					const ahn = new Person ('AHY', 28 , 'Staff') ;
                    
                    console.log(seo.getAgeName());
                    console.log(Person.older(seo,ahn));

次は東海で書かれたクラス文法の同じコードです.

class Person {
  constructor (name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
  }
 
  getAgeAndName () {
    return this.age + ' ' + this.name;
  }
 
  static older (person1, person2) {
    return person1.age >= person2.age ? person1 : person2;
  }
}
 
const seo = new Person('SDS', 30, 'Programmer');
const ahn = new Person('AHY', 28, 'Staff');
 
console.log(seo.getAgeAndName());
console.log(Person.older(seo, ahn));
 

クラス文法で表現すると、理解しやすく簡潔になります.ジェネレータを明確に記述し,静的メソッドを宣言することもできる.クラス構文の1つの利点は、extendsキーワードとsuperキーワードを使用してPersonプロトタイプを拡張できることです.拡張性は次のとおりです.

class PersonWithCar extends Person{
  constructor (name, age, job, car) {
    super(name, age, job);
    this.car = car;
  }
 
  getAgeAndName () {
    return this.age + ' ' + this.name + ' ' + this.car;
  }
}
 
const kwon = new PersonWithCar('KMS', 30, 'Technician', 'K5');
 
console.log(kwon.getAgeAndName ());

ここで注意しなければならないのは、他のオブジェクト向け言語で通常発生する場合と非常に似ていることです.
拡張するクラスから新しいクラスを宣言し、スーパーキーを使用して親ジェネレータを呼び出す新しいジェネレータを定義し、既存のメソッドを上書きします.

強化されたオブジェクトの汎用性

1.属性が割り当てる値と一致する場合は省略できます.

const a = 'Apple';
const b = 'Banana';
 
const es5 = { a: a, b: b };
const es6 = { a, b};

属性として

の関数がある場合は、関数キーワードを省略できます.

const es5 = {
  age: 30,
  getAge: function () {
    return this.age;
  }
}
const es6 = {
  age: 30,
  getAge () {
    return this.age;
  }
}

3.オブジェクトのプロパティを動的に割り当てることができます.

const name = 'SDS';
const person = {
  [name + "'s Age"]: 30
}
console.log(person) // { "SDS's Age": 30 }
 

4.新しいgetter、setter構文が追加されました.
注意、set関数はget関数に返される値を返すように要求します.

const person = {
  name: 'George',
  surname: 'Boole',
 
  get fullname () {
    return this.name + ' ' + this.surname;
  },
 
  set fullname (fullname) {
    let parts = fullname.split(' ');
    this.name = parts[0];
    this.surname = parts[1];
  }
}
 
console.log(person.fullname); // George Boole
console.log(person.fullname = 'Alan Turing'); // Alan Turing
console.log(person.name); // Alan

Template記号

簡単です.バックグラウンド(`)に必要な文字列を入力します.挿入する変数を{}に入れると、自動的にその位置にマッピングされます.

const hello = 'Hello';
const to = 'Everybody!';
 
console.log(`${hello} ${to}`);

非構造割り当て(または構造分解割り当て)

配列またはオブジェクトのプロパティを分解することで、その値を各変数に含める式.
ぶんかいアレイこうぞう

let foo = ["one", "two", "three"];
 
let [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

オブジェクト構造の分解

let fruit = {
    a: 'Apple',
    b: 'Banana',
}
let { a, b } = fruit;
console.log(a);    // 'Apple'
console.log(b);    // 'Banana'