当前位置:首页 > JavaScript

js实现分数

2026-04-05 14:36:26JavaScript

分数表示方法

在JavaScript中,分数可以通过对象或类来表示。常见的方法是创建一个包含分子和属性的对象。

const fraction = {
  numerator: 3,
  denominator: 4
};

分数运算

实现基本的分数运算需要处理加减乘除以及约分。

function addFractions(a, b) {
  const numerator = a.numerator * b.denominator + b.numerator * a.denominator;
  const denominator = a.denominator * b.denominator;
  return simplify({ numerator, denominator });
}

function simplify(fraction) {
  const gcd = findGCD(fraction.numerator, fraction.denominator);
  return {
    numerator: fraction.numerator / gcd,
    denominator: fraction.denominator / gcd
  };
}

function findGCD(a, b) {
  return b === 0 ? a : findGCD(b, a % b);
}

类实现

使用ES6类可以更好地封装分数操作:

class Fraction {
  constructor(numerator, denominator) {
    this.numerator = numerator;
    this.denominator = denominator;
  }

  add(other) {
    const numerator = this.numerator * other.denominator + other.numerator * this.denominator;
    const denominator = this.denominator * other.denominator;
    return new Fraction(numerator, denominator).simplify();
  }

  simplify() {
    const gcd = this.findGCD(this.numerator, this.denominator);
    return new Fraction(this.numerator / gcd, this.denominator / gcd);
  }

  findGCD(a, b) {
    return b === 0 ? a : this.findGCD(b, a % b);
  }
}

使用示例

const frac1 = new Fraction(1, 2);
const frac2 = new Fraction(1, 4);
const result = frac1.add(frac2); // 返回 3/4

注意事项

处理分数时需要考虑分母为零的情况,应在构造函数中添加验证:

constructor(numerator, denominator) {
  if (denominator === 0) throw new Error('Denominator cannot be zero');
  this.numerator = numerator;
  this.denominator = denominator;
}

负分数通常将负号放在分子上,可以在简化时处理:

js实现分数

simplify() {
  let numerator = this.numerator;
  let denominator = this.denominator;

  if (denominator < 0) {
    numerator *= -1;
    denominator *= -1;
  }

  const gcd = this.findGCD(Math.abs(numerator), Math.abs(denominator));
  return new Fraction(numerator / gcd, denominator / gcd);
}

标签: 分数js
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 的基本实现方法 在 JavaScript 中实现 Vue.js 的功能,可以通过直接引入 Vue 库或使用现代构建工具(如 Vite 或 Webpack)。以下是几种常见的实现方式:…

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与响应式…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…