几个应该妥善处理好的JS逻辑

在写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
  }
})