<javascript>Number.prototype.toFixed小记

Number.prototype.toFixed小记

说明:toFixed经常被用来四舍五入,但这不是一个好方法.

复现问题


解决方案

很明显这个是因为浮点的问题造成的(计算机准确的保存浮点)下面有老外的解决方案:

Number.prototype.round = function(digits) {
    digits = Math.floor(digits);
    if (isNaN(digits) || digits === 0) {
        return Math.round(this);
    }
    if (digits < 0 || digits > 16) {
        throw 'RangeError: Number.round() digits argument must be between 0 and 16';
    }
    var multiplicator = Math.pow(10, digits);
    return Math.round(this * multiplicator) / multiplicator;
}
Number.prototype.fixed = function(digits) {
    digits = Math.floor(digits);
    if (isNaN(digits) || digits === 0) {
        return Math.round(this).toString();
    }
    var parts = this.round(digits).toString().split('.');
    var fraction = parts.length === 1 ? '' : parts[1];
    if (digits > fraction.length) {
        fraction += new Array(digits - fraction.length + 1).join('0');
    }
    return parts[0] + '.' + fraction;
}
//0.7875.fixed(3) /*0.788*/

过程

toFixed方法看不到源码,那么我们就去他的产生地吧,ECMAScript标准,这个就是javascript,我们的toFixed就是在这定义的,在google这个协议后,我们截下一部分相关的描述信息


翻译一下


这里的翻译是针对第8条的,其整个原理并不涉及四舍五入,也就是说,toFixed的方法并不是用来四舍五入的,那为什么firefox下面会出现问题?

好吧,那么我们再追踪下源码看下吧,下载firefox某一个版本的源码.............这里折腾了半天,找到了一个相关的文件jsnum.cpp,jsnum.h文件




ToInteger方法在jsnum.h里面定义的,虽然没有编译,但是能够清晰的看到,toFixed方法在这个函数里面是被强制转换double了,这样能不有精度问题么?而ECMA上面的实现并非如此,至于IE,表示并不知道怎么实现的.


以上存心个人瞎编欢迎批评指正.

### 添加“增加购买次数”功能的设计方案 为了在 HTML 表格中每行添加一个按钮或输入框以实现“增加购买次数”的功能,可以采用以下方法: #### 功能设计概述 1. **HTML 结构扩展**:通过为表格的每一行新增一列,放置一个按钮或输入框用于触发“增加购买次数”的操作。 2. **事件处理机制**:利用 JavaScript 或 Vue.js 的数据绑定能力,监听按钮点击事件并更新对应的购买次数。 3. **兼容删除逻辑**:确保新功能不会干扰已有的删除逻辑。 --- #### 修改后的 HTML 和 CSS 示例 以下是基于 Bootstrap 风格的一个简单示例,展示如何向现有表格中添加“增加购买次数”按钮,并保持与删除逻辑的兼容性。 ```html <!-- 基于 Bootstrap 的表格结构 --> <table class="table table-striped"> <thead> <tr> <th>商品名称</th> <th>价格</th> <th>购买次数</th> <th>操作</th> </tr> </thead> <tbody id="productTable"> <!-- 动态生成的表格行 --> <tr data-id="1"> <td>苹果</td> <td>$0.5</td> <td><input type="number" value="1" readonly /></td> <td> <button class="btn btn-primary increase-btn">+</button> <button class="btn btn-danger delete-btn">删除</button> </td> </tr> <tr data-id="2"> <td>香蕉</td> <td>$0.8</td> <td><input type="number" value="1" readonly /></td> <td> <button class="btn btn-primary increase-btn">+</button> <button class="btn btn-danger delete-btn">删除</button> </td> </tr> </tbody> </table> ``` 上述代码片段展示了如何在表格的最后一列加入两个按钮:“+”按钮用于增加购买次数,“删除”按钮保留原有功能[^1]。 --- #### JavaScript 实现动态交互 下面是一个简单的脚本,用于处理“增加购买次数”和“删除”功能的逻辑。 ```javascript document.addEventListener('DOMContentLoaded', function () { const rows = document.querySelectorAll('#productTable tr'); // 处理“增加购买次数” rows.forEach(row => { const increaseButton = row.querySelector('.increase-btn'); const purchaseCountInput = row.querySelector('input[type=number]'); if (increaseButton && purchaseCountInput) { increaseButton.addEventListener('click', function () { let currentCount = parseInt(purchaseCountInput.value, 10); purchaseCountInput.value = currentCount + 1; }); } }); // 处理“删除”逻辑 rows.forEach(row => { const deleteButton = row.querySelector('.delete-btn'); if (deleteButton) { deleteButton.addEventListener('click', function () { row.remove(); }); } }); }); ``` 此脚本实现了两部分核心功能: - 当用户点击“+”按钮时,对应行的购买次数会自动加 1[^2]。 - 删除按钮仍然能够正常移除整行记录。 --- #### 使用 Vue.js 进一步优化 如果项目已经使用 Vue.js,则可以通过双向绑定简化开发流程。例如: ```vue <template> <table class="table table-striped"> <thead> <tr> <th>商品名称</th> <th>价格</th> <th>购买次数</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in products" :key="index"> <td>{{ item.name }}</td> <td>${{ item.price.toFixed(2) }}</td> <td>{{ item.purchaseCount }}</td> <td> <button @click="increasePurchase(index)" class="btn btn-primary">+</button> <button @click="removeProduct(index)" class="btn btn-danger">删除</button> </td> </tr> </tbody> </table> </template> <script> export default { data() { return { products: [ { name: '苹果', price: 0.5, purchaseCount: 1 }, { name: '香蕉', price: 0.8, purchaseCount: 1 } ] }; }, methods: { increasePurchase(index) { this.products[index].purchaseCount += 1; }, removeProduct(index) { this.products.splice(index, 1); } } }; </script> ``` 在此 Vue 组件中,`products` 数组存储了所有商品的信息。每次点击“+”按钮都会调用 `increasePurchase` 方法,从而更新对应商品的购买次数;而点击“删除”按钮则会调用 `removeProduct` 方法,从数组中移除该条目[^3]。 --- ### 总结 无论是纯 JavaScript 方案还是 Vue.js 解决方案,都可以有效实现“增加购买次数”功能并与已有删除逻辑共存。具体选择取决于项目的实际需求和技术栈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值