如何组合两个键名不同但对应值相同的对象数组？

【问题标题】：How to combine two array of objects where key name is different but the corresponding value is same?如何组合两个键名不同但对应值相同的对象数组？
【发布时间】：2020-08-24 08:45:09
【问题描述】： 
const cafes = [
  {
    name: "Bazaar Cafe",
    place_id: "kjk234g4gcvfx8usg1l33pi",
  },
  {
    name: "Ashley's Cafe",
    place_id: "12hydbdf76sljfts87sbfis",
  },
  {
    name: "Avenue Cafe",
    place_id: "skjd86svvfdrsv55svbvf3f",
  },
  {
    name: "Hi-Lo Cafe",
    place_id: "mjdhgetr4pojfyts22fzfsh",
  },
  {
    name: "California Chicken Cafe",
    place_id: "12hydbdf76sljfts87sbfis",
  },
  {
    name: "Avenue Bakery Cafe",
    place_id: "jahgde7wgdiau8ewsahgosd",
  },
  {
    name: "Philz Coffee",
    place_id: "urhw3837ehalod7w02b7835",
  },
];

const places = [
  {
    id: "jahgde7wgdiau8ewsahgosd",
    street_no: "60H",
    locality: "Solomos Island Road",
    postal_code: "20688",
    lat: "36.7783 N",
    long: "119.4179 W",
  },
  {
    id: "12hydbdf76sljfts87sbfis",
    street_no: "1B",
    locality: "Macarthur Blvd",
    postal_code: "20619",
    lat: "38.1781 N",
    long: "118.4171 W",
  },
  {
    id: "kjk234g4gcvfx8usg1l33pi",
    street_no: "45250",
    locality: "Worth Avenue, Unit A",
    postal_code: "20619",
    lat: "36.1152",
    long: "117.521",
  },
  {
    id: "saswe3s6yydtdr52hsd72yst",
    street_no: "1X",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "36.7783",
    long: "119.4179",
  },
  {
    id: "skjd86svvfdrsv55svbvf3f",
    street_no: "7S",
    locality: "Three Notch Road",
    postal_code: "20619",
    lat: "36.83",
    long: "119.6",
  },
  {
    id: "mjdhgetr4pojfyts22fzfsh",
    street_no: "22803",
    locality: "Gunston Dr Lexington Park",
    postal_code: "20688",
    lat: "35.7788",
    long: "119.979",
  },
  {
    id: "urhw3837ehalod7w02b7835",
    street_no: "225",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "35.77813",
    long: "119.41791",
  },
];

我希望最终的组合数组如下所示 - 

finalArr = [
  {
    id: "kjk234g4gcvfx8usg1l33pi",
    street_no: "45250",
    locality: "Worth Avenue, Unit A",
    postal_code: "20619",
    lat: "36.1152",
    long: "117.521",
    name: "Bazaar Cafe"
  },
  {
    id: "12hydbdf76sljfts87sbfis",
    street_no: "1B",
    locality: "Macarthur Blvd",
    postal_code: "20619",
    lat: "38.1781 N",
    long: "118.4171 W",
    name: "Ashley's Cafe"
  },
  {
    id: "12hydbdf76sljfts87sbfis",
    street_no: "1B",
    locality: "Macarthur Blvd",
    postal_code: "20619",
    lat: "38.1781 N",
    long: "118.4171 W",
    name: "California Chicken Cafe"
  },
  {
    id: "skjd86svvfdrsv55svbvf3f",
    street_no: "7S",
    locality: "Three Notch Road",
    postal_code: "20619",
    lat: "36.83",
    long: "119.6",
    name: "Avenue Cafe"
  },
  {
    id: "mjdhgetr4pojfyts22fzfsh",
    street_no: "22803",
    locality: "Gunston Dr Lexington Park",
    postal_code: "20688",
    lat: "35.7788",
    long: "119.979",
    name: "Hi-Lo Cafe"
  },
  {
    id: "jahgde7wgdiau8ewsahgosd",
    street_no: "60H",
    locality: "Solomos Island Road",
    postal_code: "20688",
    lat: "36.7783 N",
    long: "119.4179 W",
    name: "Avenue Bakery Cafe"
  }, 
  {
    id: "urhw3837ehalod7w02b7835",
    street_no: "225",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "35.77813",
    long: "119.41791",
    name: "Philz Coffee"
  }
];

我试图像这样实现它，但只获取最终数组的最后一个对象 - 

function combineById (cafes, places) {
  const finalArr = [];
  const wholeObj = {};
  const set = new Set();

  for (const cafe of cafes) { 
    let cafeId = cafe.place_id;
    let cafeName = cafe.name;
    for (const place of places) {
      if (cafeId === place.id && !set.has(cafeId)) {
        set.add(cafeId);
        wholeObj.id = place.id;
        wholeObj.streetNo = place.street_no;
        wholeObj.locality = place.locality;
        wholeObj.postalCode = place.postal_code;
        wholeObj.lat = place.lat;
        wholeObj.long = place.long;
        wholeObj.name = cafeName;
      }
    }
    finalArr.push(wholeObj);
  }
  return finalArr;
}

