8个让你成为更好程序员的JavaScript技巧

前言

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

1.减少if…else面条代码

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

const getPriceByName = (name) => {
  if (name === ':hamburger:') {
    return 30
  } else if (name === ':ice_cream:') {
    return 20
  } else if (name === '  ') {
    return 10
  }
}
console.log(getPriceByName(':hamburger:')) // 30

优化的代码

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

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

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

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

const foods = [
  {
    name: ':hamburger:',
    group: 1,
  },
  {
    name: ':ice_cream:',
    group: 1,
  },
  {
    name: '  ',
    group: 2,
  },
  {
    name: ':tea:',
    group: 1,
  },
]

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

// :x:
const names = []
for (let i = 0, len = foods.length; i < len; i++) {
  if (foods[ i ].group === 1) {
    names.push(foods[ i ].name)
  }
}
// :white_check_mark:
const names = foods
  .filter((food) => food.group === 1)
  .map((food) => food.name)
console.log(names) // [ ':hamburger:', ':ice_cream:', ':tea:' ]

3.使用解构交换两个值

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

let myFood = ':hamburger:'
let yourFood = ':chocolate_bar:'
let tempFoot = myFood
myFood = yourFood
yourFood = tempFoot
console.log(myFood, yourFood) // :chocolate_bar: :hamburger:

优化的方法

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

let myFood = ':hamburger:'
let yourFood = ':chocolate_bar:'
[ myFood, yourFood ] = [ yourFood, myFood ]
console.log(myFood, yourFood) // :chocolate_bar: :hamburger:

4.更好用的Object.entries

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

const foodMap = {
  ':hamburger:': 30,
  ':ice_cream:': 20,
  '  ': 10,
  ':chocolate_bar:': 5
}
// pay attention here
Object.prototype['  '] = 40

一般方法

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

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

更好的方法

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

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

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

5.展开数组的简单方法

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

const foods = [ [ ':hamburger:', [ ':chocolate_bar:' ] ], [ ':ice_cream:', [ '  ', [ ':tea:' ] ] ] ]

第一种方法

const flattenFoods = (foods) => {
  return foods.reduce((res, food) => {
    return res.concat(Array.isArray(food) ? flattenFoods(food) : food)
  }, [])
}
console.log(flattenFoods(foods)) // [':hamburger:', ':chocolate_bar:', ':ice_cream:', '  ', ':tea:']

优化的方法

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

foods.flat(Infinity) // [':hamburger:', ':chocolate_bar:', ':ice_cream:', '  ', ':tea:']

6.取整技巧

今天是万圣节，为了庆祝这个节日，所有的食物都打折了，小数部分应该要被删除。我们可以用 Math.floor ，但有更简单的方法吗？答案是 ~~ 。

const foods = [
  {
    name: ':hamburger:',
    price: 30.89
  },
  {
    name: ':ice_cream:',
    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: ':hamburger:',
    price: 30,
    amount: 10,
  },
  {
    name: ':ice_cream:',
    price: 20,
    amount: 3,
  },
  {
    name: '  ',
    price: 10,
    amount: 5,
  },
  {
    name: ':tea:',
    price: 5,
    amount: 9,
  },
]
let sum = 0
foods.forEach((food) => {
  sum += food.price * food.amount
})
console.log(sum) // 455

更好的方法

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

const foods = [
  {
    name: ':hamburger:',
    price: 30,
    amount: 10,
  },
  {
    name: ':ice_cream:',
    price: 20,
    amount: 3,
  },
  {
    name: '  ',
    price: 10,
    amount: 5,
  },
  {
    name: ':tea:',
    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: ':hamburger:',
    price: 30.89,
    group: 1,
  },
  {
    name: ':ice_cream:',
    price: 20.71,
    group: 1,
  },
  {
    name: '  ',
    price: 10.31,
    group: 2,
  },
  {
    name: ':tea:',
    price: 5.98,
    group: 2,
  },
]
console.log(foods)

译自：https://javascript.plainenglish.io/8-javascript-tricks-to-make-you-a-better-programmer-948b5a3c35b4

链接: https://fly63.com/article/detial/11403