JavaScript を学ぶときに知っておくべき 3 つのヒント

JavaScript を学ぶときに知っておくべき 3 つのヒント

序文:

Angularや React プロジェクトでは、 code review中に古いJavaScriptコードが見つかると、その開発者は初心者と分類されることがよくあります。しかし、次の 3 つのヒントを知っていれば、あなたは現代の JavaScript のヨーダとみなされるでしょう。さあ、旅を始めましょう!

1. 魔法の拡張演算子

spread演算子である 3 つのドット ( ... ) は、おそらく JavaScript で私が最も気に入っている演算子です。主に以下の3つの状況で使用します。

1. 配列をコピーする

定数arr = [1, 2, 3, 4]
定数 newArr = [...arr]

console.log(newArr) // [1, 2, 3, 4]


2. 配列を結合する

定数numArr = [1, 2, 3, 4]
定数 alphaArr = ['a', 'b', 'c']
const newArr = [...numArr, ...alphaArr]

console.log(newArr) // [1, 2, 3, 4, 'a', 'b', 'c']


3. オブジェクトを展開する

定数長方形 = { 幅: 10, 高さ: 10 }
const 立方体 = { ...長方形、長さ: 7 }

console.log(cube) // {幅: 10、高さ: 10、長さ: 7}


2. nullチェックを実行する最良の方法

最初に書いた null チェック コードを覚えていますか? JavaScript が今日ほど進んでいなかった頃、私は古いコードで次のように書いていました。

foo !== null && foo !== undefined) の場合 { }


その後、単純なifによって私の命は救われました!

もし(foo){}


条件値 foo が次の値のいずれでもない限り、真になります。

  • ヌル
  • 未定義
  • 非N
  • 空の文字列 ("")
  • 間違い

単純なifに加えて、現代のJavaScriptのオプションの連鎖演算子?.とnull合体演算子??を使用すると、コードをより簡潔にすることができます。

1. オプション連鎖演算子

オプションの連鎖演算子は、ネストされたオブジェクトのプロパティにアクセスする安全な方法です。つまり、オブジェクト プロパティの長いリストにアクセスするときに、複数の null チェックを実行する必要はありません。オプションの連鎖演算子を使用すると、存在しない可能性のあるオブジェクトのプロパティにアクセスするときに、式が短く簡潔になります。

次の例では、顧客の住所の郵便番号が null かどうかを確認します。

定数クライアント = {
  名前: '劉星'、
  住所:
    郵便番号: '1234'
  }
}

// 古い値メソッド if (client && client.address && client.address.zipcode) {}
// オプションチェーンへのより現代的なアプローチ if (client?.address?.zipcode) {}


2. ヌル合体演算子

ヌル合体演算子 ( ?? ) は、左のオペランドが null またはundefined場合は右のオペランドを返し、それ以外の場合は左のオペランドを返す論理演算子です。

const defaultMessage = 'こんにちは、JavaScript の Zen'
const msg = defaultMessage ?? 'こんにちは、Liu Xing';
console.log(msg); // こんにちは、JavaScript の Zen'


defaultMessageがnullまたはundefined場合、 Hello Liu Xingと表示されます。

順番に使用するとさらに強力になります。

console.log(firstName ?? lastName ?? '匿名')


この例では、 firstNamenull/undefinedでない場合は firstName が表示され、 lastNamenull/undefinedでない場合は lastName が表示されます。 最後に、すべてがnull/undefined場合は、「 anonymous 」と表示されます。

3. .map()、.reduce()、.filter() の使用

次に、関数型プログラミングとリアクティブプログラミングの強力なテクニックについてお話ししましょう。数年前に初めて使用したとき、本当に新しい扉が開かれたような気がしました。 この簡潔なコードを見るたびに、その美しさに感動します。

今日は、最もよく使用される 3 つのメソッド、map、reduce、filter の例を紹介します。

COVIDが流行する前、私たちはパリに休暇で行きました。それで彼らはスーパーマーケットに行っていくつかのものを買いました。彼らは食料や日用品を購入しました。しかし、すべての品目はユーロで表示されており、顧客は各品目の価格と食事の合計金額を人民元で知りたいと考えています。

1ユーロは7.18日本円に相当します。

