JavaScript算法教程之sku(库存量单位)详解


Posted in Javascript onJune 29, 2017

前言

这几天公司出的题目,之前项目中写过一个类似的,但是写的很猥琐(一些表现是通过频繁操作DOM实现的),借着有奖励的机会重写了一下。

sku:

SKU=Stock Keeping Unit(库存量单位)。即库存进出计量的基本单元,可以是以件,盒,托盘等为单位。SKU这是对于大型连锁超市DC(配送中心)物流管理的一个必要的方法。现在已经被引申为产品统一编号的简称,每种产品均对应有唯一的SKU号。单品:对一种商品而言,当其品牌、型号、配置、等级、花色、包装容量、单位、生产日期、保质期、用途、价格、产地等属性与其他商品存在不同时,可称为一个单品。

以上摘自百度百科

思路:

通过字典键值对(在JavaScript中即是Object数据类型)的方式来查找对应可选属性。

难点:

在于所确定属性的同级可选属性。

实现步骤:

  1. 将拿到的数据重新组织成需要展示的数据格式、计算使用的字典数据格式、以及计算过程中需要的一些辅助数据。
  2. 获取页面的所选的属性。
  3. 根据所选属性组成查找key来查找结果。
  4. 将结果缓存,方便下次加速查找。
  5. 表现到页面。
  6. 确定商品。

核心代码:

/**
 * 得到结果
 * @param {string} key 查找关键字以;分割
 * @return {array} 所有可选属性数组
*/
getResult(key, isRealFind = true) {
 // 如缓存中存在,则直接返回结果
 if (this.cacheData[key] && isRealFind) {
 this.result = this.cacheData[key];
 this.resultID = this.goodsDict[key] ? this.goodsDict[key] : '';
 console.log(this.resultID);
 return this.result;
 }
 // 继续查找
 let result = '';
 for (let _key in this.goodsDict) {
 let keyArr = key.split(';');
 let _keyArr = _key.split(';');
 let arr = keyArr.concat(_keyArr);
 arr = Array.from(new Set(arr));
 if (arr.length === _keyArr.length) {
 result += _key;
 }
 }
 if (isRealFind) {
 // 所有可选属性
 this.result = result.split(';');
 let _keyArr = key.split(';');
 if (_keyArr[_keyArr.length - 1] === '') {
 _keyArr.pop();
 }
 for (let i = 0; i < _keyArr.length; i++) {
 let _arr = key.split(';');
 let str = _arr.splice(i, 1);
 let oldResult = this.getResult(_arr.join(';'), false);
 let index = '';
 // 获取该key所在索引
 this.allKeys.forEach((item, i) => {
 if (item.indexOf(str.join('')) !== -1) {
  index = i;
  return;
 }
 });
 this.allKeys[index].forEach(item => {
 if (oldResult.indexOf(item) !== -1) {
  this.result.push(item);
 }
 });
 }
 this.result = Array.from(new Set(this.result));
 // 缓存数据
 this.cacheData[key] = this.result;
 this.resultID = this.goodsDict[key] ? this.goodsDict[key] : '';
 console.log(this.resultID);
 return this.result;
 } else {
 return result;
 }
}

github地址 (应该拉下来就能跑,页面展示用的jQuery,因为当前项目需要,换成mvvm框架页面表现会更加简单)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
详解webpack自动生成html页面
Jun 29 #Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 #Javascript
详解webpack分包及异步加载套路
Jun 29 #Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 #Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 #Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 #Javascript
You might like
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
JS delegate与live浅析
2013/12/21 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
安装dbus-python的简要教程
2015/05/05 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
python 图像增强算法实现详解
2021/01/24 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
家长会标语
2014/06/24 职场文书
安全责任书模板
2014/07/22 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
会计工作岗位职责
2015/02/03 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
高二语文教学反思
2016/02/16 职场文书
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