現代のJavaScript

ecmascript 2015(es 6としても知られている)は,2009年に標準化されたes 5以来のJavaScriptへの大きなアップデートである.それ以来、JavaScriptは毎年インクリメンタルな更新プログラムが登場している.ES 6以降からのこれらの重要なアップデートは、現在現代のJavascriptと呼ばれます.

テンプレートリテラル
テンプレートリテラルは、文字列の式をよりきれいな構文で埋め込むことができます.

Template literals are enclosed by the backtick character instead of double or single quotes.

// ES5
let name = "Piyush"
let msg = "Hello," + " " + name + "." // Hello, Piyush.
// ES6
let name = "Piyush"
let msg = `Hello, ${name}.` // Hello, Piyush.

矢印関数
矢印関数は、通常の関数式の構文的にコンパクトな代替です.それはあなたのコードをより読みやすく構成します.

// ES5
const isEven = function (num) {
 return num % 2 === 0;
}
// ES6
const isEven = num => num % 2 === 0;

また、組み込み関数のような矢印関数を使用できますmap , filter , and reduce .

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const odds = nums.filter(n => n % 2 === 1);
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(odds); // [1, 3, 5, 7, 9]

の取り扱いthis また、通常の関数と比較して、矢印関数で異なります.通常の関数ではthis キーワードは、ウィンドウ、ドキュメント、または何であれ、関数と呼ばれるオブジェクトを表しました.矢印の関数でthis キーワードは常に矢印関数を定義するオブジェクトを表します.

デフォルトパラメータ
値がない場合、名前付きパラメータをデフォルト値で初期化することができますundefined が渡される.

// ES5
function multiply(a, b) {
  b = typeof b !== 'undefined' ? b : 1;
  return a * b;
}
console.log(multiply(5, 2)); // 10
console.log(multiply(5)); // 5
// ES6
function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5, 2)); // 10
console.log(multiply(5)); // 5

普及する
これは、配列の式や文字列のような反復を可能にするためのゼロ以上の引数(関数呼び出しの場合)または要素(配列リテラルの)が期待される場所、またはゼロ以上のキー値のペア(オブジェクトリテラルの場合)が予想される場所で展開されるオブジェクト式を拡張することができます.

関数呼び出しのためのスプレッド
iterable ( array , stringなど)を引数のリストに展開します.

const nums = [1, 3, 2, 7, 5];
Math.max(nums); // NaN
// Use spread!
Math.max(...nums); // 7

配列リテラル
既存の配列を使用して新しい配列を作成します.つの配列から要素を新しい配列に展開します.

const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];
[...nums1, ...nums2]
// [1, 2, 3, 4, 5, 6]

オブジェクトリテラルのスプレッド
つのオブジェクトから別のオブジェクトリテラルにプロパティをコピーします.

const name = {firstname: "piyush", lastname: "sinha"};                       
const name = {firstname: "piyush", lastname: "sinha"};
const fullAddress = {...address, country: "india"};
// {city: "mumbai", state: "maharashtra", country: "india"}
const details = {...name, ...fullAddress};
// {firstname: "piyush", lastname: "sinha", city: "mumbai", state: "maharashtra", country: "india"}

破壊する
配列からの値を展開する短い、きれいな構文.

アレイ破壊

const raceResults = ["Jazz", "Ibtesam", "Farhaz", "Kunal"];
const [gold, silver, bronze] = raceResults;
gold; // "Jazz"
silver; // "Ibtesam"
bronze; // "Farhaz"
const [fastest, ...everyoneElse] = raceResults;
fastest; // "Jazz"
everyoneElse; // ["Ibtesam", "Farhaz", "Kunal"]

オブジェクトの破壊

const runner = {
  first: "Piyush",
  last: "Sinha", 
  country: "India"
}
const {first, last, country} = runner;
first; // "Piyush"
last; // "Sinha"
country; // "India"

パラメータ破壊

const fullName = ({first, last}) => {
 return `${first} ${last}`
}
const runner = {
  first: "Piyush",
  last: "Sinha", 
  country: "India"
}
fullName(runner); // "Piyush Sinha"

配列/オブジェクトの上の反復

…のために
配列を反復処理する良い方法.

const gamers = ["Piyush", "Jazz", "Ibtesam", "Farhaz", "Kunal"];
for(const player of gamers) {
  console.log(player);
}
// Piyush
// Jazz
// Ibtesam
// Farhaz
// Kunal

インループ
オブジェクトのすべての列挙可能なプロパティを反復処理する良い方法.

const scores = {
  piyush: 80, 
  jazz: 86, 
  ibtesam: 92,
  farhaz: 90, 
  kunal: 88
}
for(const score in scores) {
  console.log(scores[score]);
}
// 80
// 86
// 92
// 90
// 88

約束する
エーPromise 非同期操作の最終的な完了または失敗を表すオブジェクトです.コールバックを関数に渡す代わりにコールバックを付けるオブジェクトです.コールバックが管理できないコードにつながるコールバック地獄を作成することができる複数の非同期操作を扱うとき、彼らは管理するのが簡単です.
Proxyオブジェクトのコンストラクタ構文は以下の通りです.

let promise = new Promise(function(resolve, reject) {  
 // do something
});

コンストラクタはコールバック関数を1つだけ引数とします.コールバック関数は2つの引数をとります.操作が結果を得るとき、遅かれ早かれ、それは重要ではありません.これらのコールバックのいずれかを呼び出す必要があります.

resolve(value) : を返します.value .

reject(error) : を返します.error がエラーオブジェクトです.

The promise object returned by the new Promise コンストラクタには以下の内部プロパティがあります:

state — 当初"pending" , その後、"resolved" 時resolve または"rejected" 時reject が呼ばれる.

result — 当初undefined , その後value 時resolve(value) またはerror 時reject(error) が呼ばれる.

より明快さを得るために約束を使って偽の要求を示しましょう

const fakeRequestPromise = (url) => {
  return new Promise((resolve, reject) => {
    const delay = Math.floor(Math.random()*(4500)) + 500;
    setTimeout(() => {
      if(delay>4000) {
        reject("Connection Timeout!");
      } else {
        resolve(`Here is your fake data from ${url}`);
      }
    }, delay)
  })
}

settimeout ()でランダムな遅延を使用して、成功と失敗の確率でAPIリクエストを模倣します.
を返します.

fakeRequestPromise("www.fakeapi.com/page1")
// Promise {[[PromiseStatus]]: pending, [[PromiseValue]]: undefined}
// Promise {[[PromiseStatus]]: resolved, [[PromiseValue]]: "Here is your fake data from www.fakeapi.com/page1"}

その他

fakeRequestPromise("www.fakeapi.com/page1")
// Promise {[[PromiseStatus]]: pending, [[PromiseValue]]: undefined}
// Promise {[[PromiseStatus]]: rejected, [[PromiseValue]]: "Connection Timeout!"}

返されたPromiseオブジェクトは、関数を使用して登録することによって消費できます.それから.キャッチメソッド.

const request = fakeRequestPromise("www.fakeapi.com/page1");
request
   .then(() => {
      console.log("Promise Resolved");
      console.log("IT WORKED !!!");
   })
   .catch(() => {
      console.log("Promise Rejected");
      console.log("OH NO, ERROR !!!");
   })
//If delay < 4000
Promise Resolved
IT WORKED !!!
//else
Promise Rejected
OH NO, ERROR !!!

約束は、最も簡単な方法で非同期操作を扱うための理想的な選択です.彼らは簡単に複数の非同期操作を処理することができますコールバックやイベントよりも優れたエラー処理を提供します.

結論
現代のJavaScriptは、我々のコードを構文的によりきれいでよりスマートにするために我々に提供していることは、大いにあります.私はES 6機能のいくつかにあなたを紹介することができたことを願っています.