「前端练习场」原生 JavaScript 手写各种 数组 API

最新推荐文章于 2024-05-04 02:42:40 发布
最新推荐文章于 2024-05-04 02:42:40 发布
阅读量213 收藏
点赞数 1
原文链接：https://juejin.im/post/5cc175496fb9a0325031b6e3
版权

前言

JavaScript 中的数组类型提供了很多原生方法供我们使用，本文会 模拟实现 一些常用的数组 API。

「前端练习场」 将会持续更新，不同于之前的 【前端进阶之路】 和 【从头到脚】 这两个系列，练习场 主要侧重于基础知识的练习巩固，大家对这个系列有好的建议也可以在评论区和我交流 ? 。

另外我自己也是在不断的学习中，如果有不对的地方麻烦大家斧正，我会及时更新，感谢。

博客地址 ?? fe-code

API

数组的 API 有很多，我这里放一些常用的。如果大家有其他的实现方法，可以放在评论区，我看到了会更新到文章中 ^_^。

本文不是具体讲某个 API 的基本用法，所以对这些 API 用法不太熟悉的同学需要先自行学习。另外大部分实现，在 MDN 上都有。

前往 —> MDN 学习基础用法。

在正式开始实现之前，先看一个例子。

let arr = [];
arr[3] = 3;
// arr.length ? arr[0] ?  0 in arr ?

// 4  undefined  fasle
复制代码

这个东西在后面的实现中会出现，所以大家先了解一下。数组的下标不一定是连续的，直接赋值还会影响它的长度。

forEach

  • 简单实现
// forEach 支持传入两个参数，callback、thisArg
// callback 返回3个参数，当前元素、当前元素索引、原数组
// thisArg 传入后，改变 callback 的 this 指针
Array.prototype.myforeach = function (fn, context = null) {
    let index = 0;
    let arr = this;
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index < arr.length) {
        if (index in arr) { // 数组的下标并不一定是连续的
            fn.call(context, arr[index], index, arr);
        }
        index ++;
    }
};
复制代码
  • 支持 async/await

之前见大佬们讨论过这个问题，所以提一下。forEach 在正常情况像下面这么写肯定是做不到同步的，程序不会等一个循环中的异步完成再进行下一个循环。原因很明显，在上面的模拟中，while 循环只是简单执行了 callback，所以尽管 callback 内使用了 await ，也只是影响到 callback 内部。

arr.myforeach(async v => {
    await fetch(v);
});
复制代码

要支持上面这种写法，只要稍微改一下就好。

Array.prototype.myforeach = async function (fn, context = null) {
    let index = 0;
    let arr = this;
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index < arr.length) {
        if (index in arr) {
            try {
                await fn.call(context, arr[index], index, arr);
            } catch (e) {
                console.log(e);
            }
        }
        index ++;
    }
};
复制代码

map

map 的实现大体和 forEach 类似，只是返回了一个新数组。

// 参数和forEach一样
// callback 需要有一个返回值
Array.prototype.mymap = function (fn, context = null) {
    let arr = this;
    let len = arr.length;
    let index = 0;
    let newArr = [];
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index < len) {
        if (index in arr) {
            let result = fn.call(context, arr[index], index, arr);
            newArr[index] = result; // 返回值作为一个新数组
        }
        index ++;
    }
    return newArr;
};
复制代码

reduce

reduce 稍微麻烦一些，需要根据第二个参数是否存在，使用不同的处理方式。

Array.prototype.myreduce = function (...arg) {
    let arr = this;
    let len = arr.length;
    let index = 0;
    let fn = arg[0], result;
    if (arg.length >= 2) { // 判断是否有第二个参数，有的话作为回调函数运行的初始值
        result = arg[1];
    } else {
        // reduce 在没有第二个参数的时候，会把数组的第一项作为回调的初始值
        // 第一项并不一定是 a[0]
        while (index < len && !(index in arr)) {
        // 下标小于数组长度且下标不属于该数组就一直循环，用来找到数组的第一项
            index++;
        }
        if (index >= len) { // 如果第一项大于等于数组长度，则说明是空数组
            throw new TypeError( '空数组且没有初始值' );
        }
        result = arr[index++]; // 赋值之后下标+1
    }
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index < len) {
        if (index in arr) {
            result = fn(result, arr[index], index, arr); // 每次回调的返回值，都会传入下次回调
        }
        index ++;
    }
    return result;
};
复制代码

reduce 实现一个 map

经常会有面试问到这道题，顺便写一下。

Array.prototype.mapByreduce = function (fn, context = null) {
    let arr = this;
    if (typeof fn !== 'function') {
         throw new TypeError(fn + ' is not a function');
    }
    return arr.reduce((pre, cur, index, array) => {
        let res = fn.call(context, cur, index, array);
        return [...pre, res]; // 返回一个新数组
    }, []);
};
复制代码

filter

