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 ?? '匿名')

この例では、 firstNameがnull/undefinedでない場合は firstName が表示され、 lastNameがnull/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 をよろしくお願いいたします。