const resultArr = combineById(cafes, places);
console.log(resultArr);

我正在尝试实现一个搜索函数，该函数将接受两个参数，即这个最终数组和一个搜索词。到目前为止，搜索功能在cafes 数组上运行良好，但我很难组合places 和cafes 数组，combineById 函数仅返回最终数组的最后一个组合对象结果。我想要最终数组中的所有对象组合，以便稍后我可以直接调用最终数组进行进一步操作。 请帮我找出解决方案。 谢谢。

【问题讨论】：

  • California Chicken Cafe 和 Ashley's Cafe 具有相同的 place_id :)

标签： javascript jquery ecmascript-6


【解决方案1】：

我可能会首先将这些位置重新映射到一个关联数组中。一种方法是这样的：

const placeMap = {};
for (let i=0;i< places.length; i++) {
  placeMap[places[i].id] = places[i];
}

然后你可以只迭代一次你的咖啡馆列表并用位置信息更新它：

for (let i=0; i< cafes.length; i++) {
  const loc = placeMap[i.place_id];
  loc.name = cafes[i].name;
  loc.place_id = cafes[i].place_id;
  finalArr.push(loc);
}

您也可以使用一些较新的 ES6 函数来完成此操作，这里的优点是您只迭代每个数组 2 次，其中较新的函数可能需要更多的迭代（通常不是什么大问题，但请记住 w / 更大的数据集）。

【讨论】：

  • placeMap[i.id] = placeMap[i]; 看起来不正确。这更有意义：placeMap[places[i].id] = places[i];
【解决方案2】：

为了避免多次（并且可能很慢）发现，我会先创建一个Map 的地点。

function combine(cafes, places) {

  // create Map of places with id as key
  const placesMap = new Map();
  places.forEach(place => {
    placesMap.set(place.id, place);
  });
  
  // combine each cafe with matching place
  const cafesWithPlaces = cafes.map(cafe => {
    let place = placesMap.get(cafe.place_id);
    
    // handle no matching place
    if (place === undefined) { return; }
    
    let combined = Object.assign({}, place);
    combined.name = cafe.name;
    return combined;
  });
  
  return cafesWithPlaces;
}

const cafes = [
  {
    name: "Bazaar Cafe",
    place_id: "kjk234g4gcvfx8usg1l33pi"
  },
  {
    name: "Ashley's Cafe",
    place_id: "12hydbdf76sljfts87sbfis"
  },
  {
    name: "Avenue Cafe",
    place_id: "skjd86svvfdrsv55svbvf3f"
  },
  {
    name: "Hi-Lo Cafe",
    place_id: "mjdhgetr4pojfyts22fzfsh"
  },
  {
    name: "California Chicken Cafe",
    place_id: "12hydbdf76sljfts87sbfis"
  },
  {
    name: "Avenue Bakery Cafe",
    place_id: "jahgde7wgdiau8ewsahgosd"
  },
  {
    name: "Philz Coffee",
    place_id: "urhw3837ehalod7w02b7835"
  }
];

const places = [
  {
    id: "jahgde7wgdiau8ewsahgosd",
    street_no: "60H",
    locality: "Solomos Island Road",
    postal_code: "20688",
    lat: "36.7783 N",
    long: "119.4179 W"
  },
  {
    id: "12hydbdf76sljfts87sbfis",
    street_no: "1B",
    locality: "Macarthur Blvd",
    postal_code: "20619",
    lat: "38.1781 N",
    long: "118.4171 W"
  },
  {
    id: "kjk234g4gcvfx8usg1l33pi",
    street_no: "45250",
    locality: "Worth Avenue, Unit A",
    postal_code: "20619",
    lat: "36.1152",
    long: "117.521"
  },
  {
    id: "saswe3s6yydtdr52hsd72yst",
    street_no: "1X",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "36.7783",
    long: "119.4179"
  },
  {
    id: "skjd86svvfdrsv55svbvf3f",
    street_no: "7S",
    locality: "Three Notch Road",
    postal_code: "20619",
    lat: "36.83",
    long: "119.6"
  },
  {
    id: "mjdhgetr4pojfyts22fzfsh",
    street_no: "22803",
    locality: "Gunston Dr Lexington Park",
    postal_code: "20688",
    lat: "35.7788",
    long: "119.979"
  },
  {
    id: "urhw3837ehalod7w02b7835",
    street_no: "225",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "35.77813",
    long: "119.41791"
  }
];

console.log(combine(cafes, places));

