手动实现一些函数的封装

news/2025/2/22 22:20:50

正文

  • 全局对象
    • node 中的 全局 this指向的是module.exports,而不是全局对象global
    • 浏览器环境下全局this就是window
  • reverse
    - 不改变原数组版,如果想要改变,那么不要deepClone即可
javascript">Array.prototype.myReverse = function () {
    const length = this.length
    const arr = deepClone(this)
    for (let i = 0; i < Math.floor(length / 2); i++) {
        let temp = arr[i]
        arr[i] = arr[length - 1 - i]
        arr[length - 1 - i] = temp
    }
    return arr
}

const arr = ['a', 'b', 'c', 'd']

console.log(arr.myReverse());
console.log(arr)

function deepClone(target) {
    if (typeof target !== 'object') {
        return target
    }

    let result
    if ({}.toString.call(target) === '[object Object]') {
        result = {}
    } else {
        result = []
    }

    for (let key in target) {
        if (target.hasOwnProperty(key)) {
            result[key] = deepClone(target[key])
        }
    }

    return result
}

  • forEach
    • 兼容node环境或者浏览器环境
javascript">Array.prototype.myForEach = function (callback, thisArg = typeof global === 'undefined' ? window : global) {
   for (let i = 0; i < this.length; i++) {
       callback.call(thisArg, this[i], i, this)
   }
}
  • filter
    • 兼容node环境或者浏览器环境
    • 改变原数组
javascript">Array.prototype.myFilter = function (callback, thisArg = typeof global === 'undefined' ? window : global) {
        for (let i = 0; i < this.length; i++) {
            if (!callback.call(thisArg, this[i], i, this)) {
                this.splice(i, 1)
                i--
            }
        }
    }
  • map
    • 兼容node环境或者浏览器环境
    • 改变原数组
javascript">Array.prototype.myMap = function (callback, thisArg = typeof global === 'undefined' ? window : global) {
        for (let i = 0; i < this.length; i++) {
            this[i] = callback.call(thisArg, this[i], i, this)
        }
    }
  • every
    • some同理,省略
    • 兼容node环境或者浏览器环境
javascript">Array.prototype.myEvery = function (callback, thisArg = typeof global === 'undefined' ? window : global) {
   let flag = true

   for (let i = 0; i < this.length; i++) {
       if (!callback.call(thisArg, this[i], i, this)) {
           flag = false
           break
       }
   }

   return flag
}
  • find
    • findIndex同理,省略
    • 兼容node环境或者浏览器环境
javascript">Array.prototype.myFind = function (callback, thisArg = typeof window === "undefined" ? global : window) {
    for (let i = 0; i < this.length; i++) {
        if (callback.call(thisArg, this[i], i, this)) {
            return this[i]
        }
    }
}
  • 字符串是否是回文序列(不区分大小写)
javascript">String.prototype.isPalindrome = function () {
    for (let i = 0; i < Math.floor(this.length / 2); i++) {
        if (this[i].toLowerCase() !== this[this.length - 1 - i].toLowerCase()) {
            return false
        }
    }
    return true
}

String.prototype.isPalindrome = function () {
    return this.toLowerCase() === this.toLowerCase().split('').reverse().join('')
}

结语

如果对你有帮助的话,请点一个赞吧


http://www.niftyadmin.cn/n/1257942.html

相关文章

call,apply,bind 实现

正文 Tips&#xff1a;call bind apply对箭头函数来说&#xff0c;会忽略掉第一个参数&#xff0c;也就是this指向参数&#xff0c;所以不会改变箭头函数this的指向 call实现 this指向绑定传参返回值&#xff0c;看了很多的实现例子&#xff0c;都没有写这个。如果缺少返回值…

js 知识点备忘

长期更新… 前言 有太多知识点&#xff0c;其篇幅不值得写一篇博客&#xff0c;那么就把它们汇总吧&#xff0c;干脆做一个备忘。 如果你阅读了这篇博客&#xff0c;请先了解 有些知识点可能是不准确的&#xff0c;甚至是不正确的&#xff0c;因为我随时都会修改&#xff0c…

Promise 模拟实现

前言 最近很想研究一下Promise的原理&#xff0c;通过查阅资料写出了这篇博客&#xff0c;文章有借鉴参考文档。 正文 本文主要实现的是两个点&#xff0c;基本的Promise和then的链式调用。 代码的所有解释都在注释中 定义状态 //定义状态 const FULFILLED fulfilled con…

js错误处理

正文 try catch 在 JavaScript 中进行错误处理&#xff0c;最常见的方式就是使用try catch语句。将容易出错的代码段放入try块中&#xff0c;即可捕获错误&#xff0c;程序便至少不会因为一个错误而崩溃。 1. catch(error) 所有浏览器都支持error.message属性&#xff0c;它…

vue3.x + typeScript 知识点

前言 不知不觉已经记录了这么多的知识点&#xff0c;更新一下吧。 可能比较杂乱&#xff0c;请谅解。 正文 ref()和reactive()函数都是定义响应式数据的函数&#xff0c;ref更倾向于定义简单类型和数组&#xff0c;reactive定义对象es6语法解构reactive所定义的响应式对象&a…

better-scroll 在vue3

前言 最近在vue3中研究了一下移动端常用的插件better-scroll&#xff0c;方便确实是很方便&#xff0c;不过也是踩了不少的坑。共勉。 PS&#xff1a;本文着重说明笔者遇到的坑点 正文 一. 安装 $ npm i better-scroll二. 引入 在你需要的组件进行局部引入 import Bscrol…

nodejs 中 token 的使用

前言 token 验证&#xff0c;在设计登录注册和一些权限接口时发挥作用。以nodejs为例&#xff0c;谈一谈jsonwebtoken的使用。 正文 一. 安装 $ npm i jsonwebtoken二. 使用 首先&#xff0c;需要提供一个密匙&#xff0c;也就是一个字符串&#xff0c;用于token的生成和验…

JavaScript前端面试题整理

前言 本博客部分题目来自B站UP主峰华前端工程师 笔者觉得有些题目不错&#xff0c;记录一下。 正文 运行结果是&#xff1f; const a (b)>{return b instanceof Function ? b() : b }console.log(a) console.log(a(()>hello)) console.log(a(world)). . . . . . …