JavaScript の 10 の超便利な機能

あなたは JavaScript を初めて使用するか、またはたまにしか使用したことがないかもしれません。いずれにせよ、JavaScript は大きく変化しており、いくつかの機能は使用する価値があります。 この記事では、本格的な JavaScript 開発者が毎日ある時点で使用するであろういくつかの機能を紹介します。

参考資料

ES6+ に関する次の 2 つのサイトが私のお気に入りです:

● ES6 の機能

● MDN

演算子を展開

名前が示すように、拡張を使用しますオブジェクトまたは配列の前に演算子 (...) を付けると、構造体がリストに展開されます。 それを実証してください:

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

残りのパラメータ

残りのパラメータは、残りのパラメータをシーケンスに追加します。 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 にはすでに議論があると記憶していますが、それについて知っている人はほとんどいません。

文字列補間

このようなステートメントを見たことがありますか?

class Product {
 constructor(name, description, price) {
   this.name = name;
   this.description = description;
   this.price = price;
 }

 getDescription() {
   return " Full description \n" + 
   " name: " + this.name + 
   " description: " + this.description
 }
}

もちろん、ここで私が言っているのは、getDescription() メソッド内の長くて読めない複数行のステートメントのことです。 同様の現象がほとんどのプログラミング言語に存在します。 一部の言語では文字列補間が提供されており、幸いなことに JavaScript もその 1 つです。 getDescription() メソッドを書き直してみましょう。

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

${} 補間は ` でラップされた文字列のペアで使用できます。 見た目もずっと快適になりました。

省略属性

は、ES5 では次のように記述する必要があります:

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

ES6 では、将来的に省略属性を使用できるようになります:

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

よりすっきりと見えませんか?

メソッド属性

メソッド属性は、メソッドを指すオブジェクトに定義された属性です。 例として、次の 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; }
}

代入の構造化

代入の構造化は、開発者自身の精神衛生上良いものです。

次のコードを考えてみましょう:

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 個を超えるパラメーターがある場合、オブジェクトを使用してすべてのパラメーターを収集するのが JavaScript の事実上の標準です。 たとえば、次の関数:

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

には、より良い記述方法があります:

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

配列メソッド

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

● find()、リスト内のメンバーを検索し、戻り値を返します。 null 見つからないことを示します

● findIndex()、リスト メンバーのインデックスを検索します

● some()、リストの少なくとも 1 つのメンバーでアサーションが true かどうかを確認します

● include、リストに項目が含まれているかどうか

以下のコードは、その使用法を理解するのに役立ちます:

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

このサークルに数年間参加したことがある人なら、次のようなコールバックしかなかった時代があったことを覚えているかもしれません。

function doSomething(cb) {
  setTimeout(() =>  {
    cb('done')
  }, 3000)
}

doSomething((arg) => {
 console.log('done here', arg);
})

us 一部の操作は非同期で完了までに時間がかかるため、コールバックが使用されます。 その後、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/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 => {
  // 处理排序后的成员
})

Module

ほぼすべてのプログラミング言語がモジュールをサポートしています。コードを複数のファイルに分割し、各ファイルを自己完結型のユニット (モジュール) とする概念。 次のコードを考えてみましょう:

// 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 关键字注明了 add 和 sub 这两个结构对任何引入该模块的模块都公开可见。 export default 关键字则注明仅仅 import 模块时得到的结构。 在 main.js 中，我们将导入的 default 命名为 mult，同时指明我们引入 add() 和 sub() 这两个方法。

箭头函数和字典作用域 this

我在这篇文章中很多地方都用到了箭头函数，它不过是另一种函数表示法。 过去我们只能这么声明函数：

function printArray(arr) {
 // 具体操作
}

现在我们也可以这么写：

const printArray = (arr) => {
 // 具体操作
}

我们也可以将函数声明写到一行里：

const add = (a,b) => a + b

上面的代码表明我们进行操作并返回结果。 我们也可以采用下面的语法返回一个对象：

const create = (a,b) = > ({ x: a, y: b })

过去会碰到搞不清 this 是什么的问题。 考虑下面的代码：

let array = [1,2,3];

function sum() {
  this.total = 0;

  arr.forEach(function(item) {
    this.total+= item;  // 糟糕，`this` 是内层函数的 `this`
  })
  return total;
}

上面代码中的 this 指向 forEach 内部函数的 this，这可不是我们想要的。 过去我们通过以下方式解决这个问题：

function sum() {
  this.total = 0;
  var self = this;

  arr.forEach(function(item) {
    self.total+= item;  // 这里我们使用 `self`，它能解决问题，但是感觉有点别扭
  })
  return total;
}

箭头函数可以解决问题，再也不用 self 了，现在代码看起来是这样的：

function sum() {
  this.total = 0;

  arr.forEach((item) => {
    this.total+= item;  // 一切安好，`this` 指向外层函数
  })
  return total;
}

大胜！

结语

我还可以讲讲更多 ES6 方面的内容，不过这篇文章中我只打算介绍我最偏爱的特性。 我觉得你应该从今天开始使用这些特性。

英文原文地址：https://dev.to/itnext/modern-javascript-10-things-you-should-be-using-starting-today-22dp

本文来自 js教程 栏目，欢迎学习！

以上がJavaScript の 10 の超便利な機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。