PROSAGA码农传奇-JS-如何按属性聚合嵌套的JavaScript对象？

0# 昵称不能为空 | 2019-08-31 10-32

1# 昵称为空呵呵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <OL>
    <LI>
      使用建立国家数据的地图
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce" rel="nofollow noreferrer">
         <code>
          reduce
        </code>
      </A>
    </LI>
  </醇>
   <pre class="lang-js prettyprint-override">
    <code>
      {
  US: {
    resource: ['lead'],
    weather: ['cloudy', 'sunny'],
  },
  MX: {
    resource: ['gold', 'copper'],
    weather: ['sunny'],
  },
}

</code>
  </pre>
  <ol start =“2”>
    <LI>
      使用
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries" rel="nofollow noreferrer">
         <code>
          Object.entries
        </code>
      </A>
       从地图中获取一个条目数组
    </LI>
  </醇>
   <pre class="lang-js prettyprint-override">
    <code>
      [
  [ 'US', { resource: ['lead'], weather: ['cloudy', 'sunny'] } ],
  [ 'MX', { resource: ['gold', 'copper'], weather: ['sunny'] } ],
]

</code>
  </pre>
  <ol start =“3”>
    <LI>
      将条目数组映射到具有所需结构的对象数组中
    </LI>
  </醇>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          const buildCountriesMap = data => data.reduce((map, { country, things: { weather, resource } }) => {
  if (!map.hasOwnProperty(country)) {
    map[country] = { resource: [], weather: [] };
  }

const { resource: mapResource, weather: mapWeather } = map[country];

if (resource && !mapResource.includes(resource)) {
    mapResource.push(resource);
  }
  if (weather && !mapWeather.includes(weather)) {
    mapWeather.push(weather);
  }

return map;
}, {});

const merge = data => Object.entries(buildCountriesMap(data))
  .map(([country, things]) => ({ country, things }));

const example = [
  {
    country: 'US',
    things: {
      weather: 'cloudy',
    },
  },
  {
    country: 'US',
    things: {
      resource: 'lead',
      weather: 'sunny',
    },
  },
  {
    country: 'MX',
    things: {
      weather: 'sunny',
    },
  },
  {
    country: 'MX',
    things: {
      resource: 'gold',
      weather: 'sunny',
    },
  },
  {
    country: 'MX',
    things: {
      resource: 'copper',
    },
  },
];

console.log(merge(example));
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

2# VIP | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    您可以使用
     <code>
      reduce
    </code>
     功能和用途
     <code>
      findIndex
    </code>
     检查累加器是否有对象
     <code>
      country_code
    </code>
    。如果它在那里然后更新数组
     <code>
      things
    </code>
     宾语。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          var example = [{
    country: "US",
    things: {
      weather: 'cloudy'
    }
  },
  {
    country: "US",
    things: {
      resource: 'lead',
      weather: 'sunny'
    }
  },
  {
    country: "MX",
    things: {
      weather: 'sunny'
    }
  },
  {
    country: "MX",
    things: {
      resource: 'gold',
      weather: 'sunny'
    }
  },
  {
    country: "MX",
    things: {
      resource: 'copper'
    }
  },
]

function finalOut(arr) {
  return arr.reduce(function(acc, curr) {
    let findIndex = acc.findIndex(function(item) {
      return item.country_code === curr.country;
    });
    if (findIndex === -1) {
      acc.push({
        country_code: curr.country,
        things: {
          resource: curr.things.resource ? [curr.things.resource] : [],
          weather: curr.things.weather ? [curr.things.weather] : []
        }
      })
    } else {

if (curr.things.resource && acc[findIndex].things.resource.indexOf(curr.things.resource) === -1) {
        acc[findIndex].things.resource.push(curr.things.resource);
      }

if (curr.things.weather && acc[findIndex].things.weather.indexOf(curr.things.weather) === -1) {
        acc[findIndex].things.weather.push(curr.things.weather);
      }

}

return acc;
  }, [])
}

console.log(finalOut(example))
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

3# polo | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    这将向您展示如何使用reduce来获取您想要使用reduce的数据
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          const example = [{
    country: "US",
    things: {
      weather: "cloudy"
    }
  },
  {
    country: "US",
    things: {
      resource: "lead",
      weather: "sunny"
    }
  },
  {
    country: "MX",
    things: {
      weather: "sunny"
    }
  },
  {
    country: "MX",
    things: {
      resource: "gold",
      weather: "sunny"
    }
  },
  {
    country: "MX",
    things: {
      resource: "copper"
    }
  }
];

current.things.weather && acc[index].things.weather.findIndex(x => x === current.things.weather) === -1 && acc[index].things.weather.push(current.things.weather)
  }
  return acc;
}, []);

console.log(output);
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

4# Colin | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    使用
     <code>
      reduce
    </code>
     迭代对象以编译新对象，拼凑所需的东西：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          const example = [{
    country: "US",
    things: {
      weather: 'cloudy'
    }
  },
  {
    country: "US",
    things: {
      resource: 'lead',
      weather: 'sunny'
    }
  },
  {
    country: "MX",
    things: {
      weather: 'sunny'
    }
  },
  {
    country: "MX",
    things: {
      resource: 'gold',
      weather: 'sunny'
    }
  },
  {
    country: "MX",
    things: {
      resource: 'copper'
    }
  },
]

const out = Object.values(
  example.reduce((a, v) => {
    if (!a[v.country]) {
      a[v.country] = {
        country_code: v.country,
        things: {}
      }
    }

Object.entries(v.things).forEach(([key, value]) => {
      if (!a[v.country].things[key]) {
        a[v.country].things[key] = []
      }

if (!a[v.country].things[key].includes(value)) {
        a[v.country].things[key].push(value)
      }
    })

return a
  }, {})
)

console.log(out)
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>