Question

我有以下javaScript对象

var stats = [
    {x: 10,  y: 300, clr:'blue'},
    {x: 16,  y: 600, clr:'blue'},
    {x: 26,  y: 300, clr:'yellow'},
    {x: 36,  y: 200, clr:'yellow'},
    {x: 46,  y: 700, clr:'green'},
    {x: 56,  y: 100, clr:'green'},
];

我怎么能得到以下物品？每个对象基于clr属性分离主要关键点是将前一个对象的最后一个对象分离并附加到新对象的第一个对象。此步骤需要连接它们之间的行。

 var stats1 = [
    {x:10,  y:300, clr:'blue'},
    {x:16,  y:600, clr:'blue'},
 ];

 var stats2 = [
    {x:16,  y:600, clr:'yellow'},
    {x:26,  y:300, clr:'yellow'},
    {x:36,  y:200, clr:'yellow'}
 ];

 var stats3 = [
    {x:36,  y:200, clr:'green'},
    {x:46,  y:700, clr:'green'},
    {x:56,  y:100, clr:'green'}
];

Answer 1

另一种解决方案，因为您希望最后一个对象成为下一个数组对象的第一个：

＆＃13;

var stats = [
{x: 10,  y: 300, clr:'blue'},
{x: 16,  y: 600, clr:'blue'},
{x: 26,  y: 300, clr:'yellow'},
{x: 36,  y: 200, clr:'yellow'},
{x: 46,  y: 700, clr:'green'},
{x: 56,  y: 100, clr:'green'},
];

function groupBy( array ,prop, f )
{
  var groups = {};
  
  ///grouping & sorting
  array.forEach( function( o )
  {
    var group = JSON.stringify( f(o) );
    groups[group] = groups[group] || [];
    groups[group].push( o );  
  });
  
  var last_prop = "" ; 
  var last_elm = {} ; 
 
  for(var key in groups )
  {
    if(last_prop !== "")
    {
      
      last_elm[prop] = groups[key][0][prop] ; 
      groups[key].unshift(last_elm);
    }
    
    last_prop = key;
    last_elm = (JSON.parse(JSON.stringify(groups[key][groups[key].length - 1])));
  }
  
  return Object.keys(groups).map( function( group )
  {
    return groups[group]; 
  });
}

var result = groupBy(stats, "clr", function(item)
{
  return [item.clr];
});

console.log(result);
    document.write(JSON.stringify(result));

＆＃13;

如果不起作用，请尝试jsbin版本http://jsbin.com/tudahibefo/1/

Answer 2

var stats = [
    {x: 10,  y: 300, clr:'blue'},
    {x: 16,  y: 600, clr:'blue'},
    {x: 26,  y: 300, clr:'yellow'},
    {x: 36,  y: 200, clr:'yellow'},
    {x: 46,  y: 700, clr:'green'},
    {x: 56,  y: 100, clr:'green'},
];
var stats1 = []; // blue
var stats2 = []; // yellow
var stats3 = []; // green
var last_item = null;

for (var i = 0; i < stats.length; i++) {
  var cur_item = stats[i];
  switch (cur_item.clr) {
    case "blue":
      target = stats1;
      break;
    case "yellow":
      target = stats2;
      break;
    case "green":
      target = stats3;
      break;
  }
  if (last_item && last_item.clr != cur_item.clr) {
    // Push last item of previous colow onto new color
    target.push({
      x: last_item.x,
      y: last_item.y,
      clr: cur_item.clr
    });
  }
  target.push(cur_item);
  last_item = cur_item;

}
document.getElementById("output").innerHTML = JSON.stringify(stats1) + "<br>" + JSON.stringify(stats2) + "<br>" + JSON.stringify(stats3);

<div id="output"></div>

Answer 3

使用new Wiretap({ add: function() { //fire when an event is bound to element }, before: function() { //fire just before an event executes, arguments are automatic }, after: function() { //fire just after an event executes, arguments are automatic } });获取三个独立的数组：

filter

然后将前一个数组的最后一个元素添加到stats1 = stats.filter(function(x){return x.clr=="blue"}); stats2 = stats.filter(function(x){return x.clr=="yellow"}); stats3 = stats.filter(function(x){return x.clr=="green"});

的下一个元素中

splice

然后更改数组stats2.splice(0,0,stats1[stats1.length-1]); stats3.splice(0,0,stats2[stats2.length-1]);和stats2

的第一个元素的颜色

stats3

Answer 4

更新：我已更新解决方案，以便能够连接最后的元素以形成链接

我提出了一个通用解决方案，允许您分割数组，而不管哪些颜色是stats数组的一部分。

var stats = [
    {x: 10,  y: 300, clr:'blue'},
    {x: 16,  y: 600, clr:'blue'},
    {x: 26,  y: 300, clr:'yellow'},
    {x: 36,  y: 200, clr:'yellow'},
    {x: 46,  y: 700, clr:'green'},
    {x: 56,  y: 100, clr:'green'},
];
    
// the function receives the property with which you want to divide
// in our case, it is the 'clr' property
// the 'connectLast' boolean flag is used to connect the last link
var divideArrayByProperty = function(arr, property, connectLast) {
    
    var dividedArrays = {};
    var key = null;
    var lastElement = null;
    for (var i = 0; i < arr.length; i++) {
        key = arr[i][property];
        if (undefined === dividedArrays[key]) {
            dividedArrays[key] = [];
            if (connectLast === true && i > 0) {
                lastElement = JSON.parse(JSON.stringify(arr[i-1]));
                lastElement.clr = key;
                dividedArrays[key].push(lastElement);
            }
        }
        dividedArrays[key].push(arr[i]);
    }

    return dividedArrays;
};

var result = divideArrayByProperty(stats, 'clr', true);
document.getElementById("output").innerHTML = JSON.stringify(result);

<div id='output'></div>

Answer 5

又一种解决方案。

var stats = [
{x: 10,  y: 300, clr:'blue'},
{x: 16,  y: 600, clr:'blue'},
{x: 26,  y: 300, clr:'yellow'},
{x: 36,  y: 200, clr:'yellow'},
{x: 46,  y: 700, clr:'green'},
{x: 56,  y: 100, clr:'green'},
];

function groupWith(arr, f) {
  var result = [], group = [];
  arr.forEach(function(elem) {
    if(group.length !== 0 && !f(group[group.length - 1], elem)) {
      result.push(group);
      group = [];
    }
    group.push(elem);
  });
  result.push(group);
  return result;
}

function getLast(array) {
  return array[array.length - 1];
}

function copyObject(obj) {
  return JSON.parse(JSON.stringify(obj));
}

var statsGrouped = groupWith(stats, function(a, b) {return a.clr === b.clr});
for(var i = 1; i < statsGrouped.length; i++) {
  statsGrouped[i].unshift(copyObject(getLast(statsGrouped[i-1])));
  statsGrouped[i][0].clr = statsGrouped[i][1].clr;
}

console.log(statsGrouped);

从单个JavaScriptObject到多个JavaScriptObjects

5 个答案: