从另一个可观察数组中获取唯一值的可观察数组答案

【问题标题】：Get observableArray of unique values from another obseravableArray从另一个可观察数组中获取唯一值的可观察数组
【发布时间】：2015-01-07 15:53:57
【问题描述】：

我有这样的数据：

    { mealName: "sandwich", price: 0 },
    { mealName: "lobster", price: 34.95 },
    { mealName: "whole zebra", price: 290 },
    { mealName: "whole zebra", price: 290 },
    { mealName: "sandwich", price: 290 },
    { mealName: "whole zebra", price: 290 }

我想得到 observableArray 之类的：

{ mealName: "sandwich"},
{ mealName: "whole zebra"},
{ mealName: "lobster"}

我尝试在jsFiddle 中重现它，但有问题

【问题讨论】：

最好试试这个更干净，更容易理解。 jsfiddle.net/supercool/rtr361vf

标签： arrays knockout.js unique ko.observablearray

【解决方案1】：

unique 不必是可观察数组，因为 availableMeals 不是可观察数组，但既然你问我使用了计算数组。

首先，我使用自定义排序函数对数组进行排序。我使用 concat 创建一个副本，因为我不想修改原始数组的顺序。然后我遍历排序的数组并删除所有重复项：

self.unique = ko.computed(function() {
     var sortedItems = self.availableMeals.concat().sort(function(left, right) { return left.mealName == right.mealName ? 0 : (left.mealName < right.mealName ? -1 : 1) });

     var meal;

     for (var i = 0; i < sortedItems.length; i++) {                 
         if (!meal || meal != sortedItems[i].mealName) {
             meal = sortedItems[i].mealName;
         }
         else {
             sortedItems.splice(i, 1);
             i--;
         }
     }

     return sortedItems;
});

jsfiddle

【讨论】：

【解决方案2】：

var uniqueMeals = ko.computed(function () {
    var uniqueMealNames = mealData().reduce(function(uniqueMeals, meal) {
        if(uniqueMeals.indexOf(meal.mealName) === -1) {
            uniqueMeals.push(meal.mealName);
        }
        return uniqueMeals;
    }, []);

    return uniqueMealNames.map(function(mealName) {
        return {mealName: mealName};
    });
});

一些建议：最好将唯一值存储在字符串数组中，而不是对象中，即["sandwich", "whole zebra", "lobster"]。如果是这样，您可以从我上面的代码中删除最后一行。

另外，您可以考虑查看lodash 库。使用 lodash，这将是：

var uniqueMeals = ko.computed(function () {
    return _.unique(_.pluck(mealData, "mealName"));
})

【讨论】：