javascript - 按另一个数组的顺序对数组进行排序

Question

我的目标是对这个 div 进行排序

<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed;</div>

按此顺序由另一个 div

<div id="array"> Blue: 1,Red: 2,Orange: 3, </div>

所以我想要的结果是得到这样的结果

2xBlue;1xBlue;1xBlue;2xBlue;3xRed;3xRed;1xRed;1xRed;2xOrange;3xOrange ......

我知道第一个 div 需要使用类似这样的字符串拆分 .split('x')[1];

到目前为止，我有这个代码：

var init_arr;
var scorer;

window.onload=function() {
  scorer=document.getElementById("array").innerHTML;
  init_arr = document.getElementById("myDiv").innerHTML;

var final_arr = init_arr.sort(function(a,b) {
   return scorer[a]-scorer[b];
});
}
alert(final_arr);

但出现错误TypeError: init_arr.sort is not a function 我猜 init_arr 和 scorer 是对象而不是字符串 请帮忙

Answer 1

此答案会删除带有; 或, 的其余字符串，将array 视为JSON 字符串的一部分，并使用x 之后的部分进行排序。

window.onload = function() {
    var init_arr = document.getElementById("myDiv").innerHTML.split(';'),
        scorer = JSON.parse('{' + document.getElementById("array").innerHTML + '}');

    init_arr.sort(function(a, b) {
        var aa = a.split('x')[1],
            bb = b.split('x')[1];
        return scorer[aa] - scorer[bb];
    });
    alert(init_arr);
};

<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed</div>
<div id="array">"Blue": 1,"Red": 2,"Orange": 3</div>

但是我真的建议对数据使用真正的数组，对排序顺序使用对象。而不是 HTML 代码的任何部分。

Answer 2

好吧，在看到第一个答案后，我在玩弄帮助你之后感觉很笨，但是就这样吧。

<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed;</div>

<div id="array"></div>

var init;
var final;
var scorer;

scorer = document.getElementById("array");
init = document.getElementById("myDiv");

init = init.textContent.split(/\;/);
init = init.filter(function(item) {
    return item.length > 0;
})
.map(function(item) {
    item = item.split(/x/);
  var obj = {
    color: item[1],
    amount: parseInt(item[0])
  }
    return obj;
});

final = init.reduce(function(scored, item) {
  if(scored[item.color] === undefined) {
    scored[item.color] = 0;
  }
  scored[item.color] += item.amount;
  return scored;
}, {});

final = Object.keys(final)
    .sort(function(item1, item2) {
        return final[item1].amount - final[item2].amount;
    })
  .map(function(key) {
    return key + ' :' + final[key];
  });
scorer.textContent = final.join(', ');

至少玩 map、filter、reduce 和 sort 很有趣

Answer 3

这是你可以做的事情：

function sort() {
  var scorer;
  var scorerLookup;
  var sortedLookup;

  //First we figure out the sort order
  scorer = document.getElementById("array").innerHTML.split(',');
  scorer.sort(function(a, b) {
    aVal = parseInt(a.split(':')[1].trim());
    bVal = parseInt(b.split(':')[1].trim());

    return aVal - bVal;
  });
  console.log(scorer);

  //Now put the sort order into an object so we can easily lookup values
  scorerLookup = {};
  for (var i = 0; i < scorer.length; i++) {
    var tempVal = scorer[i].split(':');
    scorerLookup[tempVal[0].trim()] = parseInt(tempVal[1].trim());
  }
  console.log(scorerLookup);

  //Now sort the main list
  init_arr = document.getElementById("myDiv").innerHTML.split(';');
  init_arr.sort(function(a, b) {
    aVal = scorerLookup[a.split('x')[1]];
    bVal = scorerLookup[b.split('x')[1]];

    return aVal - bVal;
  });
  console.log(init_arr);
}

window.onload=sort();

它确实需要更多的错误捕获（对于空白值等）——但它应该给你一个大致的想法。