知っておくべき7つの便利なJavaScriptトリック

このチュートリアルでは、より良いコードを記述し、開発者としてのスキルを向上させるのに役立つ 7 つの便利な JavaScript トリックを紹介します。JavaScript プログラミングに役立つ 7 つのヒントとコツをご覧ください

私はKFCの従業員です。毎日たくさんの食品を販売しています。システム内のさまざまな食品の価格を確認する必要があることがよくあります。これらのJavaScriptテクニックは、私の作業効率を大幅に改善するのに役立ちました...

目次：

変数を交換するより良い方法
if… .else if … esle の場合は書き込みを停止してください
Object.entriesトラバースするよりスマートな方法です。
配列のフラット化
商品の合計金額を計算する
「console.table」は強力なヘルパーです
丸めのトリック

1. 変数を交換するより良い方法

友よ、お会いできてとても嬉しいです。私はハンバーガーを持っています。あなたはチョコレートを持っています。食べ物を交換できますか?

むかしむかし、こうやって食べ物を交換する必要がありました！

let myFood = '🍔'
let yourFood = '🍫'
let tempFoot = myFood

myFood = yourFood
yourFood = tempFoot
console.log(myFood, yourFood) // 🍫 🍔

まったく新しい方法

この問題を解決する簡単な方法はありますか? 冗長な変数は必要ないかもしれませんtempFoot。

配列の分解により、この問題は非常に単純になります。

let myFood = '🍔'
let yourFood = '🍫'

;[ myFood, yourFood ] = [ yourFood, myFood ]
console.log(myFood, yourFood) // 🍫 🍔

2. もし… .else if … esleの場合は書き込みをやめてください

ご覧のとおり、名前で食品の価格を調べる必要があります。なんてこった、if else私の店はたくさんの食べ物を売っているので、100秒も書く必要があります。

これは悪臭を放つコードです…

const getPriceByName = (name) => {
  if (name === '🍔') {
    return 30
  } else if (name === '🍨') {
    return 20
  } else if (name === '🍿') {
    return 10
  } else if ...
}

console.log(getPriceByName('🍔')) // 30

別の方法

無意味なを書くのはやめた方がいいかもしれませんif else。1 つのオブジェクトを使用してすべての食べ物を保持し、取り出しを速くすることができます。

const getPriceByName = (name) => {
  const foodMap = {
    '🍔': 30,
    '🍨': 20,
    '🍿': 10,
    // You can add new food here
    // ...
  }

  return foodMap[ name ]
}

console.log(getPriceByName('🍔')) // 30

3.Object.entriesトラバースするよりスマートな方法です。

今、私たちの店はたくさんの新しい食べ物を購入しました.名前と価格を知りたいのですが、どうすればうまくいくでしょうか?

const foodMap = {
  '🍔': 30,
  '🍨': 20,
  '🍿': 10,
  '🍫': 5
}
// pay attention here
Object.prototype['🌭'] = 40

はい、これは最も一般的な処理の 1 つですが、残念ながら🌭、あるべきではないという意味で印刷されています。

// ❌
for (const key in foodMap) {
  console.log(key, foodMap[ key ])
}

より良い書き方

を使用すると、Object.entries少なくとも 2 つの利点があります。

オブジェクトプロトタイプのプロパティは出力されません
を使用する代わりに、キーと値を直接取得できますobj[key]

// ✅
Object.entries(foodMap).forEach(([ key, value ]) => {
   console.log(key, value) 
})

4.配列のフラット化

私はしばらく食べ物を片付けていません。たくさんのカゴに並べられていて、ちょっとごちゃごちゃしていました。

const foods = [ [ '🍔', [ '🍫' ] ], [ '🍨', [ '🍿', [ '🍵' ] ] ] ]

最初の方法

const flattenFoods = (foods) => {
  return foods.reduce((res, food) => {
    return res.concat(Array.isArray(food) ? flattenFoods(food) : food)
  }, [])
}

console.log(flattenFoods(foods)) // ['🍔', '🍫', '🍨', '🍿', '🍵']

第二の方法

上記の方法は複雑すぎると思います。もっと簡単な方法があると思います。

mdnからflat() メソッドは、指定された深さまで再帰的に連結されたすべてのサブ配列要素を持つ新しい配列を作成します。

foods.flat(Infinity) // ['🍔', '🍫', '🍨', '🍿', '🍵']

5. 商品の合計金額を計算する

私は今日金持ちになるつもりです。私の消費者の 1 人が大量の食品を購入しました。彼が私に支払う金額を正確に把握する必要があります。それは大金です。

方法 1

const foods = [
  {
    name: '🍔',
    price: 30,
    amount: 10,
  },
  {
    name: '🍨',
    price: 20,
    amount: 3,
  },
  {
    name: '🍿',
    price: 10,
    amount: 5,
  },
  {
    name: '🍵',
    price: 5,
    amount: 9,
  },
]

let sum = 0
foods.forEach((food) => {
  sum += food.price * food.amount
})
console.log(sum) // 455

方法 2

実際reduce、お金を稼ぐのにすぐに役立ちます。すべてが非常にシンプルで調和のとれたものになり、1 行のコードで完了します。

const foods = [
  {
    name: '🍔',
    price: 30,
    amount: 10,
  },
  {
    name: '🍨',
    price: 20,
    amount: 3,
  },
  {
    name: '🍿',
    price: 10,
    amount: 5,
  },
  {
    name: '🍵',
    price: 5,
    amount: 9,
  },
]

let sum = foods.reduce((res, food) => res += food.price * food.amount, 0)

console.log(sum) // 455

6. 「console.table」は強力なヘルパーです

私はしばしばconsole.logいくつかの情報を印刷するために使用しますが、それは表ほど明確で簡潔ではありません.

const foods = [
  {
    name: '🍔',
    price: 30.89,
    group: 1,
  },
  {
    name: '🍨',
    price: 20.71,
    group: 1,
  },
  {
    name: '🍿',
    price: 10.31,
    group: 2,
  },
  {
    name: '🍵',
    price: 5.98,
    group: 2,
  },
]
console.log(foods)

console.table を試してみませんか?

素晴らしい、それはテーブルのように見え、シンプルで明確です。

7.丸めのトリック

消費者に恩返しをするために、今日、私たちの店はすべての食品が割引され、小数が一掃されるプロモーションを行っています。Math.floor食品の最終価格を計算するために使用する必要があります。

うーん、もっと簡単な方法はありますか？どうですか~~？

const foods = [
  {
    name: '🍔',
    price: 30.89
  },
  {
    name: '🍨',
    price: 20.71
  },
  {
    name: '🍿',
    price: 10.31
  },
]
const discountedFoods = foods.map((it) => {
  return {
    name: it.name,
    price: ~~it.price
  }
})

console.log(discountedFoods)

ソース: https://javascript.plainenglish.io

#javascript

What is GEEK

Buddha Community