通俗易懂一对一的介绍map和foreach循环的区别,并列举两个相关应用。

一:map和foreach的区别:
map:'map'这个单词,除了可以翻译为“地图”之外,有些场景下应当翻译为“ 映射 ”,也就是按一定转换规则,转换一个集合的每一项,得到另一个集合。
Array.prototype.map 的 'map' 应当译作“映射”,也就是 以一个数组的每一项为基础,构造出一个新数组。

forEach:而'for each'就很好理解了,也就是 对数组的每一项执行同样的操作,并不会返回新的数组。

二:map和foreach的应用举例:
打个比方说,现在村长让你给全村人做一个相册。

方案一:采用forEach:

const people = ['小明', '小吴', '小敏'];  // 村里人
const tempAlbum = [];  // 去买一个空相册
function takePhoto(person){
    return person + "的照片";
}
// 挨家挨户拍照,并把照片存入相册
const album = people.forEach(function(person){
    const photo = takePhoto(person);
    tempAlbum.push(photo);
    return photo;
});
console.log('tempAlbum is now:', tempAlbum);
console.log('album is now:',album);

方案二:采用map:

const people = ['小明', '小吴', '小敏'];  // 村里人
function takePhoto(person){
    return person + "的照片";
}
// 挨个拍照后,自动生成了影集
const album = people.map(function(person){
    return takePhoto(person);
});
console.log('album is now:', album);

总结话语:

运行上面两个例子,就可以看出 map 的设计意图和方便之处——在需要基于一个数组生成另一个数组的时候,可以不手动创建中间变量

至于是否会影响原数组的问题,遍历操作都可以影响原数组,也可以不影响,这是有关原始类型和引用类型的知识,搞明白这两个知识点之后,对影响与否这个问题的疑惑就会迎刃而解了。

Array.prototype.map 在 jsx 中很是方便,可以很方便地将需要渲染的列表转为 jsx 标签,而无需创建中间变量。
贴一个私货,里面有 JS 实现的类 map 函数,虽然实际用不上:使用 for 语法模拟实现 js 数组的部分内置迭代方法

如对你有帮助的话,请给个赞鼓励一下吧 !

阅读 305

推荐阅读