8个让你成为更好程序员的JavaScript技巧
前言
本文总结了工作中经常使用的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
至少有两个好处:
- 仅打印对象上的属性,忽略原型上的属性。
- 直接获取对象的值,而不是使用
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
的效果
👏🏻 它看起来像一张表格,简单明了。
转载自:https://juejin.cn/post/7085124857628721189