ES 6/ES 7/ES 8の一般的な特性と新しい特性

>ES 6
変数の変更は、ブロックレベルのスコープの概念を追加します.
let宣言変数(ブロックレベル作用領域)は、letがより完璧なvarであり、その宣言のグローバル変数はグローバル属性widowの変数ではなく、forサイクルにおける変数カバーの問題を解決します.
const宣言定数(ブロックレベルのスコープ)

 // var
var a = [];
for (var index = 0; index < 10; index++) {

  a[index]=function () {
      console.log(index);// index     a    index 
  }

}
console.log(index); // 10
a[6](); // 10

// let
const a = [];
for (let index = 0; index < 10; index++) {
  a[index]=function () { console.log(index); }  // index         ，             
}
a[6](); // 6
console.log(index); // index not defined

文字列の追加方法

let str = 'happy';
console.log(str.includes('ha')) // true
console.log(str.repeat(3)) // 'happyhappyhappy'
console.log(str.startsWith('ha')); // true，                 
console.log(str.endsWith('p', 4)); // true,                
ps：str.endswith(suffix[, start[, end]])
		suffix --                   。
		start --          ，0          。
		end --        ，1          。

関数は、C/C++のようにデフォルトのパラメータ値を設定し、データの許容範囲を増やすことができます.
(データは安全に保存できるかどうか)
・オブジェクト
キーの名前を簡単に書く

function people(name, age) {
    return {
        name,
        age
    };
}

対象文字の量を簡略化する

const people = {
    name: 'lux',
    getName () {    //     (:)  function   
        console.log(this.name)
    }
}

オブジェクトのマージを提供します.

const obj1 = {
  a: 1
}
const obj = Object.assign({c: 2}, obj1)
console.log(obj); // {c: 2, a: 1}

デ-タアクイジションとrestパラメ-タ

//     
const people = {
    name: 'cs',
    age: 25
}
const { name, age } = people; // 'cs', 25

//      
const arr = [1, 3, 4];
const [a, b, c] = arr; // 1, 3, 4

// rest  ,        
const obj = {a: 2, b: 3, c: 4, d: 5};
const {a, ...rest} = obj; // 2 { b: 3, c: 4, d: 5 }
>    
//     (   Object.assign()  ，      )
const obj = {a: 2, b: 3}
console.log({...obj, c: 5});// {a 2, b: 3, c: 5}
//     
const arr = [1, 3, 4]
console.log([...arr, 5]); // [1, 3, 4, 5]

・Promise対象
Promise自身は私達がよく使うall、race、reolve、rejectなどの方法があります.原型の中にはcatch、thenなどの方法があります.だから私達はPromiseの事例を作る時、thenをcalbackとして使って、地獄の出現を調節しないようにします.thenの最初のresoliveレシオ関数でコードが間違っています.カードデッドjsの実行ではなく、catchに入るので、errの原因を捕捉します.Promise.allは並列的な操作能力を提供し、すべてのステップの操作が完了した後、フィードバックを実行します.allは配列パラメータを受信し、非同期のすべての結果を一つの配列に入れてthenに伝えます.raceも並列的な操作能力を提供しています.all方法とは反対に、つまり、allは関数の中で一番遅いものを基準にしています.raceは関数の中で一番速いものを実行するのを基準としています.raceは配列パラメータを受信して、一番早い非同期動作を実行した結果をthenに伝えます.
allメソッドは、ゲームのいくつかのシーンに適用され、すべての素材、静的リソース要求がロードされ、ページの初期化を行っています.

// all   
function async1 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('async1');
      resolve('async1  ')
    }, 1000);
  })
}

function async2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('async2');
      resolve('async2  ')
    }, 2000);
  })
}

function async3 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log('async3');
      resolve('async3  ')
    }, 3000);
  })
}
Promise.all([async1(), async2(), async3()]).then((result) => {
  console.log(result);
  // do something...
}).catch((err) => {
  console.log(err);
});

// result:
async1
async2
async3
[ 'async1  ', 'async2  ', 'async3  ' ]

race方法は、画像リソースを要求するなど、タイムアウトを要求するシーンに適用され、5秒を超えるとreject動作が行われる.

function requestImg() {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve('      ')
   }, 6000);
 })
}
function timeout() { 
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     reject('    ');
   }, 3000);
 })
}
Promise.race([requestImg(), timeout()]).then((result) => {
 console.log(result);
}).catch((err) => {
 console.log(err);
});
// result:
    

・セット
Set例の一般的な方法と属性add、delete、clear、has、size

const s = new Set(['A', 'B', 'C']);
console.log(s); // Set { 'A', 'B', 'C' }
console.log(s.has('A')) // true，bool 
console.log(s.size) // 3
console.log(s.clear()) // Set {}  //undefined
console.log(s.delete('A')) // true,bool 

>ES 7
ES 7は、ES 6に加えて、3つの内容を追加します.べき乗演算子(*)、アラy.prototype.includes()メソッド、関数のスコープにおける厳格なモードの変更です.
べき乗演算子(*)を使って、より簡潔になります.

Math.pow(3, 2) === 3 ** 2    // 9

Aray.prototype.includes()配列のプロトタイプの方法は、一つの数値が配列にあるかどうかを調べるために、いくつかの単純なタイプのデータしか判断できません.複雑なタイプのデータについては判断できません.この方法は、クエリーのデータと初期のクエリーインデックス値の2つのパラメータを受け入れる.

[1, 2, 3].indexOf(3) > -1 // true
   ：
[1, 2, 3].includes(3) // true

両者の長所と短所と使用シーン
・簡便性
includies方法はやや勝っています.直接bookに戻ります.indexOfは配列の下付きを返す必要があります.下付きの値を操作して、配列の中にあるかどうかを判断する必要があります.
・精度
両者はいずれも==によりデータ処理を行うが、NaN値に対する処理挙動は異なる.includesのNaNに対する処理は厳格なモードに従わないので、trueに戻ります.indexOfは厳格なモードで処理され、-1に戻ります.
[1,2,NaN].includes(NaN)//true[1,2,NaN].indexOf(NaN)/-1
・使用シーン
配列内のデータのみを検索する場合は、includesを使用することを推奨します.検索データのインデックス位置なら、indexOfを使用したほうがいいです.
>ES 8
async、await非同期ソリューション
ES 8ではasyncとawaitをもっと便利にします.それはGeneratorの文法飴です.async/awaitは非同期コードを書く新しい方式で、以前の方法はコールバック関数とPromiseがあります.Promiseよりも簡潔で、エラー、条件文の処理、中間値の取得が便利です.
・Object.entries()
この方法は、あるオブジェクトのエニュメレート・属性と値を二次元配列で返します.(ターゲットが配列の場合は、配列の下付きをキーとして返します.)

Object.entries({ one: 1, two: 2 })    //[['one', 1], ['two', 2]]
Object.extries([1, 3])    //[['0', 1], ['1', 3]]

・Object.values()
キーペアの値だけを返します.結果は1次元配列です.

Object.values({one: 1, two: 2})    // [1, 2]
Object.values({3: 'a', 1: 'b', 2: 'c'}) // ['b', 'c', 'a'] 
Object.extries([1, 3])     //[1, 3]

・padStart()、padEnd()を文字列で充填します.
この方法は文字列を固定長にすることができる.二つのパラメータがあります.文字列のターゲットの長さと内容を塗りつぶします.

'react'.padStart(10, 'm')      //'mmmmmreact'
'react'.padEnd(10, 'm')       //' reactmmmmm'
'react'.padStart(3, 'm')     // 'vue'