前端JS商品规格组合

给定一个数组

   let data = [{name: "颜色",specs: ["白色", "黑色"],},{name: "尺寸",specs: ["14寸","15寸", "16寸"],},{name: "处理器",specs: ["i5", "i7", "i9"],},];

组合处理(据说这套路叫什么啥笛卡尔积)

方法很巧妙,自己写不一定写的出,但是可以借鉴前人的经验,然后去试着理解,分析,即使写不出也要能看的懂,如果完成任务直接拿现成的方法用也无妨

function combine(arr) {let result = [[]];//定义一个数组必须要有一项(且这一项必须是数组)arr.map((x) => {let res = [];console.log(result,'result');result.map((y) => {x.specs.map((z) => {//最内层循环x.specs.map第一次执行完之后res的值就是[["白色"], ["黑色"]],因为specs的值为两项["白色", "黑色"]循环两遍,循环完后跳出循环到上一层循环,//此时上一层的循环result.map的result还是[[]],所以执行完一遍之后跳出当前循环到上一层循环,//此时arr.map循环完第一遍开始赋值将result = res,此时result为[["白色"], ["黑色"]],然后开始进入result.map循环//此时x.specs.map的值为arr.map的第二次循环也就是循环["14寸","15寸", "16寸"],而result.map为[["白色"], ["黑色"]],//此时循环的步骤为result.map第一遍循环result,此时y为["白色"],而z为arr第二项的specs里面的每一项,于是用["白色"]去拼接["14寸","15寸", "16寸"]的每一项//此时就res就变成了result.map[["白色"], ["黑色"]]跟["14寸","15寸", "16寸"]去按顺序一项一项的去组合,组合完之后将 result = res,//以此类推便出现了最终的所有值的组合结果,很巧妙的一个套路,自己去从0开始写还是比较费脑筋的,尤其逻辑处理能力尚不强的时候以及没多少经验的时候res.push([...y, z]);});});result = res;//将第一次循环之后的值赋值给result,此时result为[["白色"], ["黑色"]],故下一波循环得循环两次});return result;}console.log(combine(data));

逻辑解释(给自己看的),配合打印的值看更容易理解

//最内层循环x.specs.map第一次执行完之后res的值就是[["白色"], ["黑色"]],因为specs的值为两项["白色", "黑色"]循环两遍,循环完后跳出循环到上一层循环,

            //此时上一层的循环result.map的result还是[[]],所以执行完一遍之后跳出当前循环到上一层循环,

            //此时arr.map循环完第一遍开始赋值将result = res,此时result为[["白色"], ["黑色"]],然后开始进入result.map循环

            //此时x.specs.map的值为arr.map的第二次循环也就是循环["14寸","15寸", "16寸"],而result.map为[["白色"], ["黑色"]],

            //此时循环的步骤为result.map第一遍循环result,此时y为["白色"],而z为arr第二项的specs里面的每一项,于是用["白色"]去拼接["14寸","15寸", "16寸"]的每一项

            //此时就res就变成了result.map[["白色"], ["黑色"]]跟["14寸","15寸", "16寸"]去按顺序一项一项的去组合,组合完之后将 result = res,

            //以此类推便出现了最终的所有值的组合结果,很巧妙的一个套路,自己去从0开始写还是比较费脑筋的,尤其逻辑处理能力尚不强的时候以及没多少经验的时候

 

方法二:递归调用

这个方法稍微理解起来有点绕

    const generateCombinations = (arr, result = [], current = {}, i = 0)=>{// 由于arr.length的长度一般都不会等于,所以最开始直接执行else// 第二次函数调用i等于1,而数组长度依旧为3,所以还是执行else// 第三次函数调用,此时i等于2,数组长度依旧为3,所以还是执行else// 第四次函数调用,此时i等于3,i已经等于数组长度了,故执行if,此时current为,i5 {颜色: '白色', 尺寸: '14寸', 处理器: 'i5'},// 当第四次函数调用完之后执行return result,但是函数之前的循环并没有终止掉,上一步的循环停留在调用递归的地方// 而此时函数执行到处理器规格的specs循环的第二遍,此时current等于i7 {颜色: '白色', 尺寸: '14寸', 处理器: 'i7'},i还是之前的没有加一的i所以为2// 于是再次执行又要递归i再次加1等于3// 后面就不解释了,直接看打印值,很巧妙的一种方法,理解起来稍微有点绕不如笛卡尔积写法if (i === arr.length) {console.log('执行push');result.push({...current});} else {for (const value of arr[i].specs) {// 第一次循环(此处第一次循环为颜色规格的specs第一次循环)current[arr[i].name]的arr[i].name值为:'颜色',而value为颜色规格的每一项,// 此时循环第一次之后arr不变,result不变,current为 白色 {颜色: '白色'},i+1等于1,然后执行递归// 第二次循环,由于执行了递归,第二次循环变成了循环尺寸规格的specs,// 此时current为 14寸 {颜色: '白色', 尺寸: '14寸'},i+1等于2,然后再次递归,// 第三次循环,由于执行了递归,第三次循环变成了循环处理器规格的specs,// 此时current为 i5 {颜色: '白色', 尺寸: '14寸', 处理器: 'i5'},i+1等于3,然后再次递归,current[arr[i].name] = value;console.log(arr[i].name,'----',value,current,i);generateCombinations(arr, result, current, i + 1);}}return result;}console.log(generateCombinations(data));

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/789867.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

XenCenter 2024 导入虚拟机

导入虚拟机 虚拟机位置 导入到那一个服务器 导入虚拟机存放存储位置 虚拟机网卡配置 SR修复功能,看自己需求 虚拟机恢复确认最终配置 恢复好的虚拟机 虚拟机模板转换

肿瘤免疫反应瀑布图(源于The Miller Lab)

目录 数据格式 绘图 ①根据剂量 ②根据type ③根据治疗响应度 添加水平线 数据格式 肿瘤免疫响应数据 rm(list ls()) library(tidyverse) library(dplyr) library(knitr)#模拟数据 # We will randomly assign the two doses, 80 mg or 150 mg, to the 56 subjects Me…

2024年第八届材料科学与纳米材料国际会议(ICMSN 2024)即将召开!

2024年第八届材料科学与纳米材料国际会议(ICMSN 2024)将于2024年7月9日至12日在英国爱丁堡召开。在过去的十年中,纳米材料一直是人们极大关注的主题。这些材料以其极小的特征尺寸而著称,具有广泛的工业、生物医学和电子应用潜力。…

深度学习之详解常见梯度算法(概念、公式、原理、算法实现过程)

目录 前言 一、如何实现梯度下降? 二、梯度计算 三、常见的梯度公式及梯度算法 常见的梯度公式: 1.标量对向量的梯度: 2. 标量对矩阵的梯度: 3. 向量对标量的梯度: 常见梯度算法: 四、常见梯度算法实现 1、…

OWASP API 安全风险,有哪些安全措施

随着互联网的快速发展,Web应用已成为人们日常生活和工作中不可或缺的一部分。然而,Web应用的安全问题也日益凸显,给企业和个人带来了极大的风险。 对于一些安全行业的用户来说,不少都听过关于OWASP这个词,很多用户想要…

ssm024家政服务网站设计+jsp

家政服务管理系统 摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 家政服务网站,主要的模块包括查看管理员;个人中心、用户管理、服务类型管理、家政类型管理、家政评…

学代码是理解就行,还是全部背?

在我没接触编程以前,看到程序,觉得这玩意到底怎么写出来的,写出这些代码的人,也太厉害了吧? 不会很多都要背下来吧? 我小学背课本都费劲,背不出来,中午不准回家吃饭,我就…

【零基础入门芯片课】半导体是什么?

大家好,我是砖一。 今天给大家分享一下半导体的基础知识,普及一下何为半导体,有从事IC,功率元器件,开关电源的朋友可以了解一下,希望对你有用~ 近几年,我们或多或少听过半导体,芯片…

02 Python进阶:CGI编程

什么是CGI CGI是通用网关接口(Common Gateway Interface)的缩写,它是一种标准协议,用于Web服务器执行外部程序或脚本与Web浏览器进行交互。通过CGI,Web服务器能够动态生成网页内容,处理用户提交的表单数据…

33-5 XXE漏洞 - xxe外部实体注入相关工具

1)xxe.sh || OOB XXE tool:一个方便的网站,可以输入您的域名并生成OOB XXE PoC。适用于盲注Out-of-band攻击。(主要) 2)staaldraad/xxeserv :简化FTP服务器的设置,以通过FTP接收OOB XXE攻击 以下是 ./xxeserv 命令的使用说明: Usage of ./xxeserv:-o string记录日志…

