此刻,我无法理解传递数组元素之间的区别(在forEach方法中就是这种情况),因为它将每个数组元素都传递给console.log并将其记录到控制台中,但是它返回的是undefined。
但是,在array.map的情况下,它也将array-element传递到console.log,但是还将每个array-element返回到它所连接的变量,并创建一个新的数组。
我不明白返回值(array.map)和将值传递给函数(array.forEach)之间的区别。
const fruits = ['mango', 'papaya', 'pineapple', 'apple']
const yummyFruits = fruits.forEach(fruit => {
console.log(fruit);
return fruit;
});
const numbers = [1, 2, 3, 4, 5];
const coolNumbers = numbers.map(number => {
console.log(number);
return number;
});
console.log(yummyFruits);
console.log(coolNumbers);
我的问题没有被提议的副本解决。
答案 0 :(得分:1)
让我们从有关功能的一些理论开始。
所有功能都有两个基本方面:
它们可以返回一个值,供调用代码使用
他们可以在执行过程中“做某事”,其中“某事”可以表示执行任意代码(例如,登录到控制台,更改DOM,发送网络请求,更新本地或全局状态-可能性无穷)。这种效果,即函数执行的与该函数返回的结果(如果有的话)无关的事情,称为“副作用”。
请注意,这两个方面的功能是完全相互独立的。一个函数可以返回一个值,而没有任何副作用(有时称为“纯”函数),或者它可以执行一些副作用而又不返回任何东西-或者可以同时执行。所有这3个代码都可以在Javascript代码中定期看到。
现在让我们来看一下forEach
和map
。两者都是数组方法,它们以函数为参数,并将该函数应用于数组的每个元素。请注意,如果该函数具有任何副作用,则在两种情况下都将全部执行-因为副作用是函数只需执行即可完成的事情。但是forEach
和map
的行为在传递给方法的函数产生的返回值方面有很大不同:
map
构建一个新数组,该数组由应用于原始数组的每个元素时自变量函数的连续返回值组成。并返回这个新数组。forEach
会完全忽略参数函数的任何返回值。因此,它不需要返回任何东西。 (而且不是。)换句话说,forEach
用于将函数应用于数组的每个元素,该函数仅由于其副作用而相关。 map
用于返回某些内容的函数,并通过获取函数结果的集合来构建新数组。它最常与纯函数一起使用-尽管没有规则反对将其与具有副作用的函数一起使用。但是,如果您主要关注副作用,那么forEach
通常更自然。
请注意,map
可以很容易地以forEach
的方式实现-通过初始化一个空数组,并将forEach
与将其函数参数应用于函数的每个元素的函数一起使用源数组并将其推到新数组上(然后在最后返回该新数组)。
但是通常,forEach
用于产生副作用,map
用于通过对每个元素应用纯函数来构建新数组。
答案 1 :(得分:1)
有多种方法可以迭代array中的元素,每种方法都有不同的用途。
例如,forEach
要对数组中的每个元素进行操作时。它遍历数组,但不更改它。
let myArray = [ 'A', 'B', 'B' ];
myArray.forEach( value => console.log(value) );
console.log(myArray); // Nothing changed: [ 'A', 'B', 'B' ]
在将forEach
添加到Javascript之前,您可以执行以下相同操作:
var myArray = [ 'A', 'B', 'B' ];
var i;
for( i = 0 ; i < myArray.length ; i+=1 ) {
console.log( myArray[ i ] );
}
使用新的for of语句,可以完成以下操作:
var myArray = [ 'A', 'B', 'B' ];
for( const value of myArray ) {
console.log( value );
}
有时您想根据第一个数组的值返回一个新数组:您想map
的值。这将基于第一个数组返回一个新数组。
let myTable = [ 'Alpha', 'Bravo', 'Charlie' ]
let myArray = [ 2, 1, 0 ]
let myNewArray = myArray.map( value => myTable[value] );
console.log(myNewArray); // [ 'Charlie', 'Bravo', Alpha' ]
在将map
添加到Javascript之前,您可以执行以下相同操作:
var myTable = [ 'Alpha', 'Bravo', 'Charlie' ]
var myArray = [ 2, 1, 0 ]
var myNewArray = [];
var i;
for ( i = 0; i < myArray.length; i += 1 ) {
myNewArray[ i ] = myTable[ myArray[ i ] ];
}
console.log(myNewArray); // [ 'Charlie', 'Bravo', Alpha' ]
有时您想过滤值,仅保留其中一些值。
let myArray = [ 6, 9, 10, 3, 15, 8, 2 ];
let myNewArray = myArray.filter( value => value >= 10 );
console.log( myNewArray ); // [ 10, 15 ]
有时候,您希望聚合数组的内容,例如对所有值求和:
let myArray = [ 6, 9, 10, 3, 15, 8, 2 ];
let sum = myArray.reduce(
(sum, value) => sum + value, // the function
0 // the start value
)
console.log( sum ); // 53
还有一个find
,如果返回值是false,它将遍历所有值。这样做的目的是在数组中找到一个值。
const myArray = [ 6, 9, 10, 3, 15, 8, 2 ];
const myValue = myArray.find( value => value > 10 );
console.log( myValue ); // 15
然后有some
遍历数组,直到函数返回true。目的是检查数组以查看是否至少有一个值匹配。如果找到匹配项,它将停止迭代。
const myArray = [ 6, 9, 10, 3, 15, 8, 2 ];
let myResult = myArray.some(
(value, index) => {
console.log('Inspecting index %d with value %d', index, value);
return value >= 10
}
);
console.log( myResult ); // true
有every
仅在所有值都与函数匹配时返回true。
const myArray = [ 6, 9, 10, 3, 15, 8, 2, 0 ];
let myResult = myArray.every(
(value, index) => {
const result = value > 0;
console.log('Inspecting index %d with value %d: %s', index, value, result);
return result;
}
);
console.log( myResult ); // false
在所有情况下,每个元素都传递给函数,您可以做任何您想做的事情。但是,用find
或map
操纵数组的原始内容,或者如果您不想使用新数组,则使用它们是不好的做法。如果只想处理数组中的值,请使用forEach
。
答案 2 :(得分:0)
在数组上调用forEach
时,它将对要传递的数组的每个元素进行任何处理,并返回undefined
by definition。
map
将对传递的数组的每个元素(与forEach
相同)进行任何操作,但将从内部函数返回的值创建新数组。
您将传递相同的内容,不同之处仅在于返回值是什么(undefined
与内部函数返回的新数组相比)
答案 3 :(得分:-1)
传递和返回值通常与函数有关。
您是如何将它与map和forEach专门联系在一起的,让我们成为一个谜。
map和forEach都是一般的函数。在两种情况下,您传递数组。
如果是这样,则有些区别是 map返回一个数组,而 forEach返回未定义。
因此,我们将 input 传递给函数,并返回将输出。
通常让output = f(input)
出现以下情况:
input | output
------+------
value | value
undef | value
value | undef
undef | undef
该值可以是函数需要的任何类型。在最后一种情况下,不需要输入或输出。但是这些仍然很有用,例如break
指令具有副作用。