面试官:三年前端开发不知道小数精度误差,你难道没有过实际的业务开发经验?我:😭

3,026 阅读3分钟

很多人都疑惑为什么面试官很喜欢问小数精度误差这一道题。我想应该是由于小数误差在业务开发中是很常见的一种问题

问这道题的意义,就是在看你是的开发经验是不是虚构的,有三年开发经验肯定会遇到这种问题

🤖 简单原理

原理很简单,没有什么虚头巴脑的

数字在计算的时候需要十进制转化成二进制,但是有一些小数二进制是无限不循环数

计算机最多只能保存 52 位关于小数的部分

所以在计算过程中,大于 52 位的必须砍掉,误差的产生就在这里

🤖 具体场景

刚好我开发的组件库里面的评分组件就需要用到小数的运算🥰

js 中,对数字进行加减乘除的时候,我们务必要使用库。

不然当我们依赖这些数字进行条件判断的时候,就有可能出现问题

那我是怎么解决小数精度误差的呢?在工作中当然是使用已有的成熟库了,笔者用到了一个 decimal.js 的库

decimal.js 一些简单的用法

const value = new Decimal(x).dividedBy(iconRect.width).toFixed(1);

new Decimal(updateValuePrecision(hoverValue)).minus(new Decimal(hoverValue).floor()).toNumber()
          
const fullIndex = new Decimal(hoverValue).minus(1).floor().toNumber();

🤖 小贴士:既然提到了评分组件,您想知道怎么实现一个最简单的评分组件吗?😤

🚀 功能需求

代码开发先有架构先有功能需求,才有代码实现。别起来一股脑对着代码死干

  1. 有一个受控属性 value,如果有值,点击评分组件什么都不会变,只会把最新的值通过 onChange 给到你
  2. 默认用 emptyIcon 渲染出 5 个未激活的小星星
  3. 点击之后激活的小星星用 icon 渲染
function Demo() {
  const [value, setValue] = useState(1.5)
  return <Rate
  value={value}
  onChange={setValue}
  count={5}
  icon={<Star color="#0858d9" />}
  emptyIcon={<Star />}
  />
}

🚀 简单实现

function Rate(props) {
  const { count } = props;
  const [value, setValue] = useControllableValue(props)
  const onClick = e => {
    // 点击评分组件的时候
    // 重新 setValue
  }
  return <div onClick={onClick}>
            [...Array(count)].map((_, key) => {
              return <div key={key}>'图标'</div>
            })
  </div>
}

原理很简单,用到了 ahooks 里面的 useControllableValue 实现受控属性

  1. useControllableValue 会读取 <Rate /> 组件的 props,看看 props 上有没有 value 字段
  2. 如果没有 value 字段,你去执行 setValue(val)useControllableValue 内部就会通过 setState(val) 去修改 value,那么用到 useControllableValue 这个组件就会重渲染。
    并且还会把最新值给到 props上的 onChange 函数执行
  3. 如果有 value 字段,你去执行 setValue(val),他只会把值 val 给到 props 上的 onChange 函数而已,就不会 setState 了,所以什么也没发生

useControllableValue 默认读取 props.valueprops.onChange,当然可以自定义,去看 ahooks 文档

如果想了解代码实现细节的,可以去看我的 github

顺便帮我点一颗小星星可以吗?各位程序员里面的小帅哥小美女

github 仓库地址

🤖 相关

面试官:听说你简历里写的精通 React 源码,那你给我讲讲 React Scheduler 呗?我:😡 工资加 2K

面试官:你说你做过组件库,肯定了解过复杂组件状态管理的useSyncExternalStore吧?我:😭

面试官:你跟我说 setState 是同步的,它不是异步的吗?背错面试题了吧你!我:😭

面试官:你说你开发过组件库,那你怎么会不知道受控组件?面试就到这里吧。我:😭

版权归许泽川所有

如需转载,请提前询问本人的许可