前端百题——数组中方法原理早知道

我会带着你远行 2022-10-09 02:48 64阅读 0赞

js的Array对象可以调用很多方法，每一个方法都有其特殊的用途，但是很多情况下我们仅仅会使用这么高级方法，多于其实现过程知之甚少，本节就数组中的常用方法map、filter、reduce进行实现，帮助了解其原理。

19.1 map  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

19.1.1 基础  
map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

map方法的用法如下所示：  
const new\_array = arr.map(function callback(currentValue\[, index\[, array\]\]) \{  
// ……  
\}\[, thisArg\])  
复制代码  
小试牛刀  
const arr = \[1, 2, 3, 4\];

const newArr = arr.map(value => value \* 3);

console.log(arr); // \[ 1, 2, 3, 4 \] 原数组不变  
console.log(newArr); // \[ 3, 6, 9, 12 \]  
复制代码  
19.1.2 实现  
map做的事情很单纯，就是处理每个元素然后返回一个新的数组，下面就来看看怎样实现自己的map函数。实现步骤如下所示：

判断输入的第一个参数是不是函数  
获取需要处理的数组内容  
新建一个新数组用于装载新的内容  
对数组中每个值进行处理（注意改变this指向）  
返回结果  
Array.prototype.myMap = function(fn) \{  
// 判断输入的第一个参数是不是函数  
if (typeof fn !== ‘function’) \{  
throw new TypeError(fn + ‘is not a function’);  
\}

// 获取需要处理的数组内容
    const arr = this;
    const len = arr.length;
    // 新建一个空数组用于装载新的内容
    const temp = new Array(len);
    
    // 对数组中每个值进行处理
    for (let i = 0; i < len; i++) {
        // 获取第二个参数，改变this指向
        let result = fn.call(arguments[1], arr[i], i, arr);
        temp[i] = result;
    }
    // 返回新的结果
    return temp;

const arr = \[1, 2, 3, 4\];

const newArr = arr.myMap(value => value \* 3);

console.log(arr); // \[ 1, 2, 3, 4 \] 原数组不变  
console.log(newArr); // \[ 3, 6, 9, 12 \]

复制代码  
上述就是map的实现流程，并且经过验证与原生的map方法的结果一致。

19.2 filter  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]

19.2.1 基础  
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

filter方法的用法如下所示：  
const newArray = arr.filter(callback(element\[, index\[, array\]\])\[, thisArg\])  
复制代码  
小试牛刀  
const arr = \[1, 2, 3, 4\];

const newArr = arr.filter(value => value > 2);

console.log(arr); // \[ 1, 2, 3, 4 \]

console.log(newArr); // \[ 3, 4 \]  
复制代码  
19.2.2 实现  
filter函数做的事情就是过滤出符合条件的元素，对于filter的实现步骤和map的基本一致，不同之处在于其在数组中处理每个值的时候稍有区别。

Array.prototype.myFilter = function (fn) \{  
if (typeof fn !== ‘function’) \{  
throw new TypeError(`${fn} is not a function`);  
\}

// 获取该数组
    const arr = this;
    // 获取该数组长度
    const len = this.length >>> 0;
    // 新建一个新的数组用于放置该内容
    const temp = [];
    
    // 对数组中每个值进行处理
    for (let i = 0; i < len; i++) {
        // 处理时注意this指向
        const result = fn.call(arguments[1], arr[i], i, arr);
        result && temp.push(arr[i]);
    }
    
    return temp;

const arr = \[1, 2, 3, 4\];

const newArr = arr.myFilter(value => value > 2);

console.log(arr); // \[ 1, 2, 3, 4 \]

console.log(newArr); // \[ 3, 4 \]  
复制代码  
19.3 reduce  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]

19.3.1 基础  
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

reduce方法的用法如下所示：  
const result = arr.reduce(callback(accumulator, currentValue\[, index\[, array\]\])\[, initialValue\])  
复制代码  
小试牛刀  
const arr = \[1, 2, 3, 4\];

const result = arr.reduce((accumulator, value) => accumulator + value);

console.log(result); // 10  
复制代码  
19.3.2 实现  
reduce为数组中的每一个元素依次执行callback函数，下面就来看看怎样实现自己的filter函数。实现步骤如下所示：

判断输入的第一个参数是不是函数  
获取需要处理的数组内容  
获取初始值  
依次处理后续数组中的元素  
返回累加器处理的结果  
Array.prototype.myReduce = function(fn) \{  
if (typeof fn !== ‘function’) \{  
throw new TypeError(`${fn} is not a function`);  
\}

const arr = \[1, 2, 3, 4\];

const result = arr.myReduce((accumulator, value) => accumulator + value);

console.log(result); // 10  
复制代码  
1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star： [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu] 不胜感激 ！  
来自 “开源世界 ” ，链接：[https://ym.baisou.ltd/post/735.html][https_ym.baisou.ltd_post_735.html] ，如需转载，请注明出处，否则将追究法律责任。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221005/513afa1ea1334d099764e073d005ac80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]: /images/20221005/442eaba61fb14252938faea3b99fb808.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]: /images/20221005/399aa8aacec04e43a0f510b16ad64f77.png
[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu
[https_ym.baisou.ltd_post_735.html]: https://ym.baisou.ltd/post/735.html