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 シンプルショッピング数量アプレット

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

推薦する

Javascriptジェネレータの紹介と使用

ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...

Easyswoole ワンクリック インストール スクリプトとパゴダ インストール エラー

よくある質問easyswoole を初めて使用する場合は、次のような問題に遭遇することがよくあります...

MySQL マルチテーブル結合クエリの詳細な説明

目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

Centos6.5 glibc アップグレードプロセスの紹介

目次シナリオ要件glibc バージョンglibcのインストールglibc ソフトリンクシナリオ要件C...

Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...

Firefox で英語の文字が折り返されない問題の解決方法

テキストのレイアウトには、言語に応じていくつかの書式設定要件があります。たとえば、簡体字中国語では、...

JDBC および MySQL 一時テーブルスペースの詳細な分析

背景一時テーブルスペースは、データベースのソート操作を管理し、一時テーブルや中間ソート結果などの一時...

mysql 5.7.11 winx64.zip インストールと設定方法のグラフィックチュートリアル

MySql データベース システムをインストールして構成します。 1. ダウンロード http://...

メタ情報に基づいて時間指定のページ更新またはリダイレクトを実装する

メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...

MySQLをインストールして設定し、ルートパスワードを変更する方法

1. インストールapt-get install mysql-server にはアカウントとパスワー...

複数人チャットルームを実現する js コード

この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...

レスポンシブレイアウトの概要(推奨)

レスポンシブレイアウト開発の基礎知識この章は主に以下の部分に分かれています• レスポンシブデザインを...