10 の非常に便利な JavaScript 機能

あなたは 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'
}

If the Spread Operatorは使用されないため、オブジェクトをトラバースする必要があります。 属性:

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

Itより爽やかに見えますすでに？

メソッド属性

メソッド属性は、メソッドを指すオブジェクト内に定義された属性です。 例として、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 であるかどうか、リストに項目

が含まれているかどうかを確認します。 次のコードは、その使用法を理解するのに役立ちます。

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

Promise + Async/Await

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

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/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 方面的内容，不过这篇文章中我只打算介绍我最偏爱的特性。 我觉得你应该从今天开始使用这些特性。

相关免费学习推荐：js视频教程

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