【问题标题】:Use one Associative Array instead of two index arrays in jQuery在 jQuery 中使用一个关联数组而不是两个索引数组
【发布时间】:2015-01-13 17:17:56
【问题描述】:

Fiddle Example

我正在创建一个函数来从一个值返回下一个最接近的数字和相关的颜色,比如如果值是500,该函数将返回600 及其相关的颜色beige。我正在使用两个数组,一个用于数字,另一个用于颜色来完成此操作。我想知道这样做是否是正确的方法。除了两个单独的数组,我可以只使用一个关联数组来获取结果吗?

代替:

var array = [50,100,200,400,600,1000,1500]
var color = {50:"red",100:"yellow",200:"Golden",400:"Black",600:"beige",1000:"pink",1500:"green"};

是否可以使用类似的东西:

var array ={50:"red",100:"yellow",200:"Golden",400:"Black",600:"beige",1000:"pink",1500:"green"};

示例如下:

var array = [50,100,200,400,600,1000,1500]
var color = {50:"red",100:"yellow",200:"Golden",400:"Black",600:"beige",1000:"pink",1500:"green"};

var getClosestValues = function(a, x) {
    var lo, hi;
    for (var i = a.length; i--;) {
        if (a[i] <= x && (lo === undefined || lo < a[i])) lo = a[i];
        if (a[i] >= x && (hi === undefined || hi > a[i])) hi = a[i];
    };
    var text = [];
    var text = [x+'/'+hi,color[hi]];
    return text;
}

var print = getClosestValues(array,1411);
$('.area').html('<div style="background:'+print[1]+'">'+print[0]+'</div>');

【问题讨论】:

  • 使用数字作为关联数组键可能会遇到麻烦,因为它们不是索引。最好使用字符串。

标签: javascript jquery html arrays associative-array


【解决方案1】:

您可以使用Object.keys(color) 获取包含对象中所有键的数组。

【讨论】:

    【解决方案2】:

    当然。这是你的小提琴的一个分支,迭代关联数组键而不使用单独的数组:http://jsfiddle.net/65nb1cmo/1/

    由于您使用的是 jQuery,我们可以使用他们漂亮的 each 迭代器。我们的策略是简单地查看关联数组中的每个键/值对(与以前一样,每次迭代都将键存储在i 中)。我们找到与提供的x最近的i,然后将其返回。

    var color = {50:"red",100:"yellow",200:"Golden",400:"Black",600:"beige",1000:"pink",1500:"green"};
    
    var getClosestValues = function(a, x) {
        var lo, hi;
        $.each(a, function(i, name) {
            if (i <= x && (lo === undefined || lo < i)) lo = i;
            if (i >= x && (hi === undefined || hi > i)) hi = i;
        });
        var text = ''+x+'/'+hi+','+color[hi]+'';
        return text;
    }
    
    var print = getClosestValues(color,1411);
    print = print.split(',');
    $('.area').html('<div style="background:'+print[1]+'">'+print[0]+'</div>');
    

    【讨论】:

      猜你喜欢
      • 2016-10-24
      • 1970-01-01
      • 2018-07-14
      • 2021-04-22
      • 1970-01-01
      • 1970-01-01
      • 2019-05-02
      • 2021-04-20
      • 1970-01-01
      相关资源
      最近更新 更多