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

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