filter 一般用来筛选。

Array.prototype.myfilter = function (fn, context = null) {
    let arr = this;
    let len = arr.length;
    let index = 0, k = 0;
    let newArr = [];
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index < len) {
        if (index in arr) {
            let result = fn.call(context, arr[index], index, arr);
            if (result) newArr[k++] = arr[index]; // 如果返回值为真，就添加进新数组
        }
        index ++;
    }
    return newArr;
};
复制代码

find 和 findIndex

find 和 filter 很类似，找到一个就返回当前元素，找不到返回 undefined。

findIndex 找到返回下标，找不到返回 -1。和 indexOf 类似，区别是支持回调。

Array.prototype.myfind = function (fn, context = null) {
    let arr = this;
    let len = arr.length;
    let index = 0;
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index < len) {
        if (index in arr) {
            let result = fn.call(context, arr[index], index, arr);
            if (result) return arr[index]; // 满足条件就返回
        }
        index ++;
    }
    return undefined;
};
复制代码

some

some 和 find，除了返回值有区别，其他的可以说都一样。

Array.prototype.mysome = function (fn, context = null) {
    let arr = this;
    let len = arr.length;
    let index = 0;
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index < len) {
        if (index in arr) {
            let result = fn.call(context, arr[index], index, arr);
            if (result) return true; // 找到一个满足的，立即返回true
        }
        index ++;
    }
    return false; // 找不到返回 false
};
复制代码

every

跟 some 相比，每个成员都满足条件才返回 true，有一个不满足就返回 false。

Array.prototype.myevery = function (fn, context = null) {
    let arr = this;
    let len = arr.length;
    let index = 0;
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index < len) {
        if (index in arr) {
            let result = fn.call(context, arr[index], index, arr);
            if (!result) return false; // 有一个不满足，就返回false
        }
        index ++;
    }
    return true;
};
复制代码

刚刚接连几个 filter、find、some、every 在实现和功能上都很相似，只是返回值上有一些差别，所以更要在合适的场景使用合适的方法。

includes 和 indexOf

这两个都可以用来查找数组中是否有某个元素，只是返回值有区别。

Array.prototype.myincludes = function (val, fromIndex = 0) {
    let arr = this;
    let len = arr.length;
    let k = Math.max(fromIndex >= 0 ? fromIndex : len - Math.abs(fromIndex), 0);
    // 允许传入负数，意为从倒数第几位开始查找
    // 负数依然是按升序查找
    // 避免传入负数绝对值大于len而使k出现负数，k设置最小值 0 
    function check(x, y) {
        return x === y ||
        (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
        // 判断 NaN
    }
    while (k < len) {
        if (k in arr) {
            if (check(val, arr[k])) return true; // 找到一个符合条件的，返回 true
        }
        k ++;
    }
    return false; // 没找到 返回false
};
复制代码
// indexOf 不支持查找 NaN 
Array.prototype.myindexOf = function (val, fromIndex = 0) {
    let arr = this;
    let len = arr.length;
    let k = Math.max(fromIndex >= 0 ? fromIndex : len - Math.abs(fromIndex), 0);
    // 处理负数
    while (k < len) {
        if (k in arr) {
            if (val === arr[k]) return k; // 找到返回下标
        }
        k ++;
    }
    return -1; // 找不到返回 -1
};
复制代码

join

使用连接符，将数组转成字符串

Array.prototype.myjoin = function (connector = ',') {
    let arr = this;
    let len = arr.length;
    let str = '';
    let k = 0;
    while (k < len) {
        if (k in arr) {
            if (k === len -1) { // 最后一位不用连接
                str += arr[k];
            } else {
                str += arr[k] + connector.toString();
            }
        }
        k ++;
    }
    return str;
};
复制代码

好了，大致就写这些，如果大家觉得有必要补充的可以跟我说。

参考文章

交流群

qq前端交流群：960807765，欢迎各种技术交流，期待你的加入；

微信群：有需要的同学可以加我好友，我拉你入群，文末有二维码 ^_^。

后记

如果你看到了这里，且本文对你有一点帮助的话，希望你可以动动小手支持一下作者，感谢?。文中如有不对之处，也欢迎大家指出，共勉。好了，又耽误大家的时间了，感谢阅读，下次再见！

近期文章：

感兴趣的同学可以关注下我的公众号 前端发动机，好玩又有料。也可加我好友，大家一起学习交流 ^_^。

转载于:https://juejin.im/post/5cc175496fb9a0325031b6e3

weixin_33721344
关注
js 数组（一）基础练习题 【增删改查】
qq_45827064的博客
04-29 299
12
美团前端二面必会手写面试题汇总
helloworld1024fd的博客
10-10 845
考点： 数组去重方法汇总 1. 双层 for 循环 2. Array.filter() 加 indexOf/includes 3. ES6 中的 Set 去重 4. reduce 实现对象数组去重复 实现观察者模式 观察者需要放到被观察者中，被观察者的状态变化需要通知观察者 我变化了 内部也是基于发布订阅模式，收集观察者，状态变化后要主动通知观察者 实现一个链表结构 链表结构看图理解next层级 参考前端手写面试题详细解答第一版 时间复杂度为 O(n^2) 第二版 标记法 / 自定义属性法 时间
JS leetcoe.7练习 —— 问题：数组APi容易记不住
weixin_44089544的博客
02-13 212
题目： 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。 示例: 给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1] 假设我们的环境...
js数组基础API学习
weixin_41669582的博客
01-24 239
转字符串：        toString：a.toString       注：null 和undefined没有toString方法        String :    String(a)         注：首先会调用toString方法null和undefined会 返回null和undefined        Typeof     :判断变量类型            
Webcomb:一个简单的 JS 游乐场来练习前端开发。 它是使用 Reactjs 构建的
05-29
网梳 Webcomb是实践前端开发（HTML，CSS和JavaScript）的游乐场。 它是使用 Reactjs 和react-codemirror2库react-codemirror2 。 特征： HTML，CSS和JavaScript的游乐场 让您下载网站供本地使用 导入本地图片 直接从剪贴板上传图片 许多编辑器快捷方式，如CTRL+/用于评论 使用的技术： ReactJS React钩子 React-Codemirror-2 ImgBB API（用于托管图像） Netlify.com（用于网站托管） 快照： 在本地运行的步骤： 克隆存储库 git clone https://github.com/ncs-jss/Webcomb cd 到Webcomb cd Webcomb 在.env文件中添加 API 凭证和 API 端点，使用.env.example作为参考 从
API接口（前端学习）
L19541216的博客
12-14 1347
接口是前后端通信的桥梁简单理解：一个接口就是服务中的一个路由规则，根据请求响应结果接口的英文单词是API（Application Program Interface）,所以有时也称之为API接口这里的接口指的是数据接口，与编程语言（Java，Go等）中的接口语法不同。
原生JS 面试题 （基础）（概率大）
m0_64191440的博客
08-30 7808
2022 最新 前端面试题 持续更新中
前端开发核心知识进阶
GitChat
07-02 4342
深入理解JavaScript reduce函数的手写实现
资源摘要信息:"在JavaScript中，reduce函数是数组的一种高阶函数，用于将数组中的元素归纳为单一值。它的基本用法是接收一个回调函数作为参数，回调函数再接收累加器（accumulator）、当前值（currentValue）、可选...
深入解析JavaScript中手写new操作符的正则表达式实现
最后，我们可能会在`README.txt`文件中记录一些额外信息，例如手写new的使用示例、注意事项、与原生new的区别等，以帮助用户更好地理解和使用我们的`createNew`函数。 通过这样的练习，我们不仅加深了对new运算符的...
web前端API
09-12
web前端中用到的API，包含：JavaScript、HTML、HTML5、CSS 2.0、CSS3.0、jQuery 1.3-1.10（若干帮助文档）。
论如何写出一篇高质量的英文论文_英文论文怎么写博客
最新发布
2401_84435866的博客
05-04 488
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。t基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。
前端开发必会的10个Web API
huihui_999的博客
06-12 297
前端必会的10个Web API
js手写数组方法之map(),reduce(),filter(),foreach()
weixin_50488897的博客
04-09 1755
javascript语言中,foreach、filter、map和reduce是常用的集合操作方法。本文详细介绍了这四种数组方法的使用方式,和手写方法。
JS数组方法手写代码实现（一）
m0_55315930的博客
11-17 712
JavaScript的Array方法的原生JavaScript代码实现。
JS手写——数组常见方法的手写（forEach、map、filter、every、some、reduce、find、findIndex、fill、join、flat）
ZKH129的博客
07-03 528
数组常见方法的手写
开放API接口 & 练习学习接口
全易
12-11 3189
淘宝查询手机号码归属地： https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=手机号 快递接口: http://www.kuaidi100.com/query?type=快递公司编码&postid=快递单号 ps:快递公司编码:申通=”shentong” EMS=”ems” 顺丰=”shunfeng” 圆通=”yuant...
几个高级前端常用的API
前端开发博客
06-13 941
本文在github做了收录 github.com/Michael-lzg/my--article/blob/master/other/分享几个实用的API.mdMutationObserverIntersectionObservergetComputedStyle()getBoundingClientRectrequestAnimationFrameMutationObs...
前端实用API分享
weixin_36430673的博客
06-08 619
高级前端常用的 API
深入理解JavaScript数组原理与API实战
"深入理解数组原理与掌握JavaScript数组方法API" 在JavaScript中，数组是一种非常基础且关键的数据结构，它允许我们存储和操作一维数据集合。数组在各种编程任务中发挥着重要作用，特别是在前端开发中，如React和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值