JS: 数组的循环函数
js 数组相关的循环函数,用得挺多,所以有些坑还是要去踩一下,先来看一道面试题。
注意:下面提到的不改变原数组仅针对基本数据类型。
面试题
模拟实现数组的 map 函数。
心中有答案了吗?我的答案放在最后。
map( callback( cur, index, arr ), thisarg )
map 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
-
map 不改变原数组(可以在 callback 执行时改变原数组)
let a = [1, 2, 3] let b = a.map(item => item*2) // 不改变原数组 a // [1, 2, 3] b // [2, 4, 6] // 在 callback 执行时改变原数组 a.map((cur, i, arr) => arr[i] *= 2) a // [2, 4, 6]
-
没有 return 时,返回
undefined
let c = a.map((cur, i, arr) => arr[i] *= 2) c // [undefined, undefined, undefined]
-
原数组中新增加的元素不会被 callback 访问
let a = [1, 2, 3] let b = a.map((cur, i, arr) => { arr.push(arr.length + 1) return cur*2 }) b // [2, 4, 6] a // [1, 2, 3, 4, 5, 6]
filter( callback( cur, index, arr ), thisarg )
filter 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
这个没什么好说的,filter 只返回过滤后的新数组,依然不会改变原数组
let a = [1, 2, 3] let b = a.filter(item => item % 2 == 0) a // [1, 2, 3] b // [2]
需要注意的是,尽量不要在 filter 中直接return item
。
/* 一般情况是没问题的 */ let a = [1, 2, 3] let b = a.filter(item => item) a // [1, 2, 3] b // [1, 2, 3] /* false、0、undefined、null */ let c = [true, false, 0, undefined, null] let d = c.filter(item => item) c // [true, false, 0, undefined, null] d // [true]
一般情况下直接return item
是没问题的,但遇到false、0、undefined、null
这几个特殊值时,就会出问题。因为 filter 是根据return
的值来判断返回的新数组是否要添加遍历到的原数组索引值,而不是直接在新数组中添加return
的值。
简单来说,就是 filter 中的 callback 的 return 应该返回一个 boolean 值,true 即满足过滤条件,false 则不满足过滤条件。
foreach( callback( cur, index, arr ), thisarg )
foreach 方法对数组的每个元素执行一次提供的函数。
-
foreach 无法中断,需要中断的则表明:不应该使用 foreach。当然,使用 try、catch 是可以实现中断的,但不推荐。
let a = [1, 2, 3] try { a.foreach(item => { console.log(item) if (item % 2 == 0) throw new error('hhh') }) } catch (e) { console.log('中断') } /* 1 2 中断 */
-
foreach 也是不会改变原数组的
let a = [1, 2, 3] a.foreach(item => item*2) a // [1, 2, 3]
every( callback( cur, index, arr ), thisarg )
every 方法测试数组的所有元素是否都通过了指定函数的测试。
这个没什么好说的,但 every 和 some 都有个坑。
坑:空数组调用 every 会返回true
。
// 返回了 true [].every(item => item > 0) // true
some( callback( cur, index, arr ), thisarg )
some 方法测试是否至少有一个元素通过由提供的函数实现的测试。
坑:空数组调用 some 会返回false
。
// 和 every 相反,这里返回了 false [].some(item => item > 0) // false
reduce( callback( prev, cur, index, arr ), initval )
reduce 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
如果没有提供
initval
,reduce 会取数组中的第一个值为prev
, 然后从数组索引 1 开始执行 callback,跳过第一个索引。如果提供initlval
,从索引 0 开始,prev
为initval
。-
如果数组为空且没有提供
initval
会报错。[].reduce((prev, cur)=> cur) // typeerror
实现 map 函数
array.prototype._map = function(callback, thisarg) { if (typeof callback !== 'function') { throw new typeerror(`${callback} is not a function`) } let res = [] for (let i=0; i<this.length; i++) { res.push(callback.call(thisarg, this[i], i, this)) } return res }
上一篇: Spring Modules
下一篇: Mysql复习资料整理