前言

這幾天公司出的題目，之前項目中寫過一個類似的，但是寫的很猥瑣（一些表現是通過頻繁操作DOM實現的），借著有獎勵的機會重寫了一下。

sku:

SKU=Stock Keeping Unit（庫存量單位）。即庫存進出計量的基本單元，可以是以件，盒，托盤等為單位。SKU這是對于大型連鎖超市DC（配送中心）物流管理的一個必要的方法。現在已經被引申為產品統一編號的簡稱，每種產品均對應有唯一的SKU號。單品：對一種商品而言，當其品牌、型號、配置、等級、花色、包裝容量、單位、生產日期、保質期、用途、價格、產地等屬性與其他商品存在不同時，可稱為一個單品。

以上摘自百度百科

思路：

通過字典鍵值對（在JavaScript中即是Object數據類型）的方式來查找對應可選屬性。

難點：

在于所確定屬性的同級可選屬性。

實現步驟：

將拿到的數據重新組織成需要展示的數據格式、計算使用的字典數據格式、以及計算過程中需要的一些輔助數據。 獲取頁面的所選的屬性。 根據所選屬性組成查找key來查找結果。 將結果緩存，方便下次加速查找。 表現到頁面。 確定商品。

核心代碼：

/** * 得到結果 * @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框架頁面表現會更加簡單)