ジャバスクリプト — 古いものを新しいものに置き換える

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
他のプログラミング言語と同様に、JavaScriptはプログラムを読みやすく維持するためにベストプラクティスの独自のリストを持っています.JavaScriptにトリッキーな部分が多く、コードを改善するためにいくつかのベストプラクティスに従うことができます.
ES 6が導入されたので、新しい構造は良い理由のために古いものを交換しています.それははるかに短く、クリーナー、そして理解しやすいです.
この記事では、置換を含む新しいものと置き換えることができるどの古い構文を見ますthen with async and await , 辞書オブジェクトの置換Map 交換apply スプレッド演算子を使用して、関数構文体をクラス構文で置き換えます.

を返します。

我々が鎖約束をするとき、我々はthen メソッドをコールバック関数で別の約束を返すthen .
つまり、以下のようなコードがあります.

Promise.resolve(1)
  .then((val) => {
    console.log(val);
    return Promise.resolve(2);
  })
  .then((val) => {
    console.log(val);
    return Promise.resolve(3);
  })
  .then((val) => {
    console.log(val);
  })

の導入でasync and await を呼び出すための文字列です.then 繰り返しメソッド.このようなコードを書くことができます.

(async () => {
  const val1 = await Promise.resolve(1);
  console.log(val1);
  const val2 = await Promise.resolve(2);
  console.log(val2);
  const val3 = await Promise.resolve(3);
  console.log(val3);
})();

両方とも1 , 2 , 3を出力しますが、2番目のコードスニペットはとても短いです.古い構文に戻る理由はありません.
また、我々は約束を通してループすることができますし、それらを使用してfor-await-of ループ.次のようなコードを書き換えることで、上記の約束を通してループできます.

(async () => {
  const promises = [
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3),
  ]

  for await (let p of promises) {
    const val = await p;
    console.log(val);
  }
})();

我々が上記のもののようなコードは、我々が以前の例でそうすることができないオンザフライでつくられる多くの約束または約束を通してループすることに非常に便利です.

辞書オブジェクトをCountマップで置き換える

ES 6も導入Map これを行うには、JavaScriptオブジェクトを使用せずにハッシュマップや辞書を作成することができます.Map sは、彼らがエントリーを得て、操る彼ら自身の方法を持っているので、また、よりよいです.
例えば、書く代わりに

const dict = {
  'foo': 1,
  'bar': 2
}

書き込みます.

const dict = new Map([
  ['foo', 1],
  ['bar', 2]
])

それから、私たちはget 次に示す方法

console.log(dict.get('foo'));

エントリのキーで既存のエントリの値をset メソッド:

dict.set('foo', 2);

また、指定したキーでエントリが存在するかどうかを確認できますhas メソッド:

dict.has('baz');

また、keys and entries マップのすべてのキーとすべてのエントリを取得するメソッド.
例えば、以下のように書くことができます.

console.log(dict.keys());

を返します.Map ○○.これは、我々がそれらを通してループすることができることを意味しますfor...of ループまたはスプレッド演算子を持つ配列に変換します.
同様にentries メソッドは、Map を返します.[key, value] ○○.
また、value すべての値を持つ反復子オブジェクトを取得するメソッドMap ○○.
キーとして他のプリミティブ値を使用することもできます.オブジェクトを使用する場合、私たちはルックアップが行われているので、それらを調べるときに値を戻すことができません=== 返り値演算子false 同じ内容を持っていても同じ参照を持っていない2つのオブジェクトです.
これらのメソッドは通常のオブジェクトでは使用できません.また、私たちが使用するならば、私たちは偶然それ自身の代わりにオブジェクトのプロトタイプの特性を得るか、修正するかもしれませんfor...in ループ.
したがって、普通のオブジェクトを辞書として使用する理由は多くありません.
写真でDavid Clode をUnsplash

当てはめる

値を変更したくない場合this 関数の中には、apply 関数のメソッド.
多くの引数を持つ関数だけを呼び出したい場合は、次のように引数を配列で渡すときに、スプレッド演算子を使用できます.

const arr = [1, 2, 3, 4, 5];
const add = (...args) => args.reduce((a, b) => a + b, 0);
console.log(add(...arr));

私たちがしなければならないのは、最後の行の3ドット演算子である配列に、スプレッド演算子を使用することです.

コンストラクタ関数を

もう一つの大きなES 6機能は、建設者関数のためのクラス構文です.コンストラクタ関数がクラスのように見えるのは、単に構文上の砂糖です.
それの利点は、相続を容易にするということです.
たとえば、コンストラクタ関数から継承したい場合は、次のように書きます.

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

function Employee(name, employeeCode) {
  Person.call(this, name);
  Employee.prototype.constructor = Person;
  this.employeeCode = employeeCode;
}

const employee = new Employee('Joe', 1);
console.log(employee)

この構文はJavaのようなクラスベースのオブジェクト指向言語から奇妙に見えます.
しかし、クラス構文は、JavaScriptより他の言語を使用した開発者にとって、よく身近に見えます.上記のコードを次のように書き換えます.

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Employee extends Person {
  constructor(name, employeecode) {
    super(name);
    this.employeecode = employeecode;
  }
}

const employee = new Employee('Joe', 1);
console.log(employee)

このコードは上記のものと同じです.しかし、我々が我々が持っている時から我々が持っているものがより明確であることextends 我々が何を継承しているかを示すキーワード.
コンストラクタ関数では、this in the first argument of the call そして、次の引数に渡すものcall .
クラス構文では、このことを心配する必要はありません.我々がそうするのを忘れたならばsuper 次のコードを呼び出します.

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Employee extends Person {
  constructor(name, employeecode) {
    this.employeecode = employeecode;
  }
}

const employee = new Employee('Joe', 1);
console.log(employee)

エラーが発生しました.super ' this 'にアクセスする前に派生クラスのコンストラクタです.
間違いをするのは1つのチャンスが少ない.
我々はそれを省略する場合、我々はエラーを取得しないPerson.call …のようにEmployee ブラウザが我々が望むということを知らない時から、建設者関数Employee 受け継ぐPerson ○○.
さらに、プロトタイプのログを記録するときにemployee うん、我々はそれのプロトタイプを得るemployee is Person クラス構文で予想通りに.
しかし、私たちはそれを得ることはありませんEmployee.prototype.constructor = Person; これは簡単に忘れられます.

結論

async and await and for-await-of 連鎖を作る新しい構造は、はるかによりきれいであると約束します.それを使用する代わりにそれらを使用する方がずっと良いですthen 何故なら.for-await-of また、動的に生成された約束を通してループすることもできますthen or async and await ひとりぼっち.Map sはハッシュと辞書のためのプレーンオブジェクトよりはるかによいです、それはそれを操作して、エントリを得る独自の方法を持っているので.また、誤ってオブジェクトのプロトタイプのプロパティにアクセスすることもあります.
値を変更したくない場合this 関数の中でapply スプレッド演算子を持つ引数の配列を持つ関数を呼び出すメソッドです.
最後に、コンストラクターのクラス構文は、コンストラクタ関数のプロトタイプコンストラクタを設定するよりも簡単に親クラスから継承できるため、元の関数構文よりもはるかに優れています.