Javascript 基于另一个数组对对象数组进行排序

Question

I have an array of objects I need to sort based on another array objects. This is the given array that needs to be sorted:

const arr1 = [
    {
      id: 21,
      name: 'Joey',
      vehicle: 'car'
    },
    {
      id: 6,
      name: 'Kevin'
      vehicle: 'car'
    },
    {
      id: 10,
      name: 'Luis'
      vehicle: 'van'
    }
  ]

And this is the array that is in the proper order:

 const arr2 = [
    {
      id: 6,
      name: 'Kevin'
    },
    {
      id: 21,
      name: 'Joey'
    },
    {
      id: 10,
      name: 'Luis'
    }
  ]

There is no specific order to arr2 its just the data that comes back from my db. I basically just need to put the ids in arr1 in the same order as thet are in arr2. Ive tried using findIndex and sort but I am very confused

Answer 1

that?

 const arr1 = [ { id: 21, name: 'Joey', vehicle: 'car' }, { id: 6, name: 'Kevin', vehicle: 'car' }, { id: 10, name: 'Luis', vehicle: 'van' } ] const arr2 = [ { id: 6, name: 'Kevin' }, { id: 21, name: 'Joey' }, { id: 10, name: 'Luis' } ] // Arr1 ordered.. const arr1_ord = arr2.map(a2=> arr1.find(x=>x.id===a2.id)) console.log( arr1_ord )

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

Also, if there are only 2 items in arr2 I still want those elements that are missing to be at the end of the sorted arr1. Would this solve that?

I add add another case: arr2 element doesn't have a arr1 same id

 const arr1 = [ { id: 21, name: 'Joey', vehicle: 'car' }, { id: 6, name: 'Kevin', vehicle: 'car' }, { id: 12, name: 'George', vehicle: 'carriage' } // not in arr2, { id: 10, name: 'Luis', vehicle: 'van' } ] const arr2 = [ { id: 6, name: 'Kevin' }, { id: 21, name: 'Joey' }, { id: 88, name: 'none' } // not in arr1, { id: 10, name: 'Luis' } ] // Arr1 ordered.. const arr1_ord = arr2.reduce((res, {id},i,{[i+1]:next})=> { let a1 = arr1.find(x=>x.id===id) if (a1) res.push(a1) // if exist in arr1 if (next) return res else return [...res, arr1.filter(r=>.res.some(z=>z.id===r,id))] // add the missing elements }.[]) console.log( arr1_ord )

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

Answer 2

Array.prototype.sort can take in a custom comparison function to sort however you'd like it to. The function takes in two arguments (firstValue, secondValue) If that function returns a positive value, then secondValue goes before the firstValue , if it's 0 or negative, then firstValue is sorted before secondValue . First/second value are from the array you are sorting. In your case, you are sorting based on a different array, but that is fine since you can do that in your function.

You can do:

arr1.sort((firstValue, secondValue) => {
   return findIdInArr2(firstValue.id) - findIdInArr2(secondValue.id);
});

Where you would have to define findIdInArr2 to find the index in arr2, and you can use Array.prototype.findIndex to solve that problem. Where findIndex similarly takes in a function to find the index of something in an array.

function findIdInArr2(id) {

    const foundIndex = arr2.findIndex(function(obj) {
        return obj.id === id;
    });
    // If not found, this will be -1.  But that would sort all
    // unfound objects at the beginning of the array.
    // To place these objects at the end of the array, it needs to
    // return a number higher than the rest.  So return infinity.

    return (foundIndex === -1) ? Infinity : foundIndex;

}

note: findIndex is not available in IE, so you'd need to add a polyfill if you are planning on supporting IE.