相当于 C# LINQ Select 的 Javascript

Question

在这里关注这个问题:

Using the checked binding in knockout with a list of checkboxes checks all the checkboxes

我已经使用允许从数组中进行选择的挖空创建了一些复选框。从上面的帖子中获取的工作 fiddle :

http://jsfiddle.net/NsCXJ/

是否有一种简单的方法来创建仅包含水果 ID 的数组？

我更熟悉 C#，我会按照 selectedFruits.select(fruit=>fruit.id);

是否有一些方法/现成的函数可以用 javascript/jquery 做类似的事情？或者最简单的选择是遍历列表并创建第二个数组？我打算以 JSON 格式将数组发回服务器，因此我试图尽量减少发送的数据。

Answer 1

是的，Array.map()或 $.map()做同样的事情。

//array.map:
var ids = this.fruits.map(function(v){
    return v.Id;
});

//jQuery.map:
var ids2 = $.map(this.fruits, function (v){
    return v.Id;
});

console.log(ids, ids2);

http://jsfiddle.net/NsCXJ/1/

由于旧版浏览器不支持 array.map，我建议您坚持使用 jQuery 方法。

如果出于某种原因您更喜欢另一个，您可以随时添加一个 polyfill 以支持旧浏览器。

您也可以随时向数组原型(prototype)添加自定义方法:

Array.prototype.select = function(expr){
    var arr = this;
    //do custom stuff
    return arr.map(expr); //or $.map(expr);
};

var ids = this.fruits.select(function(v){
    return v.Id;
});

---

如果您传递字符串，则使用函数构造函数的扩展版本。也许可以玩的东西:

Array.prototype.select = function(expr){
    var arr = this;

    switch(typeof expr){

        case 'function':
            return $.map(arr, expr);
            break;

        case 'string':

            try{

                var func = new Function(expr.split('.')[0], 
                                       'return ' + expr + ';');
                return $.map(arr, func);

            }catch(e){

                return null;
            }

            break;

        default:
            throw new ReferenceError('expr not defined or not supported');
            break;
    }

};

console.log(fruits.select('x.Id'));

http://jsfiddle.net/aL85j/

更新:

由于这已成为如此受欢迎的答案，我添加了类似的 where() + firstOrDefault()。这些也可以与基于字符串的函数构造函数方法(这是最快的)一起使用，但这里是另一种使用对象文字作为过滤器的方法:

Array.prototype.where = function (filter) {

    var collection = this;

    switch(typeof filter) { 

        case 'function': 
            return $.grep(collection, filter); 

        case 'object':
            for(var property in filter) {
              if(!filter.hasOwnProperty(property)) 
                  continue; // ignore inherited properties

              collection = $.grep(collection, function (item) {
                  return item[property] === filter[property];
              });
            }
            return collection.slice(0); // copy the array 
                                      // (in case of empty object filter)

        default: 
            throw new TypeError('func must be either a' +
                'function or an object of properties and values to filter by'); 
    }
};


Array.prototype.firstOrDefault = function(func){
    return this.where(func)[0] || null;
};

用法:

var persons = [{ name: 'foo', age: 1 }, { name: 'bar', age: 2 }];

// returns an array with one element:
var result1 = persons.where({ age: 1, name: 'foo' });

// returns the first matching item in the array, or null if no match
var result2 = persons.firstOrDefault({ age: 1, name: 'foo' }); 

这是一个jsperf test比较函数构造函数与对象文字速度。如果您决定使用前者，请记住正确引用字符串。

我个人的偏好是在过滤 1-2 个属性时使用基于对象字面量的解决方案，并通过回调函数进行更复杂的过滤。

在向 native 对象原型(prototype)添加方法时，我将以 2 个一般提示结束本文:

1. 在覆盖之前检查现有方法的出现，例如:

   if(!Array.prototype.where) {
Array.prototype.where = ...

2. 如果您不需要支持 IE8 及以下版本，请使用 Object.defineProperty 定义方法使它们不可枚举。如果有人在数组上使用 for..in(这首先是错误的)他们也会迭代可枚举的属性。提醒一下。