值得收藏面试会用到的七个常用的遍历方法JS实现

Posted 2022-01-22 余光、

【手撕代码系列】之7个常用的遍历方法JS实现（二）

🚀 通俗易懂的实现方式，帮助我们认识相应的方法
📚 收藏本系列，基础进阶两不误
🎉 本系列持续更新，欢迎查看线上地址

写在前面

代码实现系列是与手写代码相关的第一个系列。
知识点总结的再多，也离不开思考和实践，否则就是空中楼阁，本系列顺序由浅至深。欢迎大家交流，探讨～

一、every

检测数组所有元素是否都符合指定条件

1.1 参数

• function(currentValue,index,arr):
  • currentValue: 必须。当前元素的值
  • index: 可选。当前元素的索引值
  • arr: 可选。当前元素属于的数组对象
• thisValue: 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

1.2 返回值

• (Bool): 如果所有元素都通过检测返回 true，否则返回 false。

1.3 实现

Array.prototype._every = function (callback, target = this) 
    const arr = target;
    const len = arr.length;

    if (typeof callback !== 'function') 
        throw new Error('need a function')
    

    if (len === 0) return []; // 如果为空数组，返回[]

    for (let i = 0; i < len; i++) 
        if (!callback(arr[i], i, arr)) 
            return false;
        
    

    return true;

1.4 测试

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr._every((val) => val > 0)) // true
console.log(arr._every((val) => val > 10)) // false

二、filter

_filter(function(currentValue,index,arr), thisValue)

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

2.1 参数

• function(currentValue,index,arr):
  • currentValue: 必须。当前元素的值
  • index: 可选。当前元素的索引值
  • arr: 可选。当前元素属于的数组对象
• thisValue: 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

2.2 返回值

• (Array): 返回通过检查指定数组中符合条件的所有元素

2.3 实现

Array.prototype._filter = function (callback, target = this) 
    const arr = target; // 保存this
    const result = []; // 返回新数组
    const len = arr.length;

    if (len === 0) return []; // 如果为空数组，返回[]

    for (let i = 0; i < len; i++) 
        if (callback(arr[i], i, arr)) result.push(arr[i]); //如果判定条件为true，保存至新数组
    
    return result; // 返回符合条件的结果
;

2.4 测试

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr._filter((val) => val > 0)) 
// => [ 1, 2, 3, 4, 5, 6 ]
console.log(arr._filter((val) => val > 10)) 
// => []

三、find

_find(function(currentValue,index,arr), thisValue)

返回通过测试（函数内判断）的数组的第一个元素的值。

3.1 参数

• function(currentValue,index,arr):
  • currentValue: 必须。当前元素的值
  • index: 可选。当前元素的索引值
  • arr: 可选。当前元素属于的数组对象
• thisValue: 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

3.2 返回值

• (Any): 返回通过测试（函数内判断）的数组的第一个元素的值。

3.3 实现

Array.prototype._find = function (fn, target) 
    const items = target || this;
    for (let i = 0; i < items.length; i++) 
        const cur = items[i];
        const index = i;
        const arr = items;
        if (fn(cur, index, arr)) 
            return cur;
        
    
    return undefined;
;

3.4 测试

const ages = [3, 10, 18, 20];

console.log(ages._find((age) => age > 0)) // 3
console.log(ages._find((age) => age > 10)) // 18

四、forEach

forEach(collection, [iteratee=.identity])

调用 iteratee 遍历 collection(集合) 中的每个元素， iteratee 调用3个参数： (value, index, collection)。

4.1 参数

• collection (Array): 一个用来迭代的集合。
• [iteratee=_.identity] (Function): 每次迭代调用的函数。

4.2 返回值

• (*): 无

4.3 实现

const _forEach = (array = [], iteratee) => 
    if (!array.length) return;

    for (let i = 0; i < array.length; i++) 
        iteratee(array[i], i, array);
    
;

4.4 测试

_forEach([1, 2, 3, 4, 5], function(value) 
    console.log(value);
);
// => 1 2 3 4 5

五、includes

_includes(collection, value, [fromIndex=0])

检查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一个字符串，那么检查 value（值，子字符串） 是否在字符串中， 否则做等值比较。 如果指定 fromIndex 是负数，那么从 collection(集合) 的结尾开始检索。

5.1 参数

• collection (Array|string): 要检索的集合。
• value (*): 要检索的值。
• [fromIndex=0] (number): 要检索的 索引位置。

5.2 返回值

• (Boolean): 如果找到匹配的字符串返回 true，否则返回 false。

5.3 实现

const _includes = function (collection, value, fromIndex = 0) 
    const  length  = collection;
    if (!length) return false;

    let index = fromIndex >= 0 ? fromIndex - 1 : length - 2;
    if (typeof value === 'string') 
        return collection.slice(++index).indexOf(value) !== -1
     else 
        while (++index < length) 
            if (collection[index] === value) 
                return true
            
        
        return false
    
;

5.4 测试

_includes([1, 2, 3], 1);
// => true

_includes([1, 2, 3], 1, 2);
// => false

_includes('pebbles', 'eb');
// => true

六、map

forEach(collection, [iteratee=.identity])

创建一个数组， value（值） 是iteratee（迭代函数）遍历 collection（集合）中的每个元素后返回的结果。 iteratee（迭代函数）调用3个参数value, index, collection

6.1 参数

• collection (Array): 一个用来迭代的集合。
• [iteratee=_.identity] (Function): 每次迭代调用的函数。

6.2 返回值

• (Array): 返回新的映射后数组。

6.3 实现

const _map = (array = [], iteratee) => 
    const  length  = array;
    const result = new Array(length);

    for (let i = 0; i < length; i++) 
        result[i] = iteratee(array[i], i, array);
    
    return result;
;

6.4 测试

console.log(_map([1, 2, 3, 4, 5], (val) => val + 1));
// => [2, 3, 4, 5, 6]

七、some

_some(function(currentValue,index,arr), thisValue)

用于检测数组中的元素是否满足指定条件

7.1 参数

• function(currentValue,index,arr):
  • currentValue: 必须。当前元素的值
  • index: 可选。当前元素的索引值
  • arr: 可选。当前元素属于的数组对象
• thisValue: 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

7.2 返回值

• (Bool): 如果数组中有元素满足条件返回 true，否则返回 false。

7.3 实现

Array.prototype._some = function (callback, target = this) 
    const arr = target;
    const len = arr.length;

    if (typeof callback !== 'function') 
        throw new Error('need a function')
    

    if (len === 0) return []; // 如果为空数组，返回[]

    for (let i = 0; i < len; i++) 
        if (callback(arr[i], i, arr)) 
            return true;
        
    

    return false;

7.4 测试

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr._some((val) => val > 5)) // true
console.log(arr._some((val) => val > 10)) // false

写在最后

本系列第二篇就到这里了，感兴趣的朋友可以留言讨论更好的代码实现，以及其他想了解的代码实现，下篇手撕代码系列会是其他数据类型相关的方法，收藏不走丢哦～

其他系列

• LeetCode算法题解
• 前端进阶文章汇总
• 前端手撕代码汇总