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将NodeList作为Array数组处理的方法
Jul 09 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
在vue-cli创建的项目中使用sass操作
Aug 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模板类代码
2008/09/07 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
pandas按条件筛选数据的实现
2021/02/20 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
优秀毕业生求职信
2014/06/05 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
护士心得体会范文
2016/01/25 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书