9つの実用的なES6機能

1.演算子を展開します

名前が示すように、オブジェクトまたは配列の前で使用される展開演算子（...）は、構造をリストに展開します。

デモンストレーション：

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

エレガントで簡潔ではありませんか？スプレッド演算子を使用しない場合

私たちは書く必要があります：

let firstHalf = [  one ,  two ];
let secondHalf = [ three ,  four ];
for(var i=0, i <firstHalf.length; i++ ) {
  secondHalf.push(firstHalf[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 の特徴は、パラメーターの数が非常に柔軟であることです。通常、パラメータを収集するための引数変数があります。

例を見てみましょう：

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

上記のコードは、1番目と2番目を加算するだけです。つまり、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には遅くともすでに議論があることを覚えていますが、それを知っている人はほとんどいません。

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
 }
}

もちろん、getDescription（）メソッドで読みにくい複数行の長いステートメントを参照しています。同様の現象は、ほとんどのプログラミング言語に存在します。一部の言語は文字列補間を提供しますが、幸いなことに、JavaScript はその1つです。

getDescription（）メソッドを書き直してみましょう。

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

$ {}補間は、ラップされた文字列のペアで使用できます。今でははるかに快適に見えます。

4.省略形の属性

これはES5で作成する必要があります。

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

省略形の属性は、ES6の後に使用できます。

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

もっと爽やかに見えませんか？

5.メソッド属性

メソッド属性は、オブジェクトで定義されたメソッドを指す属性です。

例として、次のES5コードを考えてみましょう。

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

ES6以降は、次のように記述するだけで済みます。

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 name = req.body.name;
 const description = req.body.description;
 const url = req.url;

 log( url endpoint , url);

 // 大量代码逻辑
 dbService.createPerson(name, description)
}

どのような観点から見ても、上記のコードは完全ではありませんが、オブジェクトのさまざまなレベルからデータを取得するアプリケーションシナリオを反映しています。あなたは尋ねるかもしれません、ここでの問題は何ですか？さて、私はそれほど多くの変数を宣言して、いくつかのキーボードストロークを保存する必要はありません。

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を超えるパラメーターがある場合、 1つのオブジェクトを使用してすべてのパラメーターを収集することが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.配列法

ES6には、次のような多くの便利な配列メソッドが導入されています。

find（）、リスト内のメンバーを検索し、nullを返して見つからないことを示します
findIndex（）、リストメンバーのインデックスを検索します
some（）は、リストの少なくとも1つのメンバーで特定のアサーションが真であるかどうかをチェックします
リストにアイテムが含まれているかどうかが含まれます

次のコードは、それらの使用法を理解するのに役立ちます。

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);
})

一部の操作は非同期であり、完了するまでに時間がかかるため、コールバックを使用します。それからpromiseライブラリがあり、人々はそれを使い始めました。その後、 JavaScriptは徐々にpromiseのネイティブサポートを追加しました。

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 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) // 8
add(1,1)   // 2
sub(1,2)   // -1

上記のexportキーワードを使用して、2つの構造体addとsubが、このモジュールをインポートするすべてのモジュールに公開されていることを示しました。export defaultキーワードは、モジュールがインポートされたときにのみ取得される構造を示します。でmain.js 、我々はMULTとしてインポートされたデフォルトの名前と、我々は2つの方法は（）とサブ（）を追加導入することを示しました。矢印関数と辞書のスコープはこれです。