【讨论】：

    【解决方案3】： 
      const cafes = [
  {
    name: "Bazaar Cafe",
    place_id: "kjk234g4gcvfx8usg1l33pi",
  },
  {
    name: "Ashley's Cafe",
    place_id: "12hydbdf76sljfts87sbfis",
  },
  {
    name: "Avenue Cafe",
    place_id: "skjd86svvfdrsv55svbvf3f",
  },
  {
    name: "Hi-Lo Cafe",
    place_id: "mjdhgetr4pojfyts22fzfsh",
  },
  {
    name: "California Chicken Cafe",
    place_id: "12hydbdf76sljfts87sbfis",
  },
  {
    name: "Avenue Bakery Cafe",
    place_id: "jahgde7wgdiau8ewsahgosd",
  },
  {
    name: "Philz Coffee",
    place_id: "urhw3837ehalod7w02b7835",
  },
];
const places = [
  {
    id: "jahgde7wgdiau8ewsahgosd",
    street_no: "60H",
    locality: "Solomos Island Road",
    postal_code: "20688",
    lat: "36.7783 N",
    long: "119.4179 W",
  },
  {
    id: "12hydbdf76sljfts87sbfis",
    street_no: "1B",
    locality: "Macarthur Blvd",
    postal_code: "20619",
    lat: "38.1781 N",
    long: "118.4171 W",
  },
  {
    id: "kjk234g4gcvfx8usg1l33pi",
    street_no: "45250",
    locality: "Worth Avenue, Unit A",
    postal_code: "20619",
    lat: "36.1152",
    long: "117.521",
  },
  {
    id: "saswe3s6yydtdr52hsd72yst",
    street_no: "1X",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "36.7783",
    long: "119.4179",
  },
  {
    id: "skjd86svvfdrsv55svbvf3f",
    street_no: "7S",
    locality: "Three Notch Road",
    postal_code: "20619",
    lat: "36.83",
    long: "119.6",
  },
  {
    id: "mjdhgetr4pojfyts22fzfsh",
    street_no: "22803",
    locality: "Gunston Dr Lexington Park",
    postal_code: "20688",
    lat: "35.7788",
    long: "119.979",
  },
  {
    id: "urhw3837ehalod7w02b7835",
    street_no: "225",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "35.77813",
    long: "119.41791",
  },
];

function combineById (cafes, places) {
  const finalArr = [];
  const set = new Set();

  for (const cafe of cafes) { 
    let cafeName = cafe.name;
    for (const place of places) {
      if (cafe.place_id === place.id ) {
      finalArr.push({...cafe,...place})       
      }
    } 
  }
  return finalArr;
}
const resultArr = combineById(cafes, places);
console.log(resultArr);

    【讨论】：

      【解决方案4】：

      我认为您可以简单地使用map 和findIndex 来解决这个问题。试试这个：

      const result = places.map(item => {
    const index = cafes.findIndex(cafe => cafe.place_id === item.id);

    if (index > -1) {
        item.name = cafes[index].name;
    }
    return item;
});

console.log(result);

      【讨论】：

        【解决方案5】： 

        const cafes = [
  {
    name: "Bazaar Cafe",
    place_id: "kjk234g4gcvfx8usg1l33pi",
  },
  {
    name: "Ashley's Cafe",
    place_id: "12hydbdf76sljfts87sbfis",
  },
  {
    name: "Avenue Cafe",
    place_id: "skjd86svvfdrsv55svbvf3f",
  },
  {
    name: "Hi-Lo Cafe",
    place_id: "mjdhgetr4pojfyts22fzfsh",
  },
  {
    name: "California Chicken Cafe",
    place_id: "12hydbdf76sljfts87sbfis",
  },
  {
    name: "Avenue Bakery Cafe",
    place_id: "jahgde7wgdiau8ewsahgosd",
  },
  {
    name: "Philz Coffee",
    place_id: "urhw3837ehalod7w02b7835",
  },
];

const places = [
  {
    id: "jahgde7wgdiau8ewsahgosd",
    street_no: "60H",
    locality: "Solomos Island Road",
    postal_code: "20688",
    lat: "36.7783 N",
    long: "119.4179 W",
  },
  {
    id: "12hydbdf76sljfts87sbfis",
    street_no: "1B",
    locality: "Macarthur Blvd",
    postal_code: "20619",
    lat: "38.1781 N",
    long: "118.4171 W",
  },
  {
    id: "kjk234g4gcvfx8usg1l33pi",
    street_no: "45250",
    locality: "Worth Avenue, Unit A",
    postal_code: "20619",
    lat: "36.1152",
    long: "117.521",
  },
  {
    id: "saswe3s6yydtdr52hsd72yst",
    street_no: "1X",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "36.7783",
    long: "119.4179",
  },
  {
    id: "skjd86svvfdrsv55svbvf3f",
    street_no: "7S",
    locality: "Three Notch Road",
    postal_code: "20619",
    lat: "36.83",
    long: "119.6",
  },
  {
    id: "mjdhgetr4pojfyts22fzfsh",
    street_no: "22803",
    locality: "Gunston Dr Lexington Park",
    postal_code: "20688",
    lat: "35.7788",
    long: "119.979",
  },
  {
    id: "urhw3837ehalod7w02b7835",
    street_no: "225",
    locality: "Macarthur Blvd",
    postal_code: "20687",
    lat: "35.77813",
    long: "119.41791",
  },
];

let transformed = places.reduce((result,place)=>{
  let cafe = cafes.find(c=>c.place_id===place.id);
  cafe && result.push({...place,name: cafe.name});
  return result;
},[]);

console.log(JSON.stringify(transformed, null,2));

        【讨论】：

          猜你喜欢
          • 2019-03-05
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2020-10-03
          • 2018-01-13
          • 1970-01-01
          • 2018-05-22
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode