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
至少有两个好处:
- 仅打印对象上的属性,忽略原型上的属性。
- 直接获取对象的值,而不是使用
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
的效果 👏🏻 它看起来像一张表格,简单明了。