Javascript 如何连接两个具有相同属性值的数组？

Question

如何连接具有相同属性值的数组？我无法映射它，因为它有不同的索引。

var array1 = [
        {'label':"label1",'position':0},
        {'label':"label3",'position':2},
        {'label':"label2",'position':1},
    ];

var array2 = [
        {'label':"label1",'value':"TEXT"},
        {'label':"label2",'value':"SELECT"}
     ];

预期输出：

var array3 = [
        {'label':"label1",'value':"TEXT",'position':0},
        {'label':"label2",'value':"SELECT", 'position':1}
     ];

这就是我所做的，我做不到，

var arr3 = arr1.map(function(v, i) {
        return {
            "label": v.label,
            "position": v.position,
            "value": arr2[?].value
        }
   });

Answer 1

我想你可以使用 array#reduce 做这样的事情：

var array1 = [
        {'label':"label1",'position':0},
        {'label':"label3",'position':2},
        {'label':"label2",'position':1},
    ];

var array2 = [
        {'label':"label1",'value':"TEXT"},
        {'label':"label2",'value':"SELECT"}
     ];

var array3 = array2.reduce((arr, e) => {
  arr.push(Object.assign({}, e, array1.find(a => a.label == e.label)))
  return arr;
}, [])


console.log(array3);

Answer 2

有关详细信息，请参阅 Array.prototype.map() and Map。

// Input.
const A = [{'label':"label1",'position':0},{'label':"label3",'position':2},{'label':"label2",'position':1}]
const B = [{'label':"label1",'value':"TEXT"},{'label':"label2",'value':"SELECT"}]

// Merge Union.
const mergeUnion = (A, B) => {
  const mapA = new Map(A.map(x => [x.label, x]))
  return B.map(y => ({...mapA.get(y.label), ...y}))
}

// Output + Proof.
const output = mergeUnion(A, B)
console.log(output)

Answer 3

如果您事先不知道哪个数组的标签是另一个数组（如果有的话）的子集，这里有一个方法允许 array1 或 array2 具有另一个数组缺少的 labels。在 array1 上使用 reduce，find 匹配 array2 中的标签（如果存在）：

var array1 = [
  {'label':"label1",'position':0},
  {'label':"label3",'position':2},
  {'label':"label2",'position':1},
];
var array2 = [
  {'label':"label1",'value':"TEXT"},
  {'label':"label2",'value':"SELECT"}
];

const output = array1.reduce((a, { label, position }) => {
  const foundValueObj = array2.find(({ label: findLabel }) => findLabel === label);
  if (!foundValueObj) return a;
  const { value } = foundValueObj;
  a.push({ label, value, position });
  return a;
}, []);
console.log(output);

Answer 4

您可以 Map 并检查是否存在新对象。

var array1 = [{ label: "label1", position: 0 }, { label: "label3", position: 2 }, { label: "label2", position: 1 }],
    array2 = [{ label: "label1", value: "TEXT" }, { label: "label2", value: "SELECT" }],
    map = array1.reduce((m, o) => m.set(o.label, o), new Map),
    array3 = array2.reduce((r, o) => {
        if (map.has(o.label)) {
            r.push(Object.assign({}, o, map.get(o.label)));
        }
        return r;
    }, []);

console.log(array3);

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

Answer 5

根据努力，我们假设 array1 将拥有 array2.

中的所有 labels

在此基础上，为 array2 创建一个映射，键为 labels。 Post 即，过滤掉 array1 个标签存在于地图中的项目，然后最终合并过滤数组的对象及其从 array2.[=20= 中提取的地图中的对应值]

var array1 = [{'label':"label1",'position':0},{'label':"label3",'position':2},{'label':"label2",'position':1}];
var array2 = [{'label':"label1",'value':"TEXT"},{'label':"label2",'value':"SELECT"}];
     
let map = array2.reduce((a,{label, ...rest}) => Object.assign(a,{[label]:rest}),{});
let result = array1.filter(({label}) => map[label]).map(o => ({...o, ...map[o.label]}));
console.log(result);

此外，在上面的代码片段中，您可以通过使用 Array.reduce 过滤和映射函数来检索结果来进一步提高性能。

var array1 = [{'label':"label1",'position':0},{'label':"label3",'position':2},{'label':"label2",'position':1}];
var array2 = [{'label':"label1",'value':"TEXT"},{'label':"label2",'value':"SELECT"}];
     
let map = array2.reduce((a,{label, ...rest}) => Object.assign(a,{[label]:rest}),{});
let result = array1.reduce((a,o) => {
if(map[o.label]) a.push({...o, ...map[o.label]});
return a;
}, []);
console.log(result);

Answer 6

这有效。

方法：使用Object.assign()

连接具有相同label的对象

var array1 = [{'label':"label1",'position':0},{'label':"label3",'position':2},{'label':"label2",'position':1}];
var array2 = [{'label':"label1",'value':"TEXT"},{'label':"label2",'value':"SELECT"}];
var result = [];

array2.forEach(function(value, index){
    result.push(Object.assign({},array1.find(function(v,i){return v.label==value.label}),value));
});

console.log(result)

Answer 7

我不擅长javascript，但你也可以这样做

    var array1 = [
    {'label':"label1",'position':0},
    {'label':"label3",'position':2},
    {'label':"label2",'position':1},
];

    var array2 = [
    {'label':"label1",'value':"TEXT"},
    {'label':"label2",'value':"SELECT"}
 ];
     var array3=[];
 for(var i=0;i<array1.length;i++)
    {
        for(var x=0;x<array2.length;x++)
        {       
                console.log(array1[i]['label'] == array2[x]['label']);
                if(array1[i]['label'] == array2[x]['label']){
                array3.push({label:array1[i]['label'],value:array2[x]['value'],position:array1[i]['position']});

                }
        }        
    }
    console.log(array3);

Javascript 如何连接两个具有相同属性值的数组？

Javascript how to join two arrays having same property value?

javascript

arrays

array-map

Javascript 如何连接两个具有相同 属性 值的数组？

Javascript how to join two arrays having same property value?

javascript

arrays

array-map

Javascript 如何连接两个具有相同属性值的数组？