По какой причине Chrome и Firefox продолжают сбой после запуска этого кода?

#javascript

#javascript

Вопрос:

Я пытаюсь зациклить массив и использовать функцию обратного вызова, чтобы получить ответ, который работает при первом обратном вызове, во-вторых, ошибка и сбой инструментов разработки.

 var years = [1987, 1964, 1937, 200, 1954];
arrTotal = [];

function arrayCalc(arr, fn) {
  for (var i = 0; i < arr.length; i  ) {
    arrTotal.push(fn(arr[i]));
  }
  return arrRes;
}

function calculatAge(el) {
  return 2019 - el;
}

function isFullAge(el) {
  return el >= 18;
}

var ages = arrayCalc(years, calculatAge);

// Bottom callback is the problem but why?

var fullAges = arrayCalc(ages, isFullAge);
console.log(ages);  

Я знаю, что это вторая функция обратного вызова, я просто не знаю, почему я трачу большую часть дня на поиск ответа в Google.

Комментарии:

1. ваш отступ в коде …. отсутствует … что делает ваш код невозможным для чтения

Ответ №1:

Вам нужно объявить и инициализировать arrTotal внутри arrayCalc . Затем верните этот массив.

 function arrayCalc(arr, fn) {
    var arrTotal = [];                     // declare and initialize with an empty array
    for (var i = 0; i < arr.length; i  ) {
        arrTotal.push(fn(arr[i]));
    }
    return arrTotal;                       // return this array
}

function calculatAge(el) {
    return 2019 - el;
}

function isFullAge(el) {
    return el >= 18;
}

var years = [1987, 1964, 1937, 200, 1954],
    ages = arrayCalc(years, calculatAge),
    fullAges = arrayCalc(ages, isFullAge);

console.log(ages);  

Немного короче с Array#map .

 const
    arrayCalc = (array, fn) => array.map(fn),
    calculatAge = el => 2019 - el,
    isFullAge = el => el >= 18;

var years = [1987, 1964, 1937, 2010, 1954],
    ages = arrayCalc(years, calculatAge),
    fullAges = arrayCalc(ages, isFullAge);

console.log(...ages);
console.log(...fullAges);  

Комментарии:

1. Спасибо, теперь я понимаю

Ответ №2:

Проблема связана с reference и push (который изменяет исходный массив)

Давайте разберемся, почему это происходит

  • При первом вызове arrayCalc(years, calculatAge) arrayCalc возвращает ссылку на arrTotal (теперь ages содержит ссылку на arrTotal )
  • Теперь, когда вы вызываете arrayCalc(ages, isFullAge) , вы нажимаете, передавая refrence of arrToatl в функцию (поскольку ages является ссылкой на arrTotal ), и внутри вашей функции вы перебираете переданную ссылку и вводите значение, arrTotal поэтому arr.length оно продолжает увеличиваться, и вы в конечном итоге получаете infinite loop

Таким образом, вы можете либо определить новый массив внутри своей функции, чтобы при каждом вызове функции вы работали с новым экземпляром вместо ссылки

 var years = [1987, 1964, 1937, 200, 1954];


function arrayCalc(arr, fn) {
 let arrTotal = [];
 for (var i = 0; i < arr.length; i  ) {
    arrTotal.push(fn(arr[i]));
  }
  return arrTotal
}

function calculatAge(el) {
  return 2019 - el;
}

function isFullAge(el) {
  return el >= 18;
}

var ages = arrayCalc(years, calculatAge);

// Bottom callback is the problem but why?

var fullAges = arrayCalc(ages, isFullAge);
console.log(ages);  

Комментарии:

1. Спасибо за подробное объяснение.

2. @JESSEJAMES11351 вы можете отметить как правильный ответ, если это помогло 🙂

Ответ №3:

Я не вижу arrRes, поэтому я полагаю, что это не массив, поэтому ages также не будет массивом.