map() 和 forEach()
map() 和 forEach() 方法都可以遍历数组,那它们的区别是什么,或者适用场景
1. 遍历数组后是否有返回值
const arr01 = [ { a: 1, b: 2 }, { a: 2, b: 2 }, { a: 3, b: 2 }, { a: 4, b: 2 } ] //map方法 const arr02 = arr01.map(item => { return item.a }) console.log(arr02); // [ 1, 2, 3, 4 ] //forEach方法 const arr02 = arr01.forEach(item => { return item.a }) console.log(arr02); //undefined复制代码
2. 是否能对数组元素进行修改
...... const arr02 = arr01.map(item => { item.a = 3 return item.a }) console.log(arr02); // [ 3, 3, 3, 3 ]复制代码
3. map、forEach
map() 和 forEach() 是高阶函数,帮助我们实现某种功能,可以直接在代码中调用,而不用纠结循环本身,只需关注于要实现的业务即可。
API是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。 简单理解:API就是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
高阶函数:
高阶函数定义
高阶函数
英文叫 Higher-order function
。高阶函数是对其他函数进行操作的函数,操作可以是将它们作为参数,或者返回它们。简单总结为高阶函数是一个接收函数作为参数
或者将函数作为返回输出
的函数。
函数作为参数情况
Array.prototype.map
,Array.prototype.filter
,Array.prototype.reduce
和Array.prototype.sort
是JavaScript中内置的高阶函数。它们接受一个函数作为参数,并应用这个函数到列表的每一个元素。
内置高阶函数的具体说明讲解,以及和不使用高阶函数情况下的对比
Array.prototype.map
map()
(映射)方法最后生成一个新数组,不改变原始数组的值。其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
array.map(callback,[ thisObject]);复制代码
callback(回调函数)
[].map(function(currentValue, index, array) { // ... });复制代码
传递给 map
的回调函数(callback
)接受三个参数,分别是currentValue
——正在遍历的元素、index(可选)——元素索引、array(可选)——原数组本身,除了 callback
之外还可以接受 this 值(可选),用于执行 callback
函数时使用的this 值。
举例,现有一个数组[1,2,3,4]
,需要生成一个新数组,其每个元素皆是之前数组的两倍。
// 不使用高阶函数 const arr1 = [1, 2, 3, 4]; const arr2 = []; for (let i = 0; i < arr1.length; i++) { arr2.push( arr1[i] * 2); } console.log( arr2 ); // [2, 4, 6, 8] console.log( arr1 ); // [1, 2, 3, 4] //使用高阶函数 const arr1 = [1, 2, 3, 4]; const arr2 = arr1.map(item => item * 2); console.log( arr2 ); // [2, 4, 6, 8] console.log( arr1 ); // [1, 2, 3, 4]复制代码
高阶函数学习参考链接:segmentfault.com/a/119000001…
4. for循环相关
<script> //1. 在for循环外层用let定义变量,i相对循环是全局变量 let i = 0; for (; i < 5; i++) { setTimeout(() => { console.log(i) // [5,5,5,5,5] }, i * 1000) } //2. 在for循环内层用let定义变量 for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i) // [0,1,2,3,4] }, i * 1000) } //3. 在for循环内层用var定义变量,变量提升,i是全局变量 for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i) // [5,5,5,5,5] }, i * 1000) } </script>
作者:likewind2021
链接:https://juejin.cn/post/7039533461559853086