Question

我有两个数组，我正在尝试创建一个像这样的列表，

约翰，盖比得到了什么水果？清单。 xD

John和Gaby各自拥有自己的ID，并将这两个ID与数组Fruits进行比较。当fruitId与John或Gaby的juiceId，其John或Gaby的水果匹配时。

John：苹果，orrange

Gaby：芒果

Fruits = [
  {fruitId: 'abc', name: 'apple'},
  {fruitId: 'abc', name: 'orange'},
  {fruitId: 'def', name: 'mango'},
  {fruitId: 'egt', name: 'pineapple'}
]

Juices = [
  {juiceId: 'abc', customer: 'John'},
  {juiceId: 'def', customer: 'Gaby'}
]

我认为应该是这样的？

array.map((list) => {
   <div>// customer's name {list.customer}</div>
   <div>// fruit's name {list.name}</div>
})

Answer 1

在这种情况下，这是一种非常简单易懂的方法。可能有一些简单的方法可以实现此目标，但这即使不需要高级javascript方法也很容易理解。

  const Fruits = [
    {fruitId: 'abc', name: 'apple'},
    {fruitId: 'abc', name: 'orange'},
    {fruitId: 'def', name: 'mango'},
    {fruitId: 'egt', name: 'pineapple'}
  ]

  const Juices = [
    {juiceId: 'abc', customer: 'John'},
    {juiceId: 'def', customer: 'Gaby'}
  ]

  let finalArray = []
  Juices.map((juice) => {
    Fruits.map((fruit) => {
      if(juice.juiceId === fruit.fruitId){
        finalArray.push({customer: juice.customer, fruit: fruit.name}) 
      }
    });
  });

  console.log(finalArray)

Answer 2

您的问题尚不清楚，但这是您想问的最好的问题。

function findFruits() {
  var fruits = [
    {fruitId: 'abc', name: 'apple'},
    {fruitId: 'abc', name: 'orange'},
    {fruitId: 'def', name: 'mango'},
    {fruitId: 'egt', name: 'pineapple'}
  ];

  var juices = [
    {juiceId: 'abc', customer: 'John'},
    {juiceId: 'def', customer: 'Gaby'}
  ];
  var target = document.getElementById('target');
  var div = document.createElement('div');

  juices.forEach(juice => {
    var p = document.createElement('p');
    var string = `${juice.customer} likes`;
    var matches = fruits.filter(fruit => fruit.fruitId === juice.juiceId);

    matches.forEach(match => string += ` ${match.name}`);
    p.innerHTML = string;
    div.appendChild(p);
  });
  
  target.appendChild(div);
}

findFruits();

<section id="target"></section>

Answer 3

如果我了解您的问题，您可以reduce果汁和filter Fruits：

const Fruits = [ {fruitId: 'abc', name: 'apple'}, {fruitId: 'abc', name: 'orange'}, {fruitId: 'def', name: 'mango'}, {fruitId: 'egt', name: 'pineapple'} ]
const Juices = [ {juiceId: 'abc', customer: 'John'}, {juiceId: 'def', customer: 'Gaby'} ]

const r = Juices.reduce((r, {customer, juiceId}) => {
 r[customer] = Fruits.filter(y => y.fruitId == juiceId).map(x => x.name).join(',')
 return r
}, {})

console.log(r)
console.log('John:', r.John)
console.log('Gaby:', r.Gaby)

Answer 4

您要首先想到的是通过fruitId引用水果的快速方法。为此，将Map的ID加上水果名称的集合将是完美的选择。

要创建此文件，请使用Array.prototype.reduce()。

const fruitMap = Fruits.reduce((map, { fruitId, name }) => {
  let fruit = map.get(fruitId) || []
  fruit.push(name)
  return map.set(fruitId, fruit)
}, new Map())

然后您可以map将您的 Juices 数组添加到更类似于您期望的输出的

const array = Juices.map(({ juiceId, customer }) => ({
  customer,
  name: (fruitMap.get(juiceId) || []).join(', ')
}))

const Fruits =[{"fruitId":"abc","name":"apple"},{"fruitId":"abc","name":"orange"},{"fruitId":"def","name":"mango"},{"fruitId":"egt","name":"pineapple"}]

const Juices = [{"juiceId":"abc","customer":"John"},{"juiceId":"def","customer":"Gaby"}]

const fruitMap = Fruits.reduce((map, { fruitId, name }) => {
  let fruit = map.get(fruitId) || []
  fruit.push(name)
  return map.set(fruitId, fruit)
}, new Map())

const array = Juices.map(({ juiceId, customer }) => ({
  customer,
  name: (fruitMap.get(juiceId) || []).join(', ')
}))

console.info(array)

Javascript比较Map函数中的两个数组

4 个答案: