在写JS代码逻辑的时候,我们通常都会想怎么让自己写的逻辑被人容易读懂,代码看起来简洁又很合理,随着前端技术的不断发展,新的标准不断的推出,其实我们可以把JS代码逻辑可以写的更好,更简洁而且更合理。 这篇文章,我给大家列出几个应该妥善处理好JS逻辑的例子。
一、如何交换变量?
通过下面的代码,应该能看懂交换变量是什么意思,这个例子说的是用汉堡来换巧克力,对,你可能会像下面这样,利用一个中间变量去暂存你要交换的内容,从而达到交换的目的。
js
let myFood = '🍔'
let yourFood = '🍫'
let tempFoot = myFood
myFood = yourFood
yourFood = tempFoot
console.log(myFood, yourFood) // 🍫 🍔
其实,你大可不必引入tempFoot变量。好的实现应该是这样的。
利用数组解构
js
let myFood = '🍔';
let yourFood = '🍫';
[ myFood, yourFood ] = [ yourFood, myFood ]
console.log(myFood, yourFood) // 🍫 🍔
二、不要过多使用ifelse语句
例如这个店里有很多商品,我需要知道如何获取任意指定商品的价格。比较直接的方法,可能就是用ifelse一行代码一行代码铺下来,像这样:
js
const getPriceByName = (name) => {
if (name === '🍔') {
return 30
} else if (name === '🍨') {
return 20
} else if (name === '🍿') {
return 10
} else if ...
}
上面这样过多的使用ifelse的写法,显然不是特别优雅与合理,代码的圈复杂度也高。然而,比较好的处理方法是,像下面这样写:
利用一个对象来检索
js
const getPriceByName = (name) => {
const foodMap = {
'🍔': 30,
'🍨': 20,
'🍿': 10,
// 你可能还要添加新的食物
// ...
}
return foodMap[ name ]
}console.log(getPriceByName('🍔')) // 30
三、使用Object.entries遍历对象
工作中,如果我们要遍历一个对象,假如使用forin去遍历,就会将该对象原型上的属性也打印出来。 举个例子,看下面这段代码
js
const foodMap = {
'🍔': 30,
'🍨': 20,
'🍿': 10,
'🍫': 5
}
// 注意这一行
Object.prototype['🌭'] = 40
for (const key in foodMap) {
console.log(key, foodMap[ key ])
}
我在Object.prototype上绑定了一个属性,使用forin会打印出5条数据出来。 比较好的写法是,像下面这样,结果就只会输出4种食物。
选择Object.entries来遍历
js
Object.entries(foodMap).forEach(([ key, value ]) => {
console.log(key, value)
})
四、展平数组
假如我们现在需要把所有食物放到一个篮子里,看下面这段代码
js
const foods = [ [ '🍔', [ '🍫' ] ], [ '🍨', [ '🍿', [ '🍵' ] ] ] ]
// 方式一
const flattenFoods = (foods) => {
return foods.reduce((res, food) => {
return res.concat(Array.isArray(food) ? flattenFoods(food) : food)
}, [])
}
// 方式二
foods.flat(Infinity);
很显然,使用reduce
虽好,但是我们有更好的选择,方式二利用flat
方法比较简洁。 控制台输出
js
[ '🍔', '🍫', '🍨', '🍿', '🍵' ]
五、计算所有商品总价
你的商品价格表数据结构通常是这样的
js
const foods = [
{ name: '🍔', price: 30, amount: 10 },
{ name: '🍨', price: 20, amount: 3 },
{ name: '🍿', price: 10, amount: 5 },
{ name: '🍵', price: 5, amount: 9 },
]
要计算出总价格,比较直接的方式就是使用函数遍历,像这样
js
let sum = 0
foods.forEach((food) => {
sum += food.price * food.amount
})
console.log(sum) // 输出:455
这种方式无疑是理解成本比较低的一种方式,但是不够简洁, 好的处理方式是,像下面这样
使用reduce
js
let sum = foods.reduce((res, food) => res += food.price * food.amount, 0)
console.log(sum) // 455
六、打印信息用console.table
如上面食物价格数据表,分别用console.log
和console.table
打印出来 后者看起来就比较舒服一点
07. 舍入技巧
为了回馈消费者,店里正在进行促销活动,所有食物都打折,小数点都可以抹掉了。 我需要用Math.floor
方法计算食物的最终价格。
然而,实际上可以使用~~
来代替使用Math.floor
方法。代码如下
js
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
}
})