JavaScript 手写代码 第七期(重写数组方法三) 用于遍历的方法

2024-02-26 1199阅读

温馨提示：这篇文章已超过444天没有更新，请注意相关的内容是否还可用！

文章目录

  • 1. 为什么要手写代码？
  • 2. 手写代码
    • 2.1 forEach
      • 2.1.1 基本使用
      • 2.1.2 手写实现
      • 2.2 map
        • 2.2.1 基本使用
        • 2.2.2 手写实现
        • 2.3 filter
          • 2.3.1 基本使用
          • 2.3.2 手写实现
          • 2.4 every
            • 2.4.1 基本使用
            • 2.4.2 手写实现
            • 2.5 some
              • 2.5.1 基本使用
              • 2.5.2 手写实现
              • 2.6 reduce
                • 2.6.1 基本使用
                • 2.6.2 手写实现
                • 2.7 find
                  • 2.7.1 基本使用
                  • 2.7.2 手写实现
                  • 2.8 findIndex
                    • 2.8.1 基本使用
                    • 2.8.2 手写代码
                    • 2.9 flatmap
                      • 2.9.1 基本使用
                      • 2.9.2 手写实现

                        1. 为什么要手写代码？

                        我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。

                        2. 手写代码

                        2.1 forEach

                        2.1.1 基本使用

                        forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

                                    let arr = [1, 2, 3];
            arr.forEach((item, index, arr) => {
                console.log(item, index, arr);
            });

                        JavaScript 手写代码 第七期(重写数组方法三) 用于遍历的方法

                        2.1.2 手写实现

                        输出结果一致

                                    Array.prototype.myForEach = function (callback) {
              	if (typeof callback !== 'function') {
                    throw new Error('参数必须是一个函数');
                }
                for (let i = 0; i  

                        2.2 map
                         

                        2.2.1 基本使用
                         

                        map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
                        map() 方法按照原始数组元素顺序依次处理元素。
                         

                        原数组不会发生改变
                        返回新的数组：在原数组的基础上都加1
                         

                                    let arr = [1, 2, 3, 4];
            let newArr = arr.map((item, index, arr) => {
                return item + 1;
            });
            console.log(newArr); // [2, 3, 4, 5]
            console.log(arr); // 不会改变原数组 [1, 2, 3, 4]

                         

                        2.2.2 手写实现
                         

                                    Array.prototype.myMap = function (callback) {
              	if (typeof callback !== 'function') {
                    throw new Error('参数必须是一个函数');
                }
                // 最终要返回的数组
                let result = [];
                for (let i = 0; i  {
                return item + 1;
            });
            console.log(newArr); // [2, 3, 4, 5]
            console.log(arr); // 不会改变原数组 [1, 2, 3, 4]

                         

                        2.3 filter
                         

                        2.3.1 基本使用
                         

                        filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
                        filter() 不会改变原始数组。
                         

                        返回数组中大于3的项
                         

                                    let arr = [1, 2, 3, 4, 5];
            let newArr = arr.filter((item, index, arr) => {
                return item > 2;
            });
            console.log(newArr); // [3,4,5]
            console.log(arr); // [1,2,3,4,5]

                         

                        2.3.2 手写实现
                         

                                    Array.prototype.myFilter = function (callback) {
              	if (typeof callback !== 'function') {
                    throw new Error('参数必须是一个函数');
                }
                let result = [];
                for (let i = 0; i  2，符合则push到数组res里面返回
                    callback(this[i], i, this) && result.push(this[i]);
                }
                return result;
            };
            let newArr = arr.myFilter((item, index, arr) => {
                return item > 2;
            });
            console.log(newArr); // [3,4,5]
            console.log(arr); // [1,2,3,4,5]

                         

                        2.4 every
                         

                        2.4.1 基本使用
                         

                        every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
                        every() 方法使用指定函数检测数组中的所有元素：
                        如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
                        如果所有元素都满足条件，则返回 true。
                         

                                    let arr = [1, 2, 3, 4, 5];
            let flag = arr.every((item, index, arr) => {
                return item > 4;
            });
            console.log(flag); // true

                         

                        2.4.2 手写实现
                         

                                    Array.prototype.myEvery = function (callback) {
              	if (typeof callback !== 'function') {
                    throw new Error('参数必须是一个函数');
                }
                for (let i = 0; i  {
                return item > 4;
            });
            console.log(flag); // false

                         

                        2.5 some
                         

                        2.5.1 基本使用
                         

                        some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
                        如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
                        如果没有满足条件的元素，则返回false。
                         

                        2.5.2 手写实现
                         

                                    Array.prototype.mySome = function (callback) {
                if (typeof callback !== 'function') {
                    throw new Error('参数必须是一个函数');
                }
                for (let i = 0; i  {
                return item > 3;
            });
            console.log(flag);

                         

                        2.6 reduce
                         

                        2.6.1 基本使用
                         

                        reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
                        语法:`
                         

                        array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

                         

                        第一个参数total：必需。初始值, 或者计算结束后的返回值。
                        第二个参数currentValue：必需。当前元素
                        第三个参数currentIndex：可选。当前元素的索引
                        第四个参数arr：可选。当前元素所属的数组对象。
                         

                        使用示例,实现数组元素的累加
                         

                                    let arr = [1, 2, 3, 4];
            let sum = arr.reduce((tol, cur) => {
                return (tol += cur);
            }, 0);
            console.log(sum); // 10

                         

                        2.6.2 手写实现
                         

                                    Array.prototype.myReduce = function (callback, InitialValue) {
                if (typeof callback !== 'function') {
                    throw new Error('传入第一个参数必须是函数');
                }
                const array = this;
                // 如果没有传InitaialValue初始值时，初始值默认为数组的第一项即array[0]
                let result = InitialValue || array[0];
                for (let i = 0; i  {
                return (tol += cur);
            }, 0);
            console.log(result); // 10

                         

                        2.7 find
                         

                        2.7.1 基本使用
                         

                        find() 方法返回满足条件的数组的第一个元素的值。
                         

                                    let arr = [1, 2, 3];
            let flag = arr.find((item, index, arr) => {
                return item > 2;
            });
            console.log(flag); // 3

                         

                        2.7.2 手写实现
                         

                                    Array.prototype.myFind = function (callback) {
                if (typeof callback !== 'function') {
                    throw new Error('传入的参数必须是函数');
                }
                for (let i = 0; i  {
                return item > 2;
            });
            console.log(flag);

                         

                        2.8 findIndex
                         

                        2.8.1 基本使用
                         

                        findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
                         

                                    let arr = [1, 2, 3, 4];
            let index1 = arr.findIndex((item, index, arr) => {
                return item == 3;
            });
            console.log(index1);

                         

                        2.8.2 手写代码
                         

                                    Array.prototype.myFindIndex = function (callback) {
                for (let i = 0; i  {
                return item == 3;
            });
            console.log(index1);

                         

                        2.9 flatmap
                         

                        2.9.1 基本使用
                         

                        flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，不改变原数组
                        使用map遍历时，操作完成后，如果遇到操作完的元素为数组，就进行一层的拍平
                        flatmap
                         

                        faltmap(callback,thisArg)

                         

                        第一个参数callback：可以传入 (item,i,arr) 执行
                        第二个参数thisArg：为执行callback时的this指向 thisArg
                         

                        代码示例：
                         

                                    let arr = [1, 2, 3, 4, 5];
            let arr1 = arr.flatMap((item) => [item * 2]);
            console.log(arr1); // [2, 4, 6, 8, 10]
            console.log(arr); // [1, 2, 3, 4, 5] 原数组没有发生改变
            let arr2 = arr.flatMap((item) => [[item * 2]]);
            console.log(arr2); // 只能拍平一层 [[2], [4], [6], [8], [10]];
            console.log(arr); // [1, 2, 3, 4, 5]

                         

                        2.9.2 手写实现
                         

                                    Array.prototype.myFlatMap = function (callback, thisArg) {
                let newArr = [];
                for (let i = 0; i  [item * 2]);
            console.log(arr1); // [2, 4, 6, 8, 10]
            let arr2 = arr.myFlatMap((item) => [[item * 2]]);
            console.log(arr2); // 只能拍平一层 [[2], [4], [6], [8], [10]];
                        欢迎大家在讨论学习，感谢大家支持
VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

相关阅读

目录[+]