【问题标题】:Convert "$.each(data, function (index)" to coffeescript?将“$.each(data, function (index)”转换为coffeescript?
【发布时间】:2014-06-19 21:40:38
【问题描述】:

我在将其从 Jquery/Javascript 转换为 coffeescript 时遇到了麻烦,仅仅是因为我是初学者,而且我发现它很难掌握。有人可以帮帮我吗?

    $.each(data, function (index) {
        arrayOfThings.push(data[index].thing);
    });

这是在一个接受 AJAX 'GET' 数据的函数中。

【问题讨论】:

    标签: javascript jquery arrays coffeescript


    【解决方案1】:

    使用$.each 可以更简洁地执行该循环。 $.each 将回调函数传递给索引元素,所以你可以说:

    $.each data, (index, e) ->
        arrayOfThings.push(e.thing)
    

    $.each 还将 this(在 CoffeeScript 中也称为 @)设置为当前元素,因此您也可以说:

    $.each data, -> arrayOfThings.push(@thing)
    

    并完全忽略回调参数。

    由于您的$.each 有效地解开数组,您可以使用$.map 而不是$.each 来简化回调:

    arrayOfThings = $.map data, (e) -> e.thing
    

    CoffeeScript 函数具有隐式返回,因此 -> x-> return x 相同,这对于像这样的小型映射函数很方便。

    如果你可以假设一个合理合理的 JavaScript 环境,那么你可以使用原生的Array.prototype.map 而不是 jQuery 的版本:

    arrayOfThings = data.map (e) -> e.thing
    

    CoffeeScript 中的循环是产生数组的表达式(有关详细信息,请参阅文档中的 Loops and Comprehensions)。这意味着您可以完全跳过$.each 并使用for ... in 循环:

    a = (e.thing for e in data)
    

    假设data 是一个数组。如果data 是具有对象值的对象,那么您可以使用for ... of 循环:

    a = (v.thing for k, v of data)
    

    如果你已经有一个数组并且想要添加新的东西,你可以使用concat:

    a = a.concat(e.thing for e in data)
    

    或使用pushCoffeeScript splat

    a.push((e.thing for e in data)...)
    

    您也可以将最后两个(即concat 和splat/push)与$.mapArray.prototype.map 版本结合起来。

    演示:http://jsfiddle.net/ambiguous/Jq6Mh/2/

    【讨论】:

    • 这个我已经投了赞成票,但是如果你添加一个地图示例,它会更完整。
    • @JoeHildebrand:很公平,没必要停下来。我也加入了$.mapArray::map 版本。
    • 不错。任何值得做的事情都值得过度。
    【解决方案2】:

    这就是我要做的(尽管您可以做出一些选择,例如括号等。

    $.each data, (index) ->
        arrayOfThings.push(data[index].thing)
    

    最大的不同是缺少javascript的function(){}语法,而是使用coffeescript的() ->语法。还可以删除一些括号(可选),当然还有分号。

    【讨论】:

    • 谢谢!我不太明白 function(){} 是如何直接翻译成 ()-> 的。
    • 既然结果被推送到一个数组中,不如使用$.map
    猜你喜欢
    • 2013-10-30
    • 2016-05-21
    • 2012-04-28
    • 1970-01-01
    • 2012-06-25
    • 1970-01-01
    • 2016-11-26
    • 2014-12-13
    • 1970-01-01
    相关资源
    最近更新 更多