(最简易版本1)js笛卡尔积生成商品SKU多规格算法

简介: 首先这篇文章得仔细看,上面是我出的第一版本多规格算法可以去看一下思路,最主要的思路还是来源于递归算法

首先这篇文章得仔细看,上面是我出的第一版本多规格算法可以去看一下思路,最主要的思路还是来源于递归算法


算法版本升级


1.使用Reduce函数来对算法进行升级优化


首先了解一下reduce


reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。


原理还是一个递归,但是reduce更简单


1.1概述

let 结果 = 数组.reduct(累加器, 初始化值)
//累加器
(累加结果, 当前值, 当前索引)=>{
  return 处理结果//这里的处理结果会返回给下一次的累加结果
}

1.2累加和

// reduce 案例1:累加和
let arr = [1,2,3,4,5]
let s = arr.reduce( (sum,current,index)=>{
    return sum + current
} , 0)
console.info(s)

2.使用 reduce函数生成笛卡尔积

let arr = [
    ['红色', '黑色', '白色'],
    ['16G', '32G'],
    ['移动版', '联通版'],
]
let result = arr.reduce((a, b, c) => {
    var res = []
    a.map(x => {
        b.map(y => {
            res.push([...x, y])
        })
    })
    return res
}, [[]])
console.log(result)

1024b19218af40c7a8a6290c6186518d.png

3.生成对象形式的笛卡尔积(这种形式常用与elementui)方便简单

let newArr = [{
        name: 'color',
        data: ['红色', '黑色', '白色'],
    },
    {
        name: 'size',
        data: ['16G', '32G'],
    },
    {
        name: 'banben',
        data: ['移动版', '联通版'],
    }
]
let newResult = newArr.reduce((a, b, c) => {
    let res=[]
    a.map(x=>{
        b.data.map(y=>{
            res.push({...x,[b.name]:y})
        })
    })
    return res
},[{}])
console.log(newResult)

1024b19218af40c7a8a6290c6186518d.png

目录
相关文章
|
13天前
|
算法 JavaScript 前端开发
在JavaScript中实现基本的碰撞检测算法,我们通常会用到矩形碰撞检测,也就是AABB(Axis-Aligned Bounding Box)碰撞检测
【6月更文挑战第16天】JavaScript中的基本碰撞检测涉及AABB(轴对齐边界框)方法,常用于2D游戏。`Rectangle`类定义了矩形的属性,并包含一个`collidesWith`方法,通过比较边界来检测碰撞。若两矩形无重叠部分,四个条件(关于边界相对位置)均需满足。此基础算法适用于简单场景,复杂情况可能需采用更高级的检测技术或物理引擎库。
49 6
|
6天前
|
JavaScript 前端开发 搜索推荐
JavaScript常见的排序算法详解
JavaScript常见的排序算法详解
11 1
|
13天前
|
JavaScript 前端开发 算法
Box2D(现在通常称为Box2D.js或者其WebAssembly版本,Emscripten Box2D)是一个流行的2D物理引擎,用于模拟刚体动力学、碰撞检测与响应以及关节约束等物理现象
【6月更文挑战第16天】Box2D.js,基于C++的2D物理引擎,经Emscripten编译为WebAssembly,用于JavaScript游戏中的真实物理模拟,包含碰撞检测和关节约束。它提供高效的碰撞检测,易于扩展和定制物理属性。使用步骤涉及初始化世界、创建刚体、添加碰撞形状、模拟物理及处理碰撞事件。物理引擎虽提升逼真度,但也增加复杂性和性能需求。其他选项如p2.js、matter.js和ammo.js也可供选择。
53 8
|
3天前
|
算法 JavaScript 安全
一篇文章讲明白JavaScript_提交表单和MD5算法密码加密
一篇文章讲明白JavaScript_提交表单和MD5算法密码加密
|
3天前
|
算法 JavaScript 安全
一篇文章讲明白JavaScript_提交表单和MD5算法密码加密
一篇文章讲明白JavaScript_提交表单和MD5算法密码加密
|
29天前
|
JavaScript Java 测试技术
基于ssm+vue.js的会员制度管理的商品营销系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js的会员制度管理的商品营销系统附带文章和源代码设计说明文档ppt
17 1
|
9天前
|
JavaScript 前端开发
杨老师课堂之JavaScript定时器限时抢购秒杀商品案例
杨老师课堂之JavaScript定时器限时抢购秒杀商品案例
9 0
|
1月前
|
算法
【优选算法】——Leetcode——LCR 179. 查找总价格为目标值的两个商品
【优选算法】——Leetcode——LCR 179. 查找总价格为目标值的两个商品
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的网上商品订单转手系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的网上商品订单转手系统附带文章源码部署视频讲解等
27 0
|
1月前
|
算法 关系型数据库 MySQL
实时计算 Flink版产品使用合集之哪个版本可以做增量快照算法
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。