使用 ES5 內(nèi)置數(shù)組函數(shù) + 箭頭函數(shù)隱藏 for 循環(huán)細節(jié)

packageInfoList.forEach(package => {
    var newPackage = ConfigData.getGoods(true, package.id);
    package.packageTag.forEach(tag => {
        var newTag = newPackage.packageTag.find(t => t.id === tag.id);
        if(!newTag) return;
        tag.goods.forEach(goods => {
            var newGoods = newTag.goods.find(g => g.id === goods.id);
            if(!newGoods) return;
            var flag = updateGoodAttr(goods, newGoods);
        });
    });
});

updateGoodAttr = (goods, newGoods) => {
    goods.attr.forEach(attr => {
        var newAttr = newGoods.attr.find(a => a.id === attr.id)
        attr.option.filter(taste => !!taste.select).foreach(taste => {
            var newTasteOption = newAttr.option.find(t => t.id === taste.id);
            if(newTasteOption) {
                newTasteOption.select = taste.select;
            }
        });
    });
}

提取重復的數(shù)組比對邏輯

已經(jīng)省去里很多迭代的下角標處理里，但是代碼還是很啰嗦，頻繁重復對兩個數(shù)組進行元素比較。干脆把這個邏輯提取出來：

var match = (arr1, arr2, identifier, process) => arr1.forEach(item1 => 
    arr2.forEach(item2 => identifier(item1) === identifier(item2) && process(item1, item2))
);

傳入兩個數(shù)組，對數(shù)組元素的每個元素使用 identifier 獲取 id，如果比較成功，則調(diào)用 process 函數(shù)處理這兩個元素。例子中 identifier 都一樣，即 item => item.id.

var ID = item => item.id;

var processPackage = (p1, p2) => match(p1.packageTag, p2.packageTag, ID, processTag);

var processTag = (tag1, tag2) => match(tag1.goods, tag2.goods, ID, processGoods);

var processGoods = (goods1, goods2) => match(goods1,attr, goods2.attr, ID, processAttr);

var processAttr = (attr1, attr2) => match(attr1.options.filter(taste => !!taste.select), attr2.options, ID, processTaste);

var processTaste = (taste1, taste2) => taste2.select = taste1.select


var packageInfoList = [...], configPackageList = [...];

match(packageInfoList, configPackageList, ID , processPackage);

消除重復調(diào)用

目前代碼中還存在重復地調(diào)用 match 函數(shù)，調(diào)用邏輯相似而重復，如果能把這塊抽出來就好了。我們再提取一個函數(shù)，用來構造 processXXX。processAttr比較特殊，對兩邊取子屬性的邏輯不一樣，所以提取的這個函數(shù)需要考慮 processAttr 的需求。

var subProcess = ([s1, s2], id, process) => (i1, i2) => match(s1(i1), s2(i2), id, process)

var fixSelector = f => Array.isArray(f) ? f : [f, f]
var processTaste = (taste1, taste2) => taste2.select = taste1.select
var processAttr = subProcess(
    fixSelector([item => item.options.filter(taste => !!taste.select), item => item.options]), 
    ID,
    processTaste
)
var processGoods = subProcess(fixSelector(item => item.attr), ID, processAttr)
var processTag = subProcess(fixSelector(item => item.goods), ID, processGoods)
var processPackage = subProcess(fixSelector(item => item.tag), ID, processTag)


var ID = item => item.id
match(
    packageInfoList,
    configPackageList,
    ID,
    processPackage
);

最后一步調(diào)用其實等價于：

subProcess(fixSelector([() => packageInfoList, () => configPackageList], ID, 
    subProcess( fixSelector(package => package.tag), ID
        subProcess( fixSelector(tag => tag.goods), ID,
            subProcess( fixSelector(goods => goods.attr), ID
                subProcess( fixSelector([attr => attr.options.filter(taste => !!taste.select), attr => attr.options]), ID
                    processTaste
                )
            )   
        )          
    )
)()

把掉套函數(shù)調(diào)用拉平試試？試想如下代碼：

f(a, f(b, f(c, f(d, e)))))

// 等價于

[a,b,c,d,e].reduceRight((prev, item) => f(item, prev))

于是有：

var match = (arr1, arr2, identifier, process) => arr1.forEach(item1 => 
    arr2.forEach(item2 => identifier(item1) === identifier(item2) && process(item1, item2))
)
var subProcess = ([s1, s2], id, process) => (i1, i2) => match(s1(i1), s2(i2), id, process)
// 為了傳遞 selector 的時候可以單獨給一個函數(shù)
var fixSelector = f => Array.isArray(f) ? f : [f, f]
var reducer = (prev, [selector, identifier]) => subProcess(fixSelector(selector), identifier, prev)
var process = (...items) => items.reduceRight(reducer)()


// 調(diào)用
process(
    [ [() => packageInfoList, () => configPackageList], ID], // 初始數(shù)據(jù)
    [ package => package.tag, ID], // 根據(jù)上面一項的元素，返回需要繼續(xù)比對的下一層數(shù)據(jù)
    [ tag => tag.goods, ID], // 把ID當參數(shù)在每一層傳進來是為了支持不同層取 ID 的方式不同
    [ goods => goods.attr, ID], // 再深也不怕，無非多一個參數(shù)
    // 支持兩邊不同的取值方法
    [ [attr => attr.options.filter(taste => !!taste.select), attr => attr.options], ID], 
    // 最后一個函數(shù)就是你處理深處數(shù)據(jù)的地方啦
    (taste1, taste2) => taste2.select = taste1.select 
)

雖然調(diào)用的時候挺漂亮的，但是有點繞。。。

比這個循環(huán)長的我見過，寫的那個人就是以前組長,他估計到現(xiàn)在也沒有優(yōu)化，，，，

把對比方法封裝到對象里。

比如:

套餐.compare(另一個套餐)
  tag.compare(another tag)
    good.compare(another good)
      attr.compare(another attr)
        option.compare(another option)
          taste.compare(another taste)

組長沒砍死你的話,讓他寫.沒法優(yōu)化就這樣吧.

能力不夠,等待大神來優(yōu)化!

不過可以先優(yōu)化細節(jié),比如保存 arr[i],緩存 length等