JavaScript/TypeScript 中有没有办法在一个对象中添加两个数组并对它们进行排序？答案

【问题标题】：is there a way in JavaScript/TypeScript of adding two arrays in an object and sort them?JavaScript/TypeScript 中有没有办法在一个对象中添加两个数组并对它们进行排序？
【发布时间】：2020-04-14 18:04:01
【问题描述】：

我要数组：

countries = ["USA", "Spain", "Italy", "France", "Germany", "UK", "Iran", "Turkey", "Belgium", "Netherlands", "Canada", "Switzerland", "Brazil", "Russia", "Portugal", "Austria", "Israel", "Ireland", "Sweden", "India", "S. Korea", "Peru", "Chile", "Japan", "Ecuador", "Poland", "Romania", "Norway", "Denmark", "Australia", "Czechia", "Pakistan", "Saudi Arabia", "Philippines", "Mexico", "Malaysia", "Indonesia", "UAE", "Serbia", "Panama", "Qatar", "Ukraine"]

mortalityRates = ["4.17", "10.46", "12.97", "10.98", "2.49", "12.90", "6.25", "2.15", "13.36", "10.74", "3.34", "4.53", "5.70", "0.81", "3.25", "2.70", "0.99", "3.54", "9.03", "3.36", "2.10", "2.21", "1.16", "1.87", "4.67", "3.65", "5.10", "2.10", "4.59", "0.95", "2.63", "1.64", "1.36", "6.41", "6.62", "1.64", "9.49", "0.55", "2.11", "2.71", "0.20", "2.91"]

我的目的是在charts.js 上使用这些数据。所以，我想合并数据并以某种方式按死亡率（从大到小）对它们进行排序。

【问题讨论】：

你的预期输出是什么？
这在概念上是一个“zip”，后跟一个“sort”。两者都有很多 SO 答案。
VLAZ，预期的结果是有，不知何故，[["Italy", "12.97"]["Spain", "10.46"]] 等等......

标签： javascript arrays angular sorting chart.js

【解决方案1】：

为合并的对象创建一个数组，然后按死亡率对对象数组进行排序：

const countries = ["USA", "Spain", "Italy", "France", "Germany", "UK", "Iran", "Turkey", "Belgium", "Netherlands", "Canada", "Switzerland", "Brazil", "Russia", "Portugal", "Austria", "Israel", "Ireland", "Sweden", "India", "S. Korea", "Peru", "Chile", "Japan", "Ecuador", "Poland", "Romania", "Norway", "Denmark", "Australia", "Czechia", "Pakistan", "Saudi Arabia", "Philippines", "Mexico", "Malaysia", "Indonesia", "UAE", "Serbia", "Panama", "Qatar", "Ukraine"]
const mortalityRates = ["4.17", "10.46", "12.97", "10.98", "2.49", "12.90", "6.25", "2.15", "13.36", "10.74", "3.34", "4.53", "5.70", "0.81", "3.25", "2.70", "0.99", "3.54", "9.03", "3.36", "2.10", "2.21", "1.16", "1.87", "4.67", "3.65", "5.10", "2.10", "4.59", "0.95", "2.63", "1.64", "1.36", "6.41", "6.62", "1.64", "9.49", "0.55", "2.11", "2.71", "0.20", "2.91"]
    
const merged = []
for (let i = 0; i < countries.length; i++) {
  merged.push({
    country: countries[i],
    rate: mortalityRates[i],
  })
}
merged.sort((a, b) => b.rate - a.rate)

console.log(merged)

还有一个单行：

const merged = countries
  .map((country, i) => ({ country, rate: mortalityRates[i]}))
  .sort((a, b) => b.rate - a.rate)

【讨论】：

【解决方案2】：

您可以将map这两个数组的值放入一个对象数组中，sort它们如下：

const sortedData = mortalityRates.map((v, i) => ({ rate: v, country: countries[i] })).sort((o1, o2) => o1.rate - o2.rate);

例如，从那里创建条形图将很容易。

const countries = ["USA", "Spain", "Italy", "France", "Germany", "UK", "Iran", "Turkey", "Belgium", "Netherlands", "Canada", "Switzerland", "Brazil", "Russia", "Portugal", "Austria", "Israel", "Ireland", "Sweden", "India", "S. Korea", "Peru", "Chile", "Japan", "Ecuador", "Poland", "Romania", "Norway", "Denmark", "Australia", "Czechia", "Pakistan", "Saudi Arabia", "Philippines", "Mexico", "Malaysia", "Indonesia", "UAE", "Serbia", "Panama", "Qatar", "Ukraine"];
const mortalityRates = ["4.17", "10.46", "12.97", "10.98", "2.49", "12.90", "6.25", "2.15", "13.36", "10.74", "3.34", "4.53", "5.70", "0.81", "3.25", "2.70", "0.99", "3.54", "9.03", "3.36", "2.10", "2.21", "1.16", "1.87", "4.67", "3.65", "5.10", "2.10", "4.59", "0.95", "2.63", "1.64", "1.36", "6.41", "6.62", "1.64", "9.49", "0.55", "2.11", "2.71", "0.20", "2.91"];

const sortedData = mortalityRates.map((v, i) => ({
  rate: v,
  country: countries[i]
})).sort((o1, o2) => o1.rate - o2.rate);

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: sortedData.map(o => o.country),
    datasets: [{
      data: sortedData.map(o => o.rate),
      backgroundColor: 'red'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Mortality Rates'
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: false
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

【讨论】：