几个应该妥善处理好的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.logconsole.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
  }
})
相关推荐
lauo27 分钟前
【智体OS】官方上新发布“空钥登陆”--方便访客使用智体操作系统OS和智体应用
前端·javascript·分布式·机器人·开源
哥谭居民000129 分钟前
普通的树形数据primevue的treetable组件的treetable[ ]
前端·javascript·算法
徐小黑ACG35 分钟前
JavaScript 基础
开发语言·javascript
郑大乾6662 小时前
vuex - 第一天
javascript·vue.js·node.js
阿卡基YUAN2 小时前
JavaScript 箭头函数
前端·javascript
湛海不过深蓝2 小时前
【js】记录预览pdf文件
开发语言·javascript·pdf
兮动人2 小时前
vue之axios基本使用
前端·javascript·vue.js
嵌入式小强工作室2 小时前
STM32 Flash DB的使用方法
前端·javascript·stm32
qlj2243 小时前
react-native键盘遮盖底部输入框问题修复
javascript·react native·react.js
GISer_Jing4 小时前
Javascript数据结构常见面试题目(全)
javascript·数据结构·面试