比较两个对象数组，按array1的顺序保留array2中的项目

Question

我有 2 个对象数组：const headers1 = [    {text: 'ID', value: 'id', active: true},    {text: 'Name', value: 'name', active: true},    {text: 'Age', value: 'age', active: false},    {text: 'Address', value: 'address', active: true},    {text: 'Phone', value: 'phone', active: true}, //should be excluded because are not on headers2]和const headers2 = [    {text: 'Name',value:'name', active: true},    {text: 'Age',value:'age', active: true},     {text: 'Address',value:'address', active: true},    {text: 'ID',value: 'id', active: true},                   {text: 'Config',value: 'config', active: false}, //should be included at the end    {text: 'Options',value: 'options',active: true} //sould be included at the end]所以基本上我需要headers2从headers1. headers2未打开的项目headers1应放在最后。结果应该是这样的：const headers3 = [    {text: 'ID', value: 'id', active: true},    {text: 'Name', value: 'name', active: true},    {text: 'Age', value: 'age', active: false},    {text: 'Address', value: 'address', active: true},    {text: 'Config', value: 'config', active: false},    {text: 'Options', value: 'options', active: true}]

Answer 1

只需按另一项中匹配项的索引进行排序，如果-1将索引设置为Infinity：

const headers1 = [

    {text: 'ID', value: 'id', active: true},

    {text: 'Name', value: 'name', active: true},

    {text: 'Age', value: 'age', active: false},

    {text: 'Address', value: 'address', active: true},

    {text: 'Phone', value: 'phone', active: true} //should be excluded because are not on headers2

]

const headers2 = [

    {text: 'Name', value: 'name', active: true},

    {text: 'Age', value: 'age', active: true}, 

    {text: 'Address', value: 'address', active: true},

    {text: 'ID', value: 'id', active: true},               

    {text: 'Config', value: 'config', active: false}, //should be included at the end

    {text: 'Options', value: 'options', active: true} //sould be included at the end

]

const headers3 = [...headers2].sort((a, b) => {

    const aIndex = headers1.findIndex((i) => i.text === a.text) + 1 || Infinity;

    const bIndex = headers1.findIndex((i) => i.text === b.text) + 1 || Infinity;

    return aIndex - bIndex;

}).map((i) => {

    i.active = (headers1.find((el) => el.text === i.text) || i).active

    return i;

});

console.log(headers3);

Answer 2

您可以使用想要的顺序构建一个对象，并从第二个数组中获取一个副本并对其进行排序。

const headers1 = [{ text: 'ID', value: 'id', active: true }, { text: 'Name', value: 'name', active: true }, { text: 'Age', value: 'age', active: false }, { text: 'Address', value: 'address', active: true }, { text: 'Phone', value: 'phone', active: true }],

    headers2 = [{ text: 'Name', value: 'name', active: true }, { text: 'Age', value: 'age', active: true }, { text: 'Address', value: 'address', active: true }, { text: 'ID', value: 'id', active: true }, { text: 'Config', value: 'config', active: false }, { text: 'Options', value: 'options', active: true }],

    references = headers1.reduce((r, o, i) => (r[o.text] = { o, order: i + 1 }, r), {}),

    result = headers2

        .map(o => references[o.text]?.o || o)

        .sort(({ text: a }, { text: b }) => (references[a]?.order || Number.MAX_VALUE) - (references[b]?.order || Number.MAX_VALUE));

console.log(result);

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

Answer 3

您可以Map在 中的项目上使用 a headers2，由 键入name。然后从该地图中收集项目headers1，最后将地图中不匹配的项目添加到该结果中。您可以使用deletemap 的方法，因为它还返回是否找到键。

就两个数组中的项目数而言，这具有线性时间复杂度。

以下是它的工作原理：

const headers1 = [{text: 'ID', value: 'id', active: true},{text: 'Name', value: 'name', active: true},{text: 'Age', value: 'age', active: false},{text: 'Address', value: 'address', active: true},{text: 'Phone', value: 'phone', active: true}]

const headers2 = [{text: 'Name',value:'name', active: true},{text: 'Age',value:'age', active: true}, {text: 'Address',value:'address', active: true},{text: 'ID',value: 'id', active: true},{text: 'Config',value: 'config', active: false},{text: 'Options',value: 'options',active: true}];

// Collect headers2 items in a map keyed by name

const map = new Map(headers2.map(o => [o.value, o]));

// First get the items from headers1 that are in the map, delete them from that map,

// and then add the remaining map values

let headers3 = [...headers1.filter(o => map.delete(o.value)), ...map.values()];

// output result

headers3.forEach(o => console.log(JSON.stringify(o)));