学前回顾:map filter forEeach的使用区别
1. 认识SKU
2. 商品sku规格遍历
3.点击规格更新选中状态
实现的代码逻辑
给选中的规格添加高亮的style:
通过selected是否为true添加selected效果
4.点击规格更新禁用状态
4.1 点击规格更新禁用状态=生成有效路径字典(1)
当:库存字段为0时,对应的sku规格会被禁用掉
4.2 点击规格更新禁用状态=生成有效路径字典(2):用于简化是否有库存
最终获取到对象的格式,目的是便于查找
4.2.1 实现步骤:
4.2.2 实现图解:
4.2.3 幂集JavaScript代码
// power-set.js
/**
* 使用位运算生成幂集(Power Set)
* 幂集是指一个集合的所有子集(包括空集和自身)
*
* @param {Array} originalSet - 原始集合
* @returns {Array} - 包含所有子集的数组
*/
export default function bwPowerSet(originalSet) {
const subSets = [];
// 我们将有 2^n 种可能的组合(n 是原始集合的长度)
// 这是因为对于原始集合的每个元素,我们都要决定是否包含它(每个元素有 2 种选择)
const numberOfCombinations = 2 ** originalSet.length;
// 从 0 到 2^n 范围内的每个数字的二进制表示,正好用其位(0 或 1)表示是否包含集合中的相关元素
// 例如,对于集合 {1, 2, 3},二进制数 0b010 表示只包含 "2" 到当前子集中
for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex++) {
const subSet = [];
for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex++) {
// 判断是否需要将当前元素包含到子集中
// 使用位与运算:检查 combinationIndex 的第 setElementIndex 位是否为 1
if (combinationIndex & (1 << setElementIndex)) {
subSet.push(originalSet[setElementIndex]);
}
}
// 将当前子集添加到所有子集的列表中
subSets.push(subSet);
}
return subSets;
}
4.2.4 代码实现
解释一下 代码中的if和else代码段
得到的pathMap格式为:
5 点击规格更新禁用状态-初始化规格禁用
思路:遍历每一个规格对象,使用name字段作为key去路径字典pathMap中作匹配,匹配不上则禁用
实现思路:通过增加disabled字段,若匹配上路径字段,disabled为false,匹配不上路径字段,则disabled为true
代码逻辑: