高效地訪問Array.prorotype.filter單項返回

Question

我經常使用Array.prototype.filter，我只希望有一個單獨的元素是真的。

由於過濾器返回結果的數組，我覺得自己需要經常訪問的元素，所以我做了什麼樣

knownRefundLogics.filter((refundLogic) => this.hasTag(refundLogic.underscoredName))[0] 

假設：

knownRefundLogics = [{ 
    "underscoredName": "express_full_refund", 
    "camelized": "expressFullRefund" 
}, { 
    "underscoredName": "express_partial_refund", 
    "camelized": "expressPartialRefund" 
}, { 
    "underscoredName": "express_no_refund", 
    "camelized": "expressNoRefund" 
}] 

和hasTag()，做的方法在refundLogic元素的陣列上的includes()。

有沒有一個更合適的方法來做到這一點，例如使用傳播運算符？

順便說一句，我知道我可能會分裂我的方法，只有一個true或false值返回的方式，但我發現這是一個過度工程的解決方案。

Answer 1

您可以使用Array#find函數，它返回第一個項目，它傳遞給定的條件。 filter也更快，因爲filter遍歷所有項目，然後你只得到第一個。 find找到第一個匹配的項目並打破循環。

從可以看到的例子，它迭代2次而不是3

const knownRefundLogics = [{ 
 
    "underscoredName": "express_full_refund", 
 
    "camelized": "expressFullRefund" 
 
}, { 
 
    "underscoredName": "express_partial_refund", 
 
    "camelized": "expressPartialRefund" 
 
}, { 
 
    "underscoredName": "express_no_refund", 
 
    "camelized": "expressNoRefund" 
 
}]; 
 

 
const foundItem = knownRefundLogics.find(item => { 
 

 
    console.log('Iteration'); 
 
    
 
    return item.camelized === 'expressPartialRefund'; 
 

 
}); 
 

 
console.log(foundItem);

Answer 2

使用Array#find（）來代替 - 每當斷言返回true時，迭代停止，並且匹配項（不是陣列）立即返回：

const knownRefundLogics = [{"underscoredName":"express_full_refund","camelized":"expressFullRefund"},{"underscoredName":"express_partial_refund","camelized":"expressPartialRefund"},{"underscoredName":"express_no_refund","camelized":"expressNoRefund"}]; 
 

 
const demoHasTag = (t) => t === 'express_partial_refund'; 
 

 
const result = knownRefundLogics.find((refundLogic) => demoHasTag(refundLogic.underscoredName)); 
 

 
console.log(result);

Answer 3

如果你想要一個沒有polyfill的解決方案，好的老循環是你的朋友。

var knownRefundLogics = [{ 
 
    "underscoredName": "express_full_refund", 
 
    "camelized": "expressFullRefund" 
 
}, { 
 
    "underscoredName": "express_partial_refund", 
 
    "camelized": "expressPartialRefund" 
 
}, { 
 
    "underscoredName": "express_no_refund", 
 
    "camelized": "expressNoRefund" 
 
}]; 
 

 
var selected; 
 
for(var i = 0; i < knownRefundLogics.length; i++){ 
 
    let current = knownRefundLogics[i]; 
 
    if(current.underscoredName === 'express_partial_refund'){ 
 
    selected = current; 
 
    break; 
 
    } 
 
} 
 

 
console.log(selected);

這樣，您可以編寫自己的光填充工具。

function findInArray(array, test){ 
 
    for(var i = 0; i < array.length; i++){ 
 
    if(test(array[i], i, array)) return array[i]; 
 
    } 
 
} 
 

 
var knownRefundLogics = [{ 
 
    "underscoredName": "express_full_refund", 
 
    "camelized": "expressFullRefund" 
 
}, { 
 
    "underscoredName": "express_partial_refund", 
 
    "camelized": "expressPartialRefund" 
 
}, { 
 
    "underscoredName": "express_no_refund", 
 
    "camelized": "expressNoRefund" 
 
}]; 
 

 
console.log(findInArray(knownRefundLogics, function(item, index, array){ 
 
    return item.underscoredName === "express_partial_refund"; 
 
}));