Пожалуйста, помогите мне отладить эту ошибку о for / in в Javascript

#javascript

#javascript

Вопрос:

Я изучаю javascript basic, и у меня проблема с for /in и for/ of .

 var courses = [1, 2, 3, 4];

Array.prototype.reduce2 = function (callback, initialValue) {
    var sum = initialValue;
    for(var value of this) {
        sum = callback(sum, value);
    }
    return sum;
}

function func(total, number) {
    return total   number;
}

var sum = courses.reduce2(func, 0);
console.log(sum);
 

Эта программа используется для определения функции reduce2, которая вычисляет сумму значений в массиве. В reduce2 я использую for/of, и он возвращает правильный результат.

 for(var value of this) {
    sum = callback(sum, value);
}
 

Однако, когда я использую for/in, он возвращает неверный результат.

 for(var i in this) {
    sum = callback(sum, this[i]);
}
 

И это результат.

  10function (callback, initialValue) {
    var sum = initialValue;
    for(var i in this) {
        sum = callback(sum, this[i]);
    }
    return sum;
  }
 

Пожалуйста, помогите мне, большое вам спасибо!!!

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

1. for in повторяет индексы, for of повторяет значения.

2. this в функции ссылается на функцию, это то, что вы хотели?

3. for..in для перебора свойств объекта, for...of для перебора значений массива.

4. this в функции я хочу сослаться на массив, который использует эту функцию

Ответ №1:

Из for...in документов

for…in оператор выполняет итерацию по всем перечисляемым свойствам объекта

Итак, в вашем случае при использовании for...in в конце значения массива i будут reduce2 так this[i] относиться к reduce2 функции. Вы можете увидеть вывод приведенного ниже фрагмента во время использования for...in .

 var courses = [1, 2, 3, 4];

Array.prototype.reduce2 = function(callback, initialValue) {
  var sum = initialValue;
  for (var i in this) {
    console.log(`this[${i}]: ${this[i]}`);
    sum = callback(sum, this[i]);
  }
  return sum;
}

function func(total, number) {
  return total   number;
}

var sum = courses.reduce2(func, 0); 

Поскольку this[i] передается функции обратного вызова, она добавляется к конечному результату, т. Е. 10 В этом случае добавляется само объявление функции.

Чтобы избежать этого при использовании for...in , мы можем использовать hasOwnProperty и получить желаемый результат.

 var courses = [1, 2, 3, 4];

Array.prototype.reduce2 = function (callback, initialValue) {
    var sum = initialValue;
    for(var i in this) {
        if(this.hasOwnProperty(i)){
          sum = callback(sum, this[i]);
        }
    }
    return sum;
}

function func(total, number) {
    return total   number;
}

var sum = courses.reduce2(func, 0);
console.log(sum); 

Ответ №2:

for..in не проходите через индексы. Как упоминал @nithish, он будет перебирать свойства. Лучше использовать classic for loop для итерации индекса и получения желаемого поведения для элементов массива.

 var courses = [1, 2, 3, 4];

Array.prototype.reduce2 = function (callback, initialValue) {
  var sum = initialValue;
  for (var i = 0; i < this.length; i  ) {
    sum = callback(sum, this[i]);
  }
  return sum;
};

function func(total, number) {
  return total   number;
}

var sum = courses.reduce2(func, 0);
console.log(sum);