コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 10 の非常に便利な JavaScript 機能

10 の非常に便利な JavaScript 機能

青灯夜游
リリース： 2020-10-21 17:51:21
転載
2273 人が閲覧しました

10 の非常に便利な JavaScript 機能

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

参考資料

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

展開演算子

その名前が示すように、オブジェクトまたは配列の前に構造体を展開するための展開演算子 (...) として使用されます。リスト。 デモ: 

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: &#39;Xena - Warrior Princess&#39;,
  realName: &#39;Lucy Lawless&#39;
}


const heroWithSword = {
 ...hero,
 weapon: &#39;sword&#39;
}
ログイン後にコピー

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(&#39;url endpoint&#39;, url);

 // 大量代码逻辑
 dbService.createPerson(name, description)
}
ログイン後にコピー

どの観点から見ても、上記のコードは完璧ではありませんが、オブジェクトから開始するアプリケーション シナリオを反映しています。さまざまなレベルのデータ。 ここで何が問題になっているのかと尋ねるかもしれません。 そうですね、あまり多くの変数を宣言しないことで、キーストロークを節約できます。 

function handle(req, res) {
 const { body: { name, description }, url } = req;

 log(&#39;url endpoint&#39;, 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(&#39;done&#39;)
  }, 3000)
}

doSomething((arg) => {
 console.log(&#39;done here&#39;, arg);
})
ログイン後にコピー

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

function doSomething() {
  return new Promise((resolve, reject) => {
    setTimeout(() =>  {
      resolve(&#39;done&#39;)
    }, 3000)
  })
}

doSomething().then(arg => {
 console.log(&#39;done here&#39;, 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 &#39;./math&#39;;

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 サイトの他の関連記事を参照してください。

関連ラベル：
javascript
ソース：dev.to
前の記事：JS のコールバックを理解する 次の記事：オブジェクト指向 JavaScript の 3 つの基本特性の紹介
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート