前言

本文总结了工作中经常使用的8个JavaScript技巧，使用这些代码技巧，让代码更具可读性和可扩展性。

1.减少if…else面条代码

当代码存在两个以上if ... else，我们就需要优化了，例如以下代码：我们要根据汉堡的名字计算价格：

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

优化的代码

这是一个非常经典的优化，我们可以使用一个对象来存储所有的食品信息。

const getPriceByName = (name) => {
  const foodMap = {
    '🍔': 30,
    '🍨': 20,
    '🍿': 10,
    // 可以新增其他食品
    // ...
  }
  return foodMap[ name ]
}
console.log(getPriceByName('🍔')) // 30

2.使用filter and map代替for循环

现在，如果你被要求找到属于第1组的食物，你会如何找到它？ 以下是数据

const foods = [
  {
    name: '🍔',
    group: 1,
  },
  {
    name: '🍨',
    group: 1,
  },
  {
    name: '🍿',
    group: 2,
  },
  {
    name: '🍵',
    group: 1,
  },
]

或许代码中常常使用for循环，但是使用 filter and map，不仅可以简化代码，还可以使语义更清晰。

// ❌
const names = []
for (let i = 0, len = foods.length; i < len; i++) {
  if (foods[ i ].group === 1) {
    names.push(foods[ i ].name)
  }
}
// ✅
const names = foods
  .filter((food) => food.group === 1)
  .map((food) => food.name)
console.log(names) // [ '🍔', '🍨', '🍵' ]

3.使用解构交换两个值

现在我有汉堡，你有巧克力。想交换食物。我们通常怎么做？

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

优化的方法

我们可以使用数组解构来简化变量交换。

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

4.更好用的Object.entries

如果想知道仓库里食物的名称和价格，应该怎么做？

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

一般方法 在foodMap上使用迭代，但原型上的'🌭' 也会被打印出来，这是我们不想看到的。

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

更好的方法

使用Object.entries 至少有两个好处：

1. 仅打印对象上的属性，忽略原型上的属性。
2. 直接获取对象的值，而不是使用obj[key]读取。

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

5.展开数组的简单方法

食物太乱了，如果[]是一个篮子，我们怎么能把它们放进篮子里呢？

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

第一种方法

const flattenFoods = (foods) => {
  return foods.reduce((res, food) => {
    return res.concat(Array.isArray(food) ? flattenFoods(food) : food)
  }, [])
}
console.log(flattenFoods(foods)) // ['🍔', '🍫', '🍨', '🍿', '🍵']

优化的方法

是的，我们可以使用[].flat，一种更简单、好用的方法。 使用Infinity意味着不在乎嵌套了多少层。

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

6.取整技巧

今天是万圣节，为了庆祝这个节日，所有的食物都打折了，小数部分应该要被删除。 我们可以用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)

7.使用reduce计算总和

现在一位顾客买了很多东西。我需要知道他应该付多少钱。 也许你会这样做：

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

更好的方法

像上面这样写可以达到目的，但代码量仍然太多，我们有一个更简单的方法。

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

8.使用console.table代替console.log

我们经常使用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的效果 👏🏻 它看起来像一张表格，简单明了。

译自：javascript.plainenglish.io/8-javascrip…