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

您可以拍攝一張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 3

根據所做的努力，我們假設array1將具有array2中的所有labels 。

在此基礎上，為array2創建一個映射，鍵為labels 。 發布后，過濾掉array1中具有標簽的array1項，然后最終合並從array2提取的map中過濾后的數組的對象及其對應的值。

 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 4

有關更多信息，請參見Array.prototype.map()和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 5

如果您不預先知道哪個數組的標簽將是另一個數組的子集（如果有），則可以使用此方法允許array1或array2具有另一個數組缺少的label 。 使用reduce over array1 ，在array2 find匹配的標簽（如果存在）：

 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 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);