IMAGINE'S BLOG IMAGINE'S BLOG
首页
  • 原生JS

    • JavaScript
  • 前端框架扩展

    • Vue
    • React
    • UI组件库
  • HTML
  • CSS
  • 浏览器
  • 分类
  • 标签
  • 归档
  • 技术文档
  • GitHub相关
  • Nodejs
关于
  • 网站
  • 友情链接
GitHub (opens new window)

peng

平平无奇的web前端开发一枚
首页
  • 原生JS

    • JavaScript
  • 前端框架扩展

    • Vue
    • React
    • UI组件库
  • HTML
  • CSS
  • 浏览器
  • 分类
  • 标签
  • 归档
  • 技术文档
  • GitHub相关
  • Nodejs
关于
  • 网站
  • 友情链接
GitHub (opens new window)
  • JavaScript

    • javascript 之 this 指向问题
    • JS循环遍历方法
    • 前端常用公共方法工具类
    • JS声明提升
    • JS合并数组对象中key值相同的数据
    • 数组对象求和
    • 前端路由实现
    • Promise(一):Promise 认识
    • Promise(二):手动实现一个 Promise
    • Promise(三):拓展方法实现
    • JS forEach踩坑
    • ES6-ES12 特性
    • async/await
    • JavaScript 数组去重
    • js对象排序
    • js if/else 语句优化策略
    • js深拷贝
    • 正则表达式校验
    • js笛卡尔积
      • 定义
      • 应用场景
      • js 代码
      • 其它实现方法
    • Axios 封装
  • 框架扩展

  • 前端乱炖
  • JavaScript
peng
2022-09-05
目录

js笛卡尔积

# 定义

在数学中的解释是,两个集合 X 和 Y 的笛卡尓积(Cartesian product) (opens new window),又称直积,表示为 X × Y,第一个对象是 X 的成员而第二个对象是 Y 的所有可能有序对的其中一个成员。

假设集合 A={a, b},集合 B={0, 1, 2},则两个集合的笛卡尔积为{(a, 0), (a, 1), (a, 2), (b, 0), (b, 1), (b, 2)}。

  • 简单来说就是多组数据的排列组合

# 应用场景

  1. 在电商项目中,常用于商品 SKU 的订单组合;根据商品的子类型和不同颜色尺寸生成 n 种可能的组合
  2. MySql 的多表查询
  3. 生成坐标 .......

# js 代码

function cartesianProduct(array) {
  if (array.length < 2) return array[0] || [];

  return [].reduce.call(array, function (col, set) {
    var res = [];

    col.forEach(function (c) {
      set.forEach(function (s) {
        var t = [].concat(Array.isArray(c) ? c : [c]);
        t.push(s);
        res.push(t);
      });
    });

    return res;
  });
}

cartesianProduct([
  [1, 2, 3],
  ["a", "b", "c"],
  ["张三", "李四", "王五"],
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

得到的结果:


# 其它实现方法

笛卡尔积实现-JavaScript 版 (opens new window)

飞鸿影的博客-笛卡尔积 (opens new window)

#JavaScript
上次更新: 2022/09/06, 10:30:04
正则表达式校验
Axios 封装

← 正则表达式校验 Axios 封装→

最近更新
01
Axios 封装
09-06
02
MySQL数据库常用操作
09-06
03
解决element表格数据量过大导致页面渲染缓慢、卡顿问题
09-06
更多文章>
Theme by Vdoing | Copyright © 2020-2024 peng | IMAGINE
image | imgloc.com
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式