JavaScriptによくあるES 6/ES 7/ES 8の新特性

JavaScriptによくあるES 6/ES 7/ES 8の新特性
今日は、どのようなエス6、エス7、そしてエス8の文法的な新特性があるかを紹介します.
ES 6の新特性

類(クラス)

普段のコード開発では、構造関数が多く使われていますが、class類については、あまり知られていないと思います.

  class Animal {
        //     ，           ，     ，                 .
        constructor(name, color) {
            this.name = name;
            this.color = color;
        }
        // toString          
        toString() {
            console.log('name:' + this.name + ',color:' + this.color);
        }
    }
    var animal = new Animal('dog','white');//   Animal
    animal.toString();

classを使って構造関数の機能を実現できます.多くの開発においても、やはりclassによく使われます.以下は印刷結果です.
name:dog、カラー:ホワイト
2.モジュール化

 es6 ，
      import export  
export      ，  ，  ，       {}；
import   export      

矢印関数

var sum = (num1, num2) => { return num1 + num2; }

このようにして関数の定義が実現され,これは一般的な関数を定義する方法よりも簡単である.矢印関数にはthisがありません.矢印関数のthisは親の役割領域を指すthisです.これはコードを書く時に無視しやすいです.以下は私たちの普通の関数です.上の矢印関数と同じです.

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

関数パラメータのデフォルト値

 function foo(height = 50, color = 'red') {//  es6        
        console.log(height,color);
    }

5.テンプレート文字列

	var first = 'liu'
    var last = 'q_'
    var name = `Your name is ${first} ${last}.`
    console.log(name);//Your name is liu q_.

延展操作子(…)

var people=['Wayou','John','Sherlock'];
console.log(...people);//  'Wayou','John','Sherlock'

 function show(name,age){
        console.log([...arguments]); //["lq", 20]
    }
    show('lq',20)

7.オブジェクト属性の略記

const name='Ming',age='18',city='Shanghai';
const student = {
    name,
    age,
    city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}

8.Promise(構造関数)

         es     >
         ,            、        。
         ，promise       ：1.pending（   ）、2.fulfilled（   ）3.rejected（   ），             ，       resolve，          ，    reject，           。
      ，promise              。（  async       ）

9.letとconst

       ；const        

10.分配値(1)配列の解像力

let [a, b, c] = [1, 2, 3];
//   
let a = 1;
let b = 2;
let c = 3;

（2）   ，       

  var { StyleSheet, Text, View } = React;
    //   
    var StyleSheet = React.StyleSheet;
    var Text = React.Text;
    var View = React.Text;

11.iterableタイプは、集合タイプを統一するために、ES 6規格に新しいiterableタイプを導入し、Aray、Map、Setはすべてiterableタイプに属し、iterableタイプの集合は、新しいfor...ofサイクルによって巡回することができる.

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { //   Array
    console.log(x,"array");
}
for (var x of s) { //   Set
    console.log(x,"set");
}
for (var x of m) { //   Map
    console.log(x[0] + '=' + x[1],"map");
}

エス7に入る前に、iterableタイプのmapとsetにあまり詳しくない仲間がいれば、以下のコードを見てもいいです.有利に彼らを理解してくれます.
Mapに関する操作は以下の通りです.Setは同じです.

	var m = new Map(); //  Map
    m.set('Adam', 67); //     key-value
    console.log(m);
    m.set('Bob', 59);
    console.log(m);
    m.has('Adam'); //     key 'Adam': true
    console.log(m.has('Adam'));
    m.get('Adam'); // 67
    console.log(m.get('Adam'));
    m.delete('Adam'); //   key 'Adam'
    console.log(m);
    m.get('Adam'); // undefined
    console.log(m.get('Adam'));

ES 7ニュートラル
1.includies()は、配列にある値があるかどうかを判断する.Aray.prototype.includesの使い方は簡単で簡単です.これはindexOfの代替であり、開発者は配列中の値が存在するかどうかを確認するために用いられ、indexOfは厄介な使用であり、それは配列中の要素の位置または-1を返します.したがって、ブール値ではなく数値を返します.開発者は追加の検査を実施する必要があります.

let arr = ['react', 'angular', 'vue']

// // WRONG
if (arr.indexOf('react')) {
    console.log('Can use React')
}

if (arr.indexOf('react') !== -1) {
    console.log('Can use React')
}

if (arr.includes('react')) {
    console.log('Can use React')
}

includesはNaN(非数値)でも使用できます.

console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

2.指数演算子**

 console.log(2**10);//   1024

ES 8ニュートラル
1.async/await(非同期関数(またはasync/await)の特性操作はPromiseの最も重要な機能です.この考えは非同期コードを書く中で簡略化するためです.このような方式は変化しないだけです.Promiseの到来はすでにnodeの非同期からの福音だと思っていました.ES 8では、非同期関数はそんなに力を与えます.)
2.Object.values/Object.entries

Object.values  Object.entries  ES2017   ，  Object.keys  ，      ，    Object.keys    。
 ES8 /ES2017  ，Javascript                      Object.keys，       obj[key]  value       ，

let obj = {a: 1, b: 2, c: 3}
    Object.keys(obj).forEach((key, index)=>{
    console.log(key, obj[key])
    })
    ///  ES6/ES2015  for/of
    let obj = {a: 1, b: 2, c: 3}
    for (let key of Object.keys(obj)) {
    console.log(key, obj[key])
    }

Object.valuesは、オブジェクト自体に戻ると、属性値(values)を行列タイプとして反復することができます.私たちは、ES 6の矢印関数と関連して非表示リターン値をAray.prototype.forEach反復を使用したほうがいいです.

 let obj = {a: 1, b: 2, c: 3}
    Object.values(obj).forEach(value=>console.log(value)) // 1, 2, 3

    let obj = {a: 1, b: 2, c: 3}
    for (let value of Object.values(obj)) {
    console.log(value)
    }// 1, 2, 3

Object.entries·，     ，             key-value   （      ），  （key-value）          :

  let obj = {a: 1, b: 2, c: 3}
    console.log(JSON.stringify(Object.entries(obj)));// "[["a",1],["b",2],["c",3]]"

    //    ES6/ES2015  ，           key value
    let obj = {a: 1, b: 2, c: 3}
    Object.entries(obj).forEach(([key, value]) => {
    console.log(`${key} is ${value}`)
    }) // a is 1, b is 2, c is 3

    ES6for/of（        ）  Object.entries       ：

   let obj = {a: 1, b: 2, c: 3}
    for (let [key, value] of Object.entries(obj)) {
    console.log(`${key} is ${value}`)
    }// a is 1, b is 2, c is 3

最後に、皆様のサポートに感謝します.もし文書に間違いがあったら、コメントエリアで指摘してください.