每日前端手写题--day5

以下题目来自掘金等其它博客,但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础,不妨和我一起参与到每日刷题的过程中来,如何?

第五天要刷的手写题如下:

  1. 实现Array.prototype.forEach
  2. 实现Array.prototype.some
  3. 实现Array.prototype.every
  4. 实现Array.prototype.find
  5. 实现Array.prototype.findIndex

下面是我自己写的答案:

1. 实现Array.prototype.forEach

  • forEach的原理是对数组中的每一个元素都通过传入的callback函数进行处理
  • 通过手写forEach就可以看出来为什么return和break是无效的
javascript 复制代码
function myForEach (cb) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    const _len = this.length;
    for (let i = 0; i < _len; i++) {
        cb(this[i], i ,this);
    }
}

2. 实现Array.prototype.some

  • 对于some的实现不通过for的遍历,而是通过while循环和栈数据结果来做,这样可以使整个过程更加的形象
  • 将原始数组的所有元素全部入栈,然后使用while逐个出栈,弹出的元素接受检查码如果通过则整体立刻返回true,如果通不过则下一个
  • 直到栈空,则返回false
javascript 复制代码
function mySome (test) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    const _stack = [...this];
    while(_stack.length){
        const _value = _stack.pop();
        if(test(_value, _stack.length - 1, _stack)) return true;
    }
    return false;
}

3. 实现Array.prototype.every

基本上和some的实现过程相同,不同之处仅仅在于什么时候返回true以及什么时候返回false

javascript 复制代码
function myEvery (test) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    const _stack = [...this];
    if(_stack.length === 0) return false;
    while(_stack.length){
        const _value = _stack.pop();
        if(!test(_value, _stack.length - 1, _stack)) return false;
    }
    return true;
}

4. 实现Array.prototype.find

和some以及every没有什么本质上的区别,同样也是经过检测函数之后的返回值有所变化

javascript 复制代码
function myFind (test) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    const _stack = [...this];
    while(_stack.length){
        const _value = _stack.pop();
        if(test(_value, _stack.length - 1, _stack)) return _value;
    }
    return undefined;
}

5. 实现Array.prototype.findIndex

仅仅和find的返回值有所差别

javascript 复制代码
function myFindIndex (test) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    const _stack = [...this];
    while(_stack.length){
        const _value = _stack.pop();
        if(test(_value, _stack.length - 1, _stack)) return _stack.length - 1;
    }
    return -1;
}
相关推荐
老华带你飞4 分钟前
电影购票|基于java+ vue电影购票系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
老华带你飞5 分钟前
宠物管理|基于java+ vue宠物管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·宠物
释怀不想释怀2 小时前
Ajax,vue生命周期(自动加载页面发出请求)Axios
前端·javascript·ajax
一点晖光2 小时前
ios底部按钮被挡住
前端·ios·微信小程序
cz追天之路8 小时前
华为机考--- 字符串最后一个单词的长度
javascript·css·华为·less
Light608 小时前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟9 小时前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify
ModyQyW10 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
bitbitDown10 小时前
我的2025年终总结
前端
五颜六色的黑10 小时前
vue3+elementPlus实现循环列表内容超出时展开收起功能
前端·javascript·vue.js