此刻,我很难理解沿着数组元素传递的区别 - 在foreach方法中是这种情况 - 因为它将每个数组元素沿沿线传递到控制台。将其登录并将其登录到控制台上,但返回未定义的。
但是,对于Array.map的情况,它也沿数组元素传递到Console.log,但也将每个数组元素返回到已连接到的变量,并创建一个新数组。
我不明白返回值(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);
编辑
我的问题无法通过提出的重复。
让我们从有关函数的一些理论开始。
所有功能都有2个基本方面:
-
他们可以返回一个值,供电代码
使用 他们可以在执行过程中"做某事","某些东西"可能意味着执行任意代码(例如,登录到控制台,更改DOM,发送网络请求,更新本地或全球状态 - 可能性是无限的(。这样的效果,函数所做的事情与功能返回(如果有的话(无关,称为"副作用"。
请注意,函数的这两个方面彼此完全独立。一个函数可以返回一个值,而根本没有副作用(有时称为"纯"函数(,或者它可以执行某些副作用,同时又不返回任何东西 - 或可以同时完成两者。所有3个经常在JavaScript代码中看到。
现在让我们在此灯光下查看forEach
和map
。两者都是数组方法,它们作为参数的函数,并将该函数应用于数组的每个元素。请注意,如果该功能具有任何副作用,则这些功能将在两种情况下都执行 - 因为副作用是函数仅通过执行的功能。但是forEach
和map
在传递给该方法的函数产生的任何返回值方面的行为差异很大:
-
map
构建一个新数组,当应用于原始数组的每个元素时,由参数函数的连续返回值制成。它返回了这个新数组。 - 但是
forEach
完全忽略了参数函数的任何返回值。因此,它无需返回任何东西。(事实并非如此。(
换句话说,forEach
用于将功能应用于数组的每个元素,在该数组的每个元素中,该函数仅由于其副作用而与之相关。而map
是用于返回某些东西的函数,并通过获取功能结果的集合来构建新数组。它通常与纯函数一起使用 - 尽管没有规则不反对具有副作用的功能。但是,如果您主要关注副作用,那么forEach
通常更自然。
请注意,map
可以很容易地根据forEach
实现 - 通过初始化一个空数组,然后将forEach
与将其函数参数应用于源数组的每个元素应用于新的元素的函数并将其推到新的元素(然后((然后返回该末端的新数组(。
但通常,forEach
用于使用副作用,map
用于通过在每个元素上应用纯函数来构建新数组。
有几种方法可以迭代数组中的元素,每个元素都有不同的目的。
例如,当您想对数组中的每个元素做某事时,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 ] );
}
使用新的态度,可以这样做同样的事情:
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
,如果返回值为false,也有find
在所有值上迭代。其目的是在数组中找到一个值。
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
。
当您在数组上调用 forEach
时,它会使您想做任何您要通过的数组的元素,并根据定义返回undefined
。
map
将对通过的每个数组的每个元素(与forEach
相同(执行任何您想做的事情,但会从内部函数返回的值创建新数组。
您将通过同一件事,差异仅在返回的值(undefined
与新数组中的NERT函数返回的返回(中(