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

Question

Basically my question in title. I got two arrays of objects.

Array 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}
];

Array 2:

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

How can I sort my second array so that order will match first array order like this:

Result:

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

Answer 1

With plain ES6, you could take a Map for the index of the given id and sort it with the index of firstArray .

A problem is the different type of id in the given arrays.

 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 2

Giving an Underscore/Lodash answer since that's what the question title indicates the OP is after. This code sorts the second array by the indexes of the corresponding id in the first array.

 $(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 3

XY problem?

I sense you have plans to relate the two arrays by index after the second array is sorted. I suggest an alternative means of relation

 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

Noting some casting (one array's id is a String, one is a Number), you can do this with ES6 .map() (different from Nina's Map ) and .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)