Javascript 在模块化方法中对象排序和添加新的属性

Question

我有以下 javascript 个对象

mData=[{A: "148.0", Bit: 27 ,Ic: "0.4",ked: "229.0",Ted: "228.9985"},
{A: "148.0", Bit: 27 ,Ic: "0.4",ked: "229.0",Ted: "2285"},
{A: "148.0", Bit: 17 ,Ic: "0.4",ked: "259.0",Ted: "28"},
{A: "148.0", Bit: 27 ,Ic: "0.4",ked: "279.0",Ted: "28"},             
{A: "148.0", Bit: 27 ,Ic: "0.4",ked: "239.0",Ted: "82"},
{A: "148.0", Bit: 17 ,Ic: "0.4",ked: "219.0",Ted: "22"},
{A: "148.0", Bit: 16 ,Ic: "0.4",ked: "239.0",Ted: "22"},      
{A: "148.0", Bit: 17 ,Ic: "0.4",ked: "259.0",Ted: "22"}];

我试图根据他们的位属性将他们分开。我想出了如下非常简单的算法，但它既不是模块化的也不是通用的。我怎样才能让下面的代码更通用。

color=["red","blue","green"];

data1=[];data2=[];data3=[];

$.each(mData, function (i, wData){
  if(wData.Bit===27)
  {
    wData.color=color[0];
    data1.push(wData);
  }
  else if(wData.Bit===17)
  {
    wData.color=color[1];
    data2.push(wData);
  }
   else
  {
    wData.color=color[2];
    data3.push(wData);
  }
});

除此之外，我想在推送相应数据之前为每个对象添加颜色属性，比方说 if BIT>27 color='red', if BIT<27&BIT>17 color='blue', if BIT<17 color='yellow'.

这里是 fiddle：http://jsfiddle.net/vbLz9zc9/2/

Answer 1

有趣的问题！这实际上是两个问题，所以让我一次回答一个。

如何按特定字段对对象进行分组？

您尝试实现的操作是分组操作。让我们从消除位值的硬编码检查开始。为此，我们首先要将输出更改为单个对象而不是多个数组。然后，这些对象可以将位值作为键，并将包含具有该位值的所有对象的数组作为值。例如：

result = {
    17 : [ /* All objects with Bit=17 */],
    27 :  [ /* All objects with bit 27 */],
    //etc
};

那么让我们试试看：

function orderByBit(data) {
    //let's start with an empty object.
    var result = {};
    //array.forEach is similar to $.each(array), but then built-in all
    //non-ancient browsers (that is, >= IE9)
    data.forEach(function(item) {
        var bit = item.Bit;
        //First we check if we already have a array created for the bit value.
        //if not, then we create one
        if (!result[bit]) {
            result[bit] = [];
        }
        //Now we just have to push the item to the correct array
        result[bit].push(item)
    });
    //Done!
    return result;
}

var orderedData = orderByBit(mData);

但我们可以做得更好。我们现在仍然有硬编码，我们希望按 Bit 的值进行分组，但我们可能也想更改它。为此，我们可以要求将该字段分组为参数。

function orderBy(field, data) {
    //let's start again with an empty object.
    var result = {};
    data.forEach(function(item) {
        //We no longer hardcode the Bit field, instead we use the field
        //passed in as argument
        var fieldValue = item[field];
        //The rest is the same, but now with fieldValue instead of bit
        if (!result[fieldValue]) {
            result[fieldValue] = [];
        }
        result[fieldValue].push(item)
    });
    //Done!
    return result;
}

var orderdData = orderBy("Bit", mData);

现在回答你的第二个问题：

如何给所有对象添加颜色属性

在你的例子中，你想根据范围添加一个值，你可以遍历所有对象并在循环中进行值检查：

mData.forEach(function(item) {
    if (item.Bit < 17) {
        item.color = 'yellow';
    } else if (item.Bit < 27) {
        item.color = 'blue';
    } else {
        item.color = 'red';
    }
});
//and then again ordering
var orderdData = orderBy("Bit", mData);

更新：Full code on jsfiddle

Answer 2

也许像这样使用 reduce

var create_map = function(mData, colors, indexes) {
    return mData.reduce( function(res, curr) {
       var i = indexes[curr.Bit] || 0;
       curr.color = colors[i];
       ( res[i] = res[i] || [] ).push(curr); 
       return res;
    },[]);
}
// define colors and bits which to place into index
var colors = ["red","blue","green"],
    indexes = { 17 : 1, 27 : 2}; // zero default, 17 => index 1
var res = create_map( mData, colors, indexes );  
// res[0] = array of all
// res[1] = array of Bits == 17
// res[2] = array of Bits == 27

演示在这里http://jsfiddle.net/1b51eqoq/

Answer 3

如果您知道要查找的位 #，Array 原型有一个名为 filter 的函数，您可以将其用于此目的。

var twentyseven = mData.filter(function(el, i, arr) {return el.Bit === 27;});

然而，如果你想动态地将它们全部拆分成数组，而不需要事先知道位#s，你可以使用 Array 原型的 forEach 函数：

var bitArrays = {};
mData.forEach(function(el, i, arr){
    if(!bitArrays[el.Bit]){
        bitArrays[el.Bit] = [];
    } 
    bitArrays[el.Bit].push(el);
});

这种方法将为您提供一个包含每个位 # 的数组的对象。例如，您可以通过访问 bitArrays[27]

来访问位为 27 的对象数组

这是一些工作示例代码：

// helper code to log to HTML
var log = (function(output) {
  return function(input) {
    output.insertAdjacentHTML("beforeend", input);
  }
})(document.getElementById("output"));

var bitArrays = {};
var mData=[{A: "148.0", Bit: 27 ,Ic: "0.4",ked: "229.0",Ted: "228.9985"},
{A: "148.0", Bit: 27 ,Ic: "0.4",ked: "229.0",Ted: "2285"},
{A: "148.0", Bit: 17 ,Ic: "0.4",ked: "259.0",Ted: "28"},
{A: "148.0", Bit: 27 ,Ic: "0.4",ked: "279.0",Ted: "28"},             
{A: "148.0", Bit: 27 ,Ic: "0.4",ked: "239.0",Ted: "82"},
{A: "148.0", Bit: 17 ,Ic: "0.4",ked: "219.0",Ted: "22"},
{A: "148.0", Bit: 16 ,Ic: "0.4",ked: "239.0",Ted: "22"},      
{A: "148.0", Bit: 17 ,Ic: "0.4",ked: "259.0",Ted: "22"}];

mData.forEach(function(el, i, arr){
  if(!bitArrays[el.Bit]){
    bitArrays[el.Bit] = [];
  } 
  bitArrays[el.Bit].push(el);
});

log(JSON.stringify(bitArrays));

<div id="output" />

Javascript 在模块化方法中对象排序和添加新的属性

Javascript Object Sorting and Adding new property in Modular Approach

javascript

coding-style

如何按特定字段对对象进行分组？

如何给所有对象添加颜色属性

Javascript 在模块化方法中对象排序和添加新的 属性

Javascript Object Sorting and Adding new property in Modular Approach

javascript

coding-style

如何按特定字段对对象进行分组？

如何给所有对象添加颜色属性

Javascript 在模块化方法中对象排序和添加新的属性