ko.utils.arrayMap,但只返回数组的一部分

时间:2014-01-29 10:58:00

标签: javascript knockout.js

我正在使用一些出色的Knockout实用程序函数:http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

我想做一个arrayMap来根据条件选择某些属性,例如

return ko.utils.arrayMap(myObservableArray(), function (item) {
    return item.Label;
});

例如,这会产生以下输出:

[null, "", "SomeLabel", null, "SomeOtherLabel"]

我想根据条件选择属性,所以我尝试:

return ko.utils.arrayMap(myObservableArray(), function (item) {
    if (item.Label && item.Label !== "") {
        return item.Label;
    }
});

然而,你最终会得到一个像:

这样的数组
[undefined, undefined, "SomeLabel", undefined, "SomeOtherLabel"]

我也试过这个:

return ko.utils.arrayMap(myObservableArray(), function (item) {
    return (item.Label && item.Label !== "") ? item.Label : false;
});

但你得到:

[false, false, "SomeLabel", false, "SomeOtherLabel"]

所以我必须这样做:

var itemsWithLabels = ko.utils.arrayFilter(myObservableArray(), function (item) {
    return (item.Label && item.Label !== "");
});
return ko.utils.arrayMap(itemsWithLabels, function (item) {
    return item.Label;
});

哪会给我:

["SomeLabel", "SomeOtherLabel"]

使用ko.utils或类似的方法,是否有更有效的方法来实现这一目标?

2 个答案:

答案 0 :(得分:9)

正如您所注意到的,使用ko.utils.arrayMap时,预计您的回调会返回一些内容。所以这是一个'哑函数',总是将回调的返回值附加到数组。返回undefined,null或false不会忽略结果数组中的值。

arrayFilter不允许修改过滤的项目:原始项目将被推送到结果数组。

简而言之,使用ko.utils.array *函数无法更有效地完成此操作。您可以将它们组合起来,使代码更加冗长,甚至可以将它们放在计算中:

var itemsWithLabels = ko.computed(function () {
    return ko.utils.arrayMap(ko.utils.arrayFilter(myObservableArray(), function (item) {
        return item.Label && item.Label.length;
    }), function (filteredItem) {
        return filteredItem.Label;
    });
});

但这是你能做的最好的事情。我选择先应用过滤器,然后进行映射,因为在我看来映射比过滤更昂贵。但这只是一种预感。

也许像Underscore这样的库提供了直接执行此操作的方法。

自己编写这样的方法也相当容易(如果你愿意,也可以把它放在ko.utils中)

    ko.utils.arrayMapFilter = function (array, mapping) {
        array = array || [];
        var result = [], mapResult;
        for (var i = 0, j = array.length; i < j; i++) {
            mapResult = mapping(array[i]);
            if (mapResult) {
                result.push(mapResult);
            }
        }
        return result;
    },

您的映射回调现在可以返回虚假值,例如0,“”,false,null或undefined,它们不会在数组中结束。

如果您想要允许上述几个值(例如0或“”),那么只需更改一行:

if (mapResult)

更严格的事情,例如:

if (mapResult !== undefined && mapResult !== null)

答案 1 :(得分:1)

汉斯的第二种方法可以缩短一点

ko.utils.arrayMapFilter = function (array, mapping) {
    var result = [], mapResult;
    ko.utils.arrayForEach(ko.unwrap(array || []), function (item) {
        mapResult = mapping(item);
        if (mapResult) {
            result.push(mapResult);
        }
    });
    return result;
};

可以在普通数组或observableArray上工作(在两种情况下都返回一个普通数组)。 值得定时,因为一些JS引擎的foreach的内部实现(ko.utils.arrayForEach使用,如果可用的话)被称为比使用数组上的for循环慢,尽管差异可能很小。