従来の方法では、古典的なループを使用してこれを実行します。

定数項目 = [
  {
    名前: 'パイナップル'、
    価格: 2,
    タイプ: '食べ物'
  },
  {
    名前: 「牛肉」
    価格: 20,
    タイプ: '食べ物'
  },
  {
    名前: 「弁護士」
    価格: 1,
    タイプ: '食べ物'
  },
  {
    名前: 「シャンプー」
    価格: 5,
    タイプ: 'その他'
  }
]

合計を0とする
const itemsInYuan = []

(i = 0 とします; i < items.length; i++) {
  定数項目 = 項目[i]
  アイテム価格 *= 7.18
  itemsInYuan.push(アイテム)
  if (item.type === 'food') {
    合計 += 商品.価格
  }
}

console.log(元のアイテム)
/*
[
  { 名前: 'パイナップル'、価格: 14.36、タイプ: '食品' },
  { 名前: '牛肉'、価格: 143.6、タイプ: '食品' },
  { 名前: 'アドボケート'、価格: 7.18、タイプ: '食品' },
  { 名前: 'シャンプー'、価格: 35.9、タイプ: 'その他' }
]
*/
コンソール.log(合計) // 165.14
ここで、JavaScript が提供する関数型プログラミング手法を使用してこの計算を実装してみましょう。

const itemsInYuan = items.map(item => {
  const itemInYuan = { ...item }
  アイテムの元価格 *= 7.18
  返品商品(元)
})

const sum = itemsInYuan.filter(item => item.type === 'food').reduce((total, item) => total + item.price, 0)

上記の例では、 map メソッドを使用してユーロを円に変換し、 filter を使用して食品以外の項目を除外し、 Reduce を使用して価格の合計を計算します。

これで、JavaScript を学ぶ際に知っておくべき 3 つのヒントについての記事は終了です。より関連性の高い JavaScript のヒントについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の書き方に関する 5 つのヒントを共有する
  • 一般的な JavaScript 配列操作スキル (パート 2)
  • 一般的なJavaScript配列操作テクニック
  • JavaScript 構造化分解割り当ての実践ガイド
  • インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント
  • 仕事の効率を上げるJS略語スキル20選
  • 49 個の JavaScript のヒントとコツ
  • 7つのキラーJSのヒントを共有

<<:  HTML シンプルショッピング数量アプレット

>>:  適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)

推薦する

Linux の crw、brw、lrw などのファイル属性は何ですか?

ファイルとは何ですか?すべてのファイルは実際には文字列のストリームですが、適切な解析方法を使用すると...

Reactのコンポーネント共同利用実装

目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...

Docker で Spring-boot プロジェクトをデプロイするためのサンプル コード

1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...

JavaScript インスタンス オブジェクトでプロトタイプ メソッドをオーバーライドする方法の詳細

目次JavaScriptでは、通常、次のコードのようにクラスを簡単に定義できます。 var サンプル...

JSはclip-pathを使用して動的領域クリッピング機能を実装します

背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...

HTMLコードテキストボックスの制限入力テキストボックスが灰色になり、制限テキストボックスの入力

方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...

Zabbix redis 自動ポート検出スクリプトは json 形式を返します

自動検出を行う際には、ポートなどの情報を取得してjson形式で返すスクリプトが必ず存在します。Red...

Vue バックグラウンドでステータス ラベルをエレガントに記述する例

目次序文最適化変数の抽出二次包装 el-tag コンポーネント使用要約する序文バックエンドシステムの...

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明コード例: <se...

MySQL で union all を使用してユニオンソートを取得する方法

プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...

vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

Docker コンテナの uid と gid の詳細な理解

デフォルトでは、コンテナ内のプロセスは root ユーザー権限で実行され、この root ユーザーは...

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.12のインストールと設定方法を記録してみんなで共有します。 1. インストール1...

MySQL 重複インデックスと冗長インデックスの例の分析

この記事では、例を使用して MySQL の重複インデックスと冗長インデックスについて説明します。ご参...

HTMLでは、div内のコンテンツが次のサイズを超えたときに自動的にスクロールバーが表示されるように設定します。

HTML ページでは、div 内のコンテンツが制限を超えた後に自動的にスクロール バーを表示する必要...