当前位置:首页 > JavaScript

js连加实现

2026-02-02 01:27:32JavaScript

实现 JavaScript 连续加法

基础实现方式

使用 + 运算符或 reduce 方法可以实现数组元素的连续相加。

const numbers = [1, 2, 3, 4];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}
console.log(sum); // 输出 10

使用 reduce 方法

reduce 方法更简洁,适合处理数组求和。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出 10

动态输入处理

若需要动态接收用户输入并计算总和,可以通过事件监听实现。

document.getElementById('addButton').addEventListener('click', () => {
  const input = document.getElementById('numberInput');
  const value = parseFloat(input.value);
  if (!isNaN(value)) {
    const currentSum = parseFloat(document.getElementById('sumDisplay').textContent);
    document.getElementById('sumDisplay').textContent = currentSum + value;
    input.value = '';
  }
});

处理浮点数精度问题

连续加法可能导致浮点数精度问题,可用 toFixed 或整数转换解决。

const sum = 0.1 + 0.2;
console.log(sum.toFixed(2)); // 输出 "0.30"

链式加法函数

封装一个可链式调用的加法函数,适用于多次连续操作。

js连加实现

function createAdder(initialValue = 0) {
  let total = initialValue;
  return {
    add: (num) => {
      total += num;
      return this;
    },
    getSum: () => total
  };
}

const adder = createAdder(5).add(3).add(2);
console.log(adder.getSum()); // 输出 10

标签: js
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现正交

js实现正交

正交的概念 正交在数学和计算机科学中通常指两个向量垂直或线性无关。在编程中,正交性常被用于设计模块化、低耦合的系统。 向量正交判断 判断两个向量是否正交可以通过点积是否为0来实现: fun…