Javascript使用下划线基于另一个数组顺序对数组顺序进行排序

Question

基本上我的标题问题。我有两个对象数组。

数组1：

var firstArray = [
{id: "1", value: 1},
{id: "5", value: 0.5},
{id: "3", value: 0.25},
{id: "4", value: 0.125},
{id: "2", value: 0.0625}
];

数组2：

var secondArray = [
{id: 1, name: "a"},
{id: 2, name: "b"},
{id: 3, name: "c"},
{id: 4, name: "d"},
{id: 5, name: "e"}
];

如何排序我的第二个数组，以便顺序匹配第一个数组顺序，如下所示：

结果：

var secondArray = [
{id: 1, name: "a"},
{id: 5, name: "e"},
{id: 3, name: "c"},
{id: 4, name: "d"},
{id: 2, name: "b"}
];

Answer 1

给出一个Underscore / Lodash答案，因为这是问题标题表明OP所追求的。此代码通过第一个数组中相应id的索引对第二个数组进行排序。

$(function() {
    var firstArray = [
	{id: "1", value: 1},
	{id: "5", value: 0.5},
	{id: "3", value: 0.25},
	{id: "4", value: 0.125},
	{id: "2", value: 0.0625}
    ];
    var secondArray = [
	{id: 1, name: "a"},
	{id: 2, name: "b"},
	{id: 3, name: "c"},
	{id: 4, name: "d"},
	{id: 5, name: "e"}
    ];

    var sorted = _.sortBy(secondArray, function(obj) {
	return _.findIndex(firstArray, {id: obj.id.toString()});
    });

    console.log(sorted);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 2

使用简单的ES6，您可以将Map作为给定id的索引，并使用firstArray的索引对其进行排序。

问题是给定数组中不同类型的id。

var firstArray = [{ id: "1", value: 1 }, { id: "5", value: 0.5 }, { id: "3", value: 0.25 }, { id: "4", value: 0.125 }, { id: "2", value: 0.0625 }],
    secondArray = [{ id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }, { id: 4, name: "d" }, { id: 5, name: "e" }],
    map = new Map(firstArray.map(({ id }, i) => [+id, i]));

secondArray.sort((a, b) => map.get(a.id) - map.get(b.id));

console.log(secondArray);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

XY problem?

我觉得你有计划在第二个数组排序后通过索引关联两个数组。我建议另一种关系方式

const firstArray =
  [ {id: "1", value: 1}
  , {id: "5", value: 0.5}
  , {id: "3", value: 0.25}
  , {id: "4", value: 0.125}
  , {id: "2", value: 0.0625}
  ]

const secondArray =
  [ {id: 1, name: "a"}
  , {id: 2, name: "b"}
  , {id: 3, name: "c"}
  , {id: 4, name: "d"}
  , {id: 5, name: "e"}
  ]

const thirdArray =
  firstArray.map (x =>
    Object.assign (x, secondArray.find (y => y.id == x.id)))
    
console.log (thirdArray)
// [ { id: 1, value: 1, name: 'a' }
// , { id: 5, value: 0.5, name: 'e' }
// , { id: 3, value: 0.25, name: 'c' }
// , { id: 4, value: 0.125, name: 'd' }
// , { id: 2, value: 0.0625, name: 'b' } 
// ]

Answer 4

注意到一些演员（一个数组的id是一个字符串，一个是数字），你可以用ES6 .map()（不同于Nina的Map）和.find()来做到这一点：

var firstArray = [
  {id: "1", value: 1},
  {id: "5", value: 0.5},
  {id: "3", value: 0.25},
  {id: "4", value: 0.125},
  {id: "2", value: 0.0625}
];

var secondArray = [
  {id: 1, name: "a"},
  {id: 2, name: "b"},
  {id: 3, name: "c"},
  {id: 4, name: "d"},
  {id: 5, name: "e"}
];

var result = firstArray.map(item => {
  return {
    id: Number(item.id),
    name: secondArray.find(element => element.id == item.id).name
  }
})

console.log(result)