js的Proxy和Reflect

目录 Proxy对象的基本操作常见捕获器getset函数相关拦截器 ReflectReflect与基本语法的区别Reflect常见方法 Proxy和Reflect 在 ES6之前,如果我们对对象进行 新增或者删除属性时,仅靠原有的 Object.defineProperty是无法 监听的,基于此&a…

QT4-QT5-VS2019-编译无法打开文件 QtCore/qchar.h

1.系统环境变量 添加QTDIR 添加PATH 2.项目配置 2.1vc目录:包含目录库目录 2.2C/C 常规:附加包含目录QT5的头文件必须在附加包含目录里配置。 2.3链接器:附加库目录 2.4QTProject Settings

镜舟科技荣获第十三届中国智能制造高峰论坛两项大奖

2024年3月29日,由e-works数字化企业网和湖北省中小企业服务中心联合主办,中国中小企业发展促进中心指导的“第十三届中国智能制造高峰论坛暨第二十一届中国智能制造岁末盘点颁奖典礼”在北京圆满落幕。本次论坛汇聚了国内外智能制造领域的专家学者、企业…

有效的职场沟通及其重要性

欢迎来到职场沟通的世界,在这里,每一个词都至关重要,沉默则能传达出无尽的信息。一个有效沟通能力不仅仅是在线办公套件中的可选配件,而是一项绝对必需的能力。今天我们与您分享有效的职场沟通及其重要性。有效的职场沟通可以增强…

Redis高可用及持久化

文章目录 一、Redis高可用1、Redis高可用概述2、Redis高可用策略 二、Redis持久化1、Redis持久化的功能2、Redis持久化的两种方式2.1 RDB持久化2.2 AOF持久化(append only file) 3、RDB持久化3.1 触发条件3.1.1 手动触发3.1.2 自动触发3.1.2.1 配置方式3…

桶排序---

1、算法概念 桶排序:一种非比较的排序算法。桶排序采用了一些分类和分治的思想,把元素的值域分成若干段,每一段对应一个桶。在排序的时候,首先把每一个元素放到其对应的桶中,再对每一个桶中的元素分别排序&#xff0c…

EF数据持久化(三层架构,公司查,改)

效果图 Model设置具体流程在下面链接中 https://blog.csdn.net/Mr_wangzu/article/details/136805824?spm1001.2014.3001.5501 DAL using System; using System.Collections.Generic; using System.Linq; using System.Web; using WebApplication2.Models; namespace WebAppli…

结构体,联合体,枚举( 2 )

目录 2.联合体 2.1联合体类型的声明 2.2联合体的特点 2.3联合体的内存大小 3.枚举 3.1枚举类型的声明 3.2枚举类型的优点 3.3枚举类型的使用 2.联合体 联合体(Union)是另一种复合数据类型,它允许我们在同一内存位置存储不同的数据类型…

UE4_动画基础_ 瞄准偏移1D(Aim Offset Blend Space 1D)

瞄准偏移1D基本上可以完成角色的向左看向右看或者向上看向下看,像混合空间1D一样只有一个轴向可用。 操作步骤: 1、新建第三人称模板项目。 2、右键——动画——瞄准偏移1D 选取骨骼 双击打开 3、瞄准偏移混合的是姿势,我们需要创建姿势。 …

结合创新!多尺度特征融合+Transformer,参数和计算成本减半

通过多尺度特征融合,模型能够捕捉到不同层次的视觉细节,而Transformer的自注意力机制能够在这些不同层次的特征之间建立联系,有效地整合全局上下文信息,让模型能够应对多样化的视觉场景和变化。 这种结合策略充分利用了二者各自的…