Javascript - расчеты в цикле for

Question

Я не совсем уверен, что a для l oop - правильный подход к решению моей проблемы. Я создаю линейный график для отображения% роста между двумя годами в течение 10 лет. Я могу получить данные, отображаемые на графике, как и ожидалось, но я не могу придумать другой способ сделать его более эффективным. Мой текущий код работает, но я хотел бы обрабатывать вычисления для всего массива данных вместе, а не обрабатывать их отдельно.

мои текущие логи c:

const numerator - это индекс года, в котором я хотел бы отобразить процентный рост. Я вычитаю его из const denominator

I Я удаляю запятые в первых двух строках, так как значение - это более высокие числа, такие как 1 323 349

Наконец, третья строка perChange - это расчет фактического процента. Я использую 2 индекса одновременно и использую большее число из двух, например, чтобы вычесть меньшее. индекс 1 - индекс 0; индекс 3 - индекс 2, индекс 5 - индекс 4 et c ...

Это мой текущий код:

const numeratorOne = Number(caArray[1].DataValue.replace(/,/g, ''))
    const denominatorOne = Number(caArray[0].DataValue.replace(/,/g, ''))
    const perChangeOne = 100 * Math.abs((denominatorOne - numeratorOne) / ((denominatorOne + numeratorOne ) /2 ) )

    const numeratorTwo = Number(caArray[3].DataValue.replace(/,/g, ''))
    const denominatorTwo = Number(caArray[2].DataValue.replace(/,/g, ''))
    const perChangeTwo = 100 * Math.abs((denominatorTwo - numeratorTwo) / ((denominatorTwo + numeratorTwo) / 2))

    const numeratorThree = Number(caArray[5].DataValue.replace(/,/g, ''))
    const denominatorThree = Number(caArray[4].DataValue.replace(/,/g, ''))
    const perChangeThree = 100 * Math.abs((denominatorThree - numeratorThree) / ((denominatorThree + numeratorThree) / 2))

    const numeratorFour = Number(caArray[7].DataValue.replace(/,/g, ''))
    const denominatorFour = Number(caArray[8].DataValue.replace(/,/g, ''))
    const perChangeFour = 100 * Math.abs((denominatorFour - numeratorFour) / ((denominatorFour + numeratorFour) / 2))

    const numeratorFive = Number(caArray[9].DataValue.replace(/,/g, ''))
    const denominatorFive = Number(caArray[8].DataValue.replace(/,/g, ''))
    const perChangeFive = 100 * Math.abs((denominatorFive - numeratorFive) / ((denominatorFive + numeratorFive) / 2))

    const numeratorSix = Number(caArray[11].DataValue.replace(/,/g, ''))
    const denominatorSix = Number(caArray[10].DataValue.replace(/,/g, ''))
    const perChangeSix = 100 * Math.abs((denominatorSix - numeratorSix) / ((denominatorSix + numeratorSix) / 2))

    const numeratorSeven = Number(caArray[13].DataValue.replace(/,/g, ''))
    const denominatorSeven = Number(caArray[12].DataValue.replace(/,/g, ''))
    const perChangeSeven = 100 * Math.abs((denominatorSeven - numeratorSeven) / ((denominatorSeven + numeratorSeven) / 2))

    const numeratorEight = Number(caArray[15].DataValue.replace(/,/g, ''))
    const denominatorEight = Number(caArray[16].DataValue.replace(/,/g, ''))
    const perChangeEight = 100 * Math.abs((denominatorEight - numeratorEight) / ((denominatorEight + numeratorEight) / 2))

    const numeratorNine = Number(caArray[17].DataValue.replace(/,/g, ''))
    const denominatorNine = Number(caArray[16].DataValue.replace(/,/g, ''))
    const perChangeNine = 100 * Math.abs((denominatorNine - numeratorNine) / ((denominatorNine + numeratorNine) / 2))


Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Gross State Product in California'
    },
    xAxis: {
        categories: ['1998', '2000', '2002', '2004', '2006', '2008', '2010', '2012', '2014', '2016', '2018'],
        title: {
            text: 'Year'
        },
    },

    yAxis: {
        categories: ['2', '4', '6', '8', '10'],
        title: {
            text: 'Percentage Change (%)'

        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: 'California',
        data: [perChangeOne, perChangeTwo, perChangeThree, perChangeFour, perChangeFive, perChangeSix, perChangeSeven, perChangeEight, perChangeNine, 8.3, 3.9],
        color: '#002F65'

    }, {
        name: 'US',
        color: '#0B7070',
        data: [3.9, 4.2, 5.7, 8.5, 1.9, 5.2, 7.0, 6.6, 4.2, 5.3, 10]
    }]
});
}

Желаемый результат - это способ получить те же результаты без необходимости создавать 10 различных переменных, так как в будущем мне нужно будет продолжать добавлять данные к этому графику.

Я попытался это сделать:

for (let i = 0; i < caArray.length; i++) { 
 let removeComma = Number(caArray.DataValue.replace(/,/g, ''))
}

for (let i = 0; i < removeComma.length; i += 2) { 
// math logic here which I do not know how to work out
}

Answer 1

Сначала выполните итерацию по caArray, нажимая либо на массив numerators, либо denominators, в зависимости от индекса элемента, для которого вы выполняете итерацию. Затем сопоставьте массив numerators, чтобы получить связанный знаменатель, и рассчитайте изменение, и вы получите массив, который вы можете поместить в свойство series.data:

const numerators = [];
const denominators = [];
caArray.forEach(({ DataValue }, i) => {
  const arrToPushTo = i % 2 === 0 ? denominators : numerators;
  arrToPushTo.push(Number(DataValue.replace(/,/g, '')));
});
const changes = numerators.map((numerator, i) => {
  const denominator = denominators[i];
  return 100 * Math.abs((denominator - numerator) / ((denominator + numerator) / 2));
});

series: [{
  name: 'California',
  data: [...changes, 8.3, 3.9],

const caArray = [
  { DataValue: '10' },
  { DataValue: '20' },
  { DataValue: '30' },
  { DataValue: '40' },
];

const numerators = [];
const denominators = [];
caArray.forEach(({ DataValue }, i) => {
  const arrToPushTo = i % 2 === 0 ? denominators : numerators;
  arrToPushTo.push(Number(DataValue.replace(/,/g, '')));
});
const changes = numerators.map((numerator, i) => {
  const denominator = denominators[i];
  return 100 * Math.abs((denominator - numerator) / ((denominator + numerator) / 2));
});

console.log(changes);

Answer 2

Если я правильно понял, вам просто нужен один l oop. Вам нужно выполнить итерацию по два каждый, и тогда у вас есть все данные в текущей итерации. Примерно так.

const changes = []

for(let i = 0; i < caArray.length; i+=2) {
  if (!caArray[i + 1]) {
      break
  }

  const denominator = Number(caArray[i].DataValue.replace(/,/g, ''));
  const numerator = Number(caArray[i + 1].DataValue.replace(/,/g, ''));
  const perChange = 100 * Math.abs((denominator - numerator) / ((denominator + numerator ) /2 ) )
  changes.push(perChange);
}

Это должно сработать.