常见手写函数

最新推荐文章于 2023-11-30 18:01:54 发布
最新推荐文章于 2023-11-30 18:01:54 发布
阅读量486 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/womuz/article/details/108341459
版权 
function _new(){
    var obj = {}
    var [constructor, ...args] = arguments
    obj.__proto__ = constructor.prototype
    constructor.apply(obj, args)
    return obj
}
function People(name){
    this.name = name
    this.printName = function(){
        console.log(this.name)
    }
}
var p = _new(People,"zrz")

Function.prototype._call = function(context){
    if(typeof this !== "function"){
        throw new Error("not function")
    }
    context = context || window // 方法没有指定新的this指向，默认this指向window
    context.fn = this
    // 参数
    let res = context.fn(...([...arguments].slice(1))) // 注意arguments不能直接直接使用数组的方法，需要利用...将其转化为数组
    delete context.fn
    return res
}

Function.prototype._apply = function(context){ // 参数以数组的形式传递
    if(typeof this !== "function"){
        throw new Error("not function")
    }
    context = context || window // 方法没有指定新的this指向，默认this指向window
    context.fn = this
    let res;
    if(arguments[1]){
        res = context.fn(...arguments[1])
    }else{
        res = context.fn()
    }
    delete context.fn
    return res
}

// bind 返回一个函数 函数没有执行，需要手动调用
// bind参数可以多次传递
// 若bind生成的函数被new，this指向改变为当前函数的实例
Function.prototype._bind = function(context){// 返回function
    if(typeof this !== "function"){
        throw new Error("not function")
    }
    context = context || window
    var _this = this
    var args = [...arguments].slice(1)
    var func = function(){
        return _this.apply(this instanceof func ? this : context, args.concat([...arguments])) 
        // this instanceof func -- 使用new来调用绑定函数，此时绑定函数中this指向是new创建的新对象
    }
    if(this.prototype){ // 原型关系
        func.prototype = this.prototype
    }
    return func
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debounce 防抖</title>
</head>
<body>
    <script>
        function debounce(fn, time){
            var start = Date.now()
            var context = this
            return function(...args) {
                if(Date.now() - start < time){
                    start = Date.now()
                }else{
                    fn.apply(context, args) // 第一次触发执行
                    start = Date.now()
                }
            }
        }
        function debounce2(fn, time){
            var start = Date.now()
            var context = this
            var timeout = null
            return function(...args){
                if(timeout){
                    clearTimeout(timeout)
                    timeout = null
                }
                timeout = setTimeout(() => {
                    fn.apply(context,args) // 最后一次触发执行
                    clearTimeout(timeout)
                    timeout = null
                }, time);
            }

        }
        window.onresize = debounce2(()=>{
            console.log('resize')
        }, 1000)
    </script>
</body>
</html>

//throttle 节流 -- n秒内只执行一次
function throttle(fn, time){
    var start = Date.now() // 利用闭包来保存时间
    // console.log(this, arguments) // this为window
    return (function(){
        // console.log(this, arguments) // this为button        
        if(Date.now() - start >= time){
            // fn.call(context, arguments)
            fn()
            start = Date.now()
        }
    })
}
function throttle2(func, time){
    var context = this,
        timer = null
    return function(...args) {
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            func.apply(context, args)
            clearTimeout(timer)
            timer = null
        }, time)
    }
}
window.onresize = throttle(function() {
    console.log('1111');
}, 1000)

 /**
  * instanceof: 判断一个对象是否是一个对象的实例
  * instanceof右侧对象原型对于左侧对象原型链上
  */
 function _instanceof(left, right){
    let leftValue = left.__proto__
    let rightValue = right.prototype
    while(true){
        if(leftValue === null)return false
        if(rightValue === leftValue)return true
        leftValue = leftValue.__proto__
    }
 }
 var obj = {}
 console.log(_instanceof(obj, Object)) // true
 console.log(obj instanceof Object) // true
 let a = 12
 console.log(_instanceof(a,Number)) // true -- a为基本数据类型，结果为false （_instanceof没有考虑到这种情况）
 console.log(a instanceof Number) // false

 /**
  * 数组扁平化flat -- 数组降维
  * 对原数组没有改变，返回一个新数组
  * 没有参数：默认拉平一层
  * 传入一个参数：拉平的层数
  * 参数为infinity，数组拉平为一维数组
  * 如果原数组中存在空位，跳过
  */
 // 数组完全铺平
 // 借助函数
 function flat(array){
    var _flat = function(array, output) {   
        for(var i = 0; i < array.length; i++) {
            var item = array[i]
            if (Array.isArray(item)) {
                _flat(item, output)
            } else {
                output[output.length] = item;
            }
        }
    }
    var output = []
    _flat(array, output)
    return output;
}
 // forEach遍历数组
 function _flat(array){
    var res = []
    array.forEach(item => {
        if(Array.isArray(item)){ // concat方法进行数组的拼接，concat方法返回一个新数组，不改变原数组
            res = res.concat(arguments.callee(item)) // callee方法递归执行本身函数
        }else{
            res.push(item)
        }
    })
    return res;
 }
 var array = [1,,2,3,[3,4,5,[6,[9,0],7]],8,9]
