Стрелочная функция с возвратом при уменьшении вызова
//Example 1:
var primaryColors = [
{ color: 'red' },
{ color: 'blue' },
{ color: 'yellow' },
];
var answer = primaryColors.reduce((x,y) => x.push(y.color) , []);
//x.push is not a function
//Example 2:
var ints = [1,2,3];
var sum = ints.reduce((sum, number) => sum + number, 0);
//sum = 6
Как показано выше, в примере 1 будет генерироваться исключение TypeError: x.push is not a function. Чтобы заставить его работать, мы можем добавить пару фигурных скобок и возвращаемое значение, как показано ниже.
var answer = primaryColors.reduce((x,y) => { x.push(y.color); return x;}, []);
Сейчас я не совсем понимаю необходимость return. Почему в примере 2 можно суммировать без использования ключевого слова return, в то время как в примере 1 для работы требуется ключевое слово return?
Проблема в том, что x.push() возвращает новую длину массива, и это то, что возвращает ваш обратный вызов .reduce(). Но вам нужно выполнить return x из этого обратного вызова, чтобы ваш код имел шанс работать правильно. При втором вызове обратного вызова x будет 1, а 1.push() - ошибкой. Если вы не понимаете, зачем вам return x, то изучите документацию по .reduce() более подробно. x - это аккумулятор, и значение x в следующей итерации вашего обратного вызова будет тем, что вы вернули из предыдущей.
@ jfriend00 не могли бы вы опубликовать ответ? иначе вопрос останется без ответа, потому что нет другого правильного ответа, кроме вашего
Почему со всеми отрицательными голосами? Я неправильно пользуюсь сайтом? Если единственная причина отрицательных голосов заключается в том, что мне не удалось понять документацию, тогда, я думаю, у этого сайта вообще нет смысла существовать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Why does Example 1 need a return keyword in order to work?
Проблема в том, что x.push() возвращает новую длину массива, и это то, что возвращает ваш обратный вызов .reduce(). Но .reduce() примет возвращаемое значение из вашего обратного вызова и передаст его в качестве следующего значения для x в следующей итерации цикла. Значит вам нужен return x.
Как вы это делаете, при втором вызове обратного вызова x будет 1, а 1.push() - ошибкой.
Если вы не понимаете, зачем вам return x, то изучите документацию по .reduce() более подробно. x - это аккумулятор, и значение x в следующей итерации вашего обратного вызова будет тем, что вы вернули из предыдущей.
Why Example 2 can sum without using the keyword return
Поскольку ваш пример 2 возвращает sum + number, который вы хотите передать как сумму для следующей итерации цикла. Итак, он возвращает то, что нужно.
К вашему сведению, ваш первый цикл, возможно, легче выполнить с .map():
//Example 1:
var primaryColors = [
{ color: 'red' },
{ color: 'blue' },
{ color: 'yellow' },
];
var answer = primaryColors.map(item => item.color);
Поправьте меня, если я ошибаюсь, но так, как я это делал, второй раз вызывается мой обратный вызов, x не 1, потому что первая итерация была x.push(y.color)
@Isaac - возвращаемое значение x.push() - это длина массива x после нажатия. Эта длина будет 1 после первого нажатия, потому что массив изначально был пуст, а затем вы вставили в него один элемент. Но вы можете просто console.info(x), если хотите увидеть, что это такое.
Вы пробовали читать документацию о том, что делает
reduce? См. здесь