用数学思维写出更好的JavaScript代码

更新日期: 2025-11-01 阅读: 59 标签: 技巧

很多程序员觉得数学和编程关系不大,但实际上,数学思想能帮助我们写出更清晰、更高效的代码。下面来看看怎么用数学思维改善JavaScript编程。


1. 集合论:处理数据集合

数学中的集合是不重复元素的组合。在JavaScript里,我们可以用Set对象来实现集合操作。

比如删除数组中的重复项:

const numbers = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4, 5]

还可以进行集合运算:

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

// 求交集
const intersection = [...setA].filter(x => setB.has(x));
console.log(intersection); // [3]

// 求并集
const union = new Set([...setA, ...setB]);
console.log([...union]); // [1, 2, 3, 4, 5]

// 求差集
const difference = [...setA].filter(x => !setB.has(x));
console.log(difference); // [1, 2]

用集合思维处理数据,代码会更简洁,逻辑也更清楚。


2. 布尔逻辑:简化条件判断

每个if语句都涉及布尔运算。用好布尔逻辑能让代码更易读。

不好的写法:

if (isLoggedIn === true && hasPaid === true) {
  access = true;
} else {
  access = false;
}

好的写法:

const access = isLoggedIn && hasPaid;

再比如处理多个条件:

// 复杂的判断
if ((role === 'admin' || role === 'editor') && isActive) {
  // 执行操作
}

// 可以改成
const canEdit = (role === 'admin' || role === 'editor') && isActive;
if (canEdit) {
  // 执行操作
}


3. 递归:解决分层问题

递归在数学中很常见,在编程里也很实用。

计算阶乘:

const factorial = n => n <= 1 ? 1 : n * factorial(n - 1);
console.log(factorial(5)); // 120

处理嵌套数组:

// 展开多层嵌套的数组
const flatten = arr => 
  arr.reduce((result, item) => 
    Array.isArray(item) ? 
    result.concat(flatten(item)) : 
    result.concat(item), 
  []);

console.log(flatten([1, [2, [3, [4]]]])); // [1, 2, 3, 4]

遍历树形结构:

const tree = {
  value: 1,
  children: [
    {
      value: 2,
      children: [
        { value: 3, children: [] }
      ]
    },
    { value: 4, children: [] }
  ]
};

function traverse(node) {
  console.log(node.value);
  node.children.forEach(child => traverse(child));
}

traverse(tree); // 1, 2, 3, 4


4. 图论:处理连接关系

现代应用充满各种关系:社交网络的朋友关系、网页链接、模块依赖等。

深度优先搜索:

const graph = {
  'A': ['B', 'C'],
  'B': ['D'],
  'C': ['E'],
  'D': ['F'],
  'E': [],
  'F': []
};

function dfs(startNode) {
  const visited = new Set();
  const stack = [startNode];
  
  while (stack.length > 0) {
    const node = stack.pop();
    if (!visited.has(node)) {
      console.log(node);
      visited.add(node);
      // 将邻居节点加入栈中
      graph[node].forEach(neighbor => {
        if (!visited.has(neighbor)) {
          stack.push(neighbor);
        }
      });
    }
  }
}

dfs('A'); // A, C, E, B, D, F


5. 概率:处理随机性

游戏、测试、负载均衡都需要随机性。

加权随机选择:

function weightedRandom(choices) {
  const totalWeight = Object.values(choices).reduce((sum, weight) => sum + weight, 0);
  let random = Math.random() * totalWeight;
  
  for (const [item, weight] of Object.entries(choices)) {
    random -= weight;
    if (random <= 0) {
      return item;
    }
  }
}

// 苹果概率30%,香蕉10%,樱桃60%
console.log(weightedRandom({ apple: 3, banana: 1, cherry: 6 }));

随机抽样:

function randomSample(array, count) {
  const shuffled = [...array];
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled.slice(0, count);
}

console.log(randomSample([1, 2, 3, 4, 5, 6, 7, 8], 3));


6. 复杂度分析:理解性能

了解算法复杂度能帮助我们选择更好的解决方案。

不同数据结构的查找效率:

const arr = [1, 2, 3, 4, 5];
const set = new Set([1, 2, 3, 4, 5]);
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

// 数组查找 - O(n)
console.log(arr.includes(5));

// Set查找 - O(1)
console.log(set.has(5));

// Map查找 - O(1)
console.log(map.has('a'));

选择合适的数据结构很重要:

// 需要频繁查找时,用Set或Map
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();
  
  arr.forEach(item => {
    if (seen.has(item)) {
      duplicates.add(item);
    } else {
      seen.add(item);
    }
  });
  
  return [...duplicates];
}


7. 函数组合:构建复杂功能

把小函数组合成复杂功能,就像搭积木一样。

基础组合:

const add = x => x + 2;
const multiply = x => x * 3;
const square = x => x * x;

// 组合函数
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const complexOperation = compose(square, multiply, add);
console.log(complexOperation(3)); // ((3 + 2) * 3) ^ 2 = 225

管道操作:

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const processData = pipe(
  x => x * 2,
  x => x + 1,
  x => x * x
);

console.log(processData(3)); // ((3*2)+1)^2 = 49


实际应用建议

开始可以用这些简单的方法:

  1. 用Set处理去重问题

  2. 用布尔变量简化复杂条件

  3. 用递归处理嵌套数据

  4. 了解常用数据结构的性能特点

慢慢培养数学思维,你会发现写代码时思路更清晰,解决问题的办法也更多。数学不是要我们记住复杂公式,而是学会结构化思考问题的方法。这种思维方式对编程很有帮助,能让代码质量明显提升。

本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/13106

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

不常被提及的JavaScript小技巧

这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!