//  console.log(_flat(array)) // [1,2,3,4,4,5,6,7,8,9]
// 用reduce实现flat
function _flat2(array){
    // reduce利用concat展开一层
    // return array.reduce((pre, cur)=>{
    //     return pre.concat(cur)
    // },[])
    // reduce 全部展开
    return array.reduce((pre, cur)=>{
        return pre.concat(Array.isArray(cur) ? _flat2(cur) : cur)
    },[])
}
// console.log(_flat2(array))
// 利用栈实现flat函数 完全展开数组
function _flat3(){
    var res = []
    var stack = array
    var item = null
    while(stack.length > 0){
        item = stack.shift()
        if(Array.isArray(item)){
            stack.unshift(...item)
        }else{
            res.push(item)
        }
    }
    return res
}
// console.log(_flat3(array))
// 通过传入参数来控制拉平的层数 -- 拉平n层
function _flat4(array, n = 1) {
    // reduce
    return array.reduce((pre, cur)=>{
        return pre.concat((Array.isArray(cur) && n > 1) ? (
            _flat4(cur, n-1)
        ) : cur)
    },[])
}
// console.log(_flat4(array, 2))
// 在原型上重写flat函数，传入参数表示要拉平的层数
Array.prototype._flat = function(num){
    var arr = this
    while(num > 0){
        if(arr.some(item => Array.isArray(item))){ // 数组中有数组元素
            // 拉平一层
            arr = arr.reduce((pre, item)=>{
                return pre.concat(item) // concat不会改变原数组，reduce的return返回值被累加
            },[])
        }
        num--
    }
    return arr
}
console.log(array._flat(2))
// 考虑数组空位的情况
// 上面的reduce实现的数组扁平化就可以跳过空格 -- 大多数数组的处理方法都会跳过空格：ForEach、filter、reduce、every、some

// 柯里化 -- 将一个函数转化为一系列函数，例如：函数add(a,b,c)返回三个参数相加的结果，柯里化为add(a)(b)(c)表示三个数相加 -- 闭包思想实现
function multi2(){
    var args = arguments // 数组
    return function(){
        if(arguments.length === 0){
            return [...args].reduce((pre, item)=>{
                return pre * item
            },1)
        }
        return multi2.call(this, ...args, ...arguments)
    }
}
console.log(multi(2)(3)(4)())

//  方法一
function copy2(obj){
    return JSON.parse(JSON.stringify(obj)) // 遇到undefined和function无效
}
// 方法二
// 深拷贝
function isBaseType(n){
    // 判断是否为基本数据类型
    var typeArr = ['string', 'number', 'boolean', 'null', 'undefined',]
    var type = typeof n
    return typeArr.indexOf(type) !== -1
}
// 闭包对判断类别的方法进行封装
var typeCheck = {}
function createCheckTypeFn(type){
    return (function(value){
        return Object.prototype.toString.call(value) === `[object ${type}]`
    })
}
const types = ['Array','Object','Function']
for(let i=0;i<types.length;i++){
    typeCheck[`is${types[i]}`] = createCheckTypeFn(types[i])
}
function copy(obj){
    if(isBaseType(obj) || typeCheck.isFunction(obj)){
        return obj
    }
    var res;
    if(typeCheck.isArray(obj)){
        res = []
    }else if(typeCheck.isObject(obj)){
        res = {}
    }
    for(let key in obj){
        res[key] = copy(obj[key])
    }
    return res
}
var obj = {
    name: "zrz",
    age: 10,
    scores: {
        math :100,
        english: undefined
    },
    printName: function(){
        console.log(this.name)
    }
}

