9つの超実用的なES 6特性が、超実用的です.

ECMAScript 6.0(以下、ES 6という)はJavaScript言語の次世代規格で、2015年6月に正式に発表されました.JavaScript言語は複雑な大規模なアプリケーションを作成し、企業レベルの開発言語になることを目標としています.ES 6は意外な機能をたくさん持ってきてくれます.ここで私たちは9つの超実用的なES 6の特性を学びましょう.
1、操作子を展開する
名前の通り、オブジェクトや配列の前に展開するオペレータ(…)のために、1つの構造をリストに展開します.プレゼンテーション:

let firstHalf = [  one ,  two ];let secondHalf = [ three ,  four , ...firstHalf];

このような書き方はとても優雅で、簡潔ですよね?操作を展開しなくてもいいなら、こう書きます.

let firstHalf = [  one ,  two ];let secondHalf = [ three ,  four ];for(var i=0, i 

展開操作子は、連結対象の属性にも適用されます.

const hero = {  name:  Xena - Warrior Princess ,  realName:  Lucy Lawless}const heroWithSword = { ...hero, weapon:  sword}

オペレータを展開しない場合は、オブジェクトの属性を巡回する必要があります.

let keys = Object.keys(hero);let obj = {};
for(var i=0; i< keys.length; i++) {   obj[keys[i]] = keys[props[i]];}

 
2、残パラメータ
残りのパラメータは数列に残ります. JavaScript  の特性はパラメータの数が柔軟です.通常、パラメータ収集用のargments変数があります.例を見ましょう.

function add(first, second, ...remaining) {  return first + second;}

上の段 コード firstとsecondだけを合わせて、つまりadd(1,2)とadd(1,2,3,4)を呼び出すと同じ結果が得られます.修正します.

function add(first, second, ...remaining) {  return first + second + remaining.reduce((acc, curr) => acc + curr, 0);}

    ，…remaining         ，             ，                。      ES5     arguments  ，      。

3、文字列補間
このような言葉を見たことがありますか?

class Product { constructor(name, description, price) {   this.name = name;   this.description = description;   this.price = price; }getDescription() {   return " Full description" +   " name: " + this.name +   " description: " + this.description }}

もちろん、get Descriptionを指します. 方法の中でその可読性がよくない多総裁文.ほとんどのプログラミング言語には似たような現象があります.いくつかの言語は文字列補間を提供しています.幸いなことに、 JavaScript  その中の一つです.私たちはget Descriptionを書き換えます.

getDescription() {   return `Full description:   name: ${this.name}   description ${this.description}   `;}

                ${}   。         。

4、略字属性
ES 5にはこう書かなければなりません.

function createCoord(x, y) {  return {    x: x,    y: y  }}

ES 6以降は略字属性が使えます.

function createCoord(x, y) {  return {    x,    y  }}

        ？

5、方法の属性
メソッドの属性は、オブジェクト内で指向法の属性を定義します.次のES 5を考慮します.  コード 例として:

const math = {  add: function(a,b) { return a + b; },  sub: function(a,b) { return a - b; },  multiply: function(a,b) { return a * b; }}

ES 6以降はこのように書くだけです.

const math = {  add(a,b) { return a + b; },  sub(a,b) { return a - b; },  multiply(a,b) { return a * b; }}

6、    

構成を解くことは開発者本人の心理的健康に役立つ.次のことを考えます コード :
どんな角度から見ても、上の コード 完璧ではないですが、確かに応用シーンを体現しています.対象の階層から取得したいです. データ .ここに何か問題がありますか?はい、こんなに多くの変数を宣言しなくてもいいです.キーボードを打つ回数を節約します.

function handle(req, res) { const { body: { name, description }, url } = req;
 log( url endpoint , url);
 // 
      
 dbService.createPerson(name, description)

 
ほら、私達の上の コード 3行を1行に圧縮した.分割された値はオブジェクトに限ったものではありません.配列にも適用されます.次のことを考えます コード :

const array = [1,2,3,4,5,6];const a = array[0];const c = array[2];

上の方 コード よりエレガントな方法で書き換えられます.

const array = [1,2,3,4,5,6];const [a, ,c, ...remaining] = arr;
// remaining = [4,5,6]

上記のモード整合分解配列の値を使用することができます.いくつかの値をスキップして使用します.上述した残りのパラメータはここでも使用できます.ここでは残りのパラメータによって残りの配列メンバーを捕獲しました.コンストラクタはまた、使用できます. 関数 とパラメータを指定します. 関数 止まらない 2-3 つのパラメータの場合、一つのオブジェクトを使ってすべてのパラメータを収集します.  JavaScript  という事実基準があります.例えば、次のように. 関数 :

function doSomething(config) {  if(config.a) { ... }  if(config.b) { ... }  if(config.c) { ... }}

      ：

function doSomething({ a, b, c }) {  if(a) { ... }  if(b) { ... }  if(c) { ... }}

7、配列方法
ES 6は、多くの有用な配列方法を導入している.

find()は、リストのメンバーを検索し、nullに戻って

が見つからないという意味です.

findIndex()は、リストメンバーのインデックス

を検索します.

some()は、少なくともリストのメンバーの中にいるかどうかを確認します.

includes、リストにはある

が含まれていますか?
下の コード それらの使い方を理解するのに役立ちます.

const array = [{ id: 1, checked: true }, { id: 2 }];
arr.find(item => item.id === 2) // { id: 2 }
arr.findIndex(item => item.id === 2) // 1
arr.some(item => item.checked) // true

const numberArray = [1,2,3,4];
numberArray.includes(2) // true
Promises + Async/Await

8、非同期案
もしあなたがこのサークルに長くいたとしたら、私達は回調しかない時期があったことを覚えているかもしれません.

function doSomething(cb) {  setTimeout(() =>  {    cb( done )  }, 3000)}doSomething((arg) => { console.log( done here , arg);})

私たちがリピートを使うのは、一部の操作が非同期で、時間がかかります.その後私たちはプロミセがありました.人々はそれを使い始めました.そして  JavaScript  プロミスへの原生支援が徐々に加わった. 

function doSomething() {  return new Promise((resolve, reject) => {    setTimeout(() =>  {      resolve( done )    }, 3000)  })}
doSomething().then(arg => { console.log( done here , arg);})

私たちはこのように呼び出されてもいいです.promiseを串刺しにします.

getUser()  .then(getOrderByUser)  .then(getOrderItemsByOrder)  .then(orderItems => {    //           })

        ，     async/await
           ：

async function getItems() {  try {    const user = await getUser();    const order = await getOrderByUser(user);    const items = await getOrderItemsByOrder(order);    return items;  } catch(err) {    // 
       ，               
  }}
getItems().then(items => {  // 
        
}

9、モジュール
ほとんどのプログラミング言語はモジュールという概念をサポートしています.つまりコードを複数のファイルに分けています.各ファイルは自己が含むユニットです.以下のコードを考慮します.

// math.js
export
 function add(a,b) { return a + b; }export function sub(a,b) { return a - b; }
export
 default mult(a,b) => a * b;
// main.js
import
 mult, { add, sub } from  ./math ;
mult(2, 4) // 8add(1,1)   // 2sub(1,2)   // -1

上でexportキーワードでaddとsubという二つの構造を説明しました.このモジュールを導入するモジュールはすべて公開されています.export defaultキーワードは、importモジュールのみの構成を示します.メーンにいます js.  で導入したdefaultをmultと命名し、add()を導入することを指定します. とsub() この二つの方法.矢印 関数 と字典の役割の領域thisです.
ここをクリックします.