// 手写Ajax
function ajax({url, type, data, dataType}){
    return new Promise((resolve, reject)=>{
        // 1. 创建异步请求对象
        var xml = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        // 2. 绑定监听事件
        // ajax请求被发送到服务器，需要基于响应的状态，readyState有5中状态 0-4分别表示：请求未初始化、连接建立、请求接收、请求处理、请求完成响应就绪，readySate改变，触发onreadystatechange事件
        xml.onreadystatechange = function(){
            // readyState变为4 并且 返回状态码为200时 接收响应成功
            if(xml.readyState === 4 && xml.status === 200){
                // 转化返回的数据类型
                var res;
                if(dataType.toLowerCase() === 'json'){
                    res = JSON.parse(xml.responseText)
                }else{
                    res = xml.responseText
                }
                resolve(res)
            }
        }
        // 如果是get请求，请求参数添加到url后面
        if(type.toLowerCase() === 'get' && data !== undefined){
            url += '?'+data
        }
        // 3. 打开连接
        xml.open(type, url, true)// true -- 异步
        // 请求方式为post，修改请求头信息
        if(type.toLowerCase() === 'post'){
            // 设置请求头信息
            xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        }
        // 4. 发送请求
        if(type.toLowerCase() === 'post' && data !== undefined){
            xml.send(data) // post方式的send
        }else{
            xml.send(null)
        }
    })
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红绿黄灯</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50px;
        }
        .timer{
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p class="timer"></p>
    <script>
        var config = {
            "red": 3,
            "green": 4,
            "yellow": 2
        }
        var arr = ['green', 'yellow', 'red']
        var box = document.getElementsByClassName('box')[0]
        var timerDom = document.getElementsByClassName('timer')[0]
        function updateTimerStyle(time){
            timerDom.innerHTML = time
        }
        function stayLight(color, time){
            box.style.backgroundColor = color
            timerDom.style.color = color
            updateTimerStyle(time)         
            return createTimer(time)
        }
        function createTimer(time){
            return new Promise(resolve => {
                var timer = setInterval(()=>{
                    time--
                    if(time === 0){
                        clearInterval(timer)
                        timer = null
                        resolve()
                        return;
                    }
                    updateTimerStyle(time)
                }, 1000)
            })
        }
        async function light(){
            while(true){
                await stayLight(arr[0], config[arr[0]])
                await stayLight(arr[1], config[arr[1]])
                await stayLight(arr[2], config[arr[2]])
            }
        }
        light()
    </script>
</body>
</html>

var obj = {
    name: 'ggg',
    age: '12',
    score: 122
}
Object.prototype[Symbol.iterator] = function(){
    var self = this
    var i = 0
    var arr = Object.keys(self)
    var len = arr.length
    return {
        next: function() {
            if(i < len){
                return {
                    value: self[arr[i++]],
                    done: false
                }
            }else{
                return {
                    value: undefined,
                    done: true
                }
            }
        }
    }
}
for(let item of obj){
    console.log(item)
}
前端面试中常见的原生JS手写实现函数
weixin_44685906的博客
05-12 2148
前端面试中常见的原生JS手写实现函数前言实现call函数apply函数bind函数newinstanceof函数继承实现深拷贝深度比较防抖函数节流函数Promise.all()Promise.race()函数柯里化用setTimeout实现setInterval原生JS实现Ajax上拉加载更多发布订阅模式数组转换为二叉树sleep函数map函数reduce函数filter函数forEach函数find函数some函数every函数includes函数join函数用reduce实现mapconcat函数快速排
js代码-手写节流函数
07-14
手写节流函数通常有两种常见的实现方式：时间戳版和定时器版。 1. 时间戳版节流函数： 这种实现方式通过比较当前时间和上一次执行的时间来决定是否执行函数。如果当前时间与上一次执行的时间间隔小于设定的时间间隔...
js代码-实现一个函数判断数据类型
07-15
js代码-实现一个函数判断数据类型
手写函数 function
qq_44311502的博客
05-09 184
Function // 测试是否 纯数字 public static boolean isNum(String str) { if(str==null|| str.length()==0) { return false; } for(int i=0;i<str.length();i++) { char ch=str.charAt(i); ...
手写库函数
willinux的专栏
03-04 394
手写strcpy、memcpy、memmove、strcat、strcmp strcpy、strncpy都不安全，有strcpy_s安全版本 1.strcpy 不仅会复制字符串内容，且会复制字符串结尾符 char* strcpy(char* dest, const char* src) { if (src == NULL || dest == NULL) return NULL; char...
面试中的手写函数
simply the best
12-26 1290
目录: strcpy函数 strstr函数 memmove函数 memcpy函数 memset函数 strcmp函数 string类     1. string()    2.string (const char*str)     3.const char* getStr()const    4.string(conststring& str)    5.stri
函数式编程手写
weixin_44219854的博客
04-06 111
函数式编程 compose 实现以下功能： compose([a, b, c])('参数') => a( b( c('参数') ) ) function compose(funcs) { var len = funcs.length; var index = len - 1; for (let i = 0; i < len; i++) { if (typeof funcs[i] !== "function") { throw new TypeError("Ex
09-手写函数bind.md
最新发布
03-31
在前端领域，掌握如何手写核心函数是面试中常见的考点，其中函数的bind、call和apply方法是面试必考内容。这些方法涉及到函数上下文、参数传递等重要概念，是编写高质量JavaScript代码不可或缺的技能。下面详细介绍...
一些手写JavaScript常用的函数汇总
10-17
### JavaScript常用函数汇总 #### 一、bind、call、apply函数的实现 在JavaScript中，函数的`this`上下文是非常重要的概念。`bind`、`call`和`apply`是改变函数执行上下文中的`this`指向的方法，它们位于`Function...
手写卷积函数.zip
07-31
本项目名为“手写卷积函数.zip”，其核心内容是作者手写代码实现了卷积操作，旨在帮助理解卷积的工作原理，并演示不同卷积核对图像处理的影响。 卷积操作通常由以下几个步骤组成： 1. **定义卷积核**：卷积核是一...
js进阶手写常见函数
军火库
10-22 2585
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
手写Function.call,apply,bind函数
weixin_33978016的博客
05-06 168
前置知识 ... (扩展) 运算符介绍 问腿 动手实现了这三个函数，然而问题在于实现依赖了 ... 运算符，也许可以通过 Function 构造函数来避免使用 ... 运算符。 代码 Function.prototype.myCall = function(context, ...args) { if (typeof this !== 'function') { t...
手写类型判断函数
coder_yujian的博客
11-30 79
【代码】手写类型判断函数。
手写字符串函数《一》
Ethan2048的博客
11-23 452
主要包括strcpy、strcat、strcmp、strlen、strchr、strstr #include &lt;stdio.h&gt; #include &lt;stdlib.h&gt; char *strcpy(char *dest, const char *src) { char *tmp = dest; while ((*dest++ = *src++) != '\0') ...
【面试】手写函数合集
Hustle Everyday
05-05 378
strcpy 函数作用：把src的字符串放到dst的位置。 char* strcpy(char* dst, const char* src) //该函数是没有考虑重叠的 { assert(dst); //当函数返回值不是void时用assert方便一些 assert(src); char* res = dst; while((*dst++ = *s...
手写strcpy函数
alike_meng的博客
01-26 1372
#include<iostream> using namespace std; char* strcpy(char *strSrc, char *strDest) { if ((strSrc == NULL) || (strDest == NULL)) return NULL; char *strDestCopy = strDest; while ((*strDest++ ...
手写JavaScript常用函数详解及实战示例
- 除了上述核心函数外，文档还可能涵盖其他常见的JavaScript内置函数，如`Array`对象的方法（如map(), filter(), reduce()等）、字符串操作函数（如slice(), substring(), replace()等）、逻辑判断函数（如if(), ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值