前端手写代码大全

最新推荐文章于 2024-07-18 17:55:00 发布
最新推荐文章于 2024-07-18 17:55:00 发布
阅读量1.4k 收藏 5
点赞数
文章标签： 前端 面试 json ViewUI
原文链接：https://juejin.im/post/5cb423f56fb9a06856568104
版权

1， apply

code

Function.prototype.myApply = function () {
    let thisObj = arguments[0] || window;
    let args = arguments[1];
    thisObj.fn = this;
    let res = thisObj.fn(...args);
    delete thisObj.fn;
    return res;
}
复制代码

test:

2， call

code

Function.prototype.myCall = function () {
    let thisObj = arguments[0] || window;
    let args = [...arguments].slice(1);
    thisObj.fn = this;
    let res = thisObj.fn(...args);
    delete thisObj.fn;
    return res;
}
复制代码

test:

3， bind

code:

Function.prototype.myBind = function () {
   let thisObj = arguments[0] || window;
   let fn = this;
   let args = [...arguments].slice(1);
   return function F () {
       if (this instanceof F) {
           return new fn(...args, ...arguments)
       } else {
           return fn.apply(thisObj, args.concat([...arguments]));
       }
   }
}
复制代码

test

4， 节流

code

function throttle (fn, time) {
    let startTime = +new Date();
    return function F () {
        let lastTime = +new Date();
        if (lastTime - startTime >= time) {
            fn.apply(this, [...arguments]);
            startTime = lastTime;
        }
    }
}
复制代码

test

5， 防抖

code

function antiShake (fn, time, immediate) {
    let time = null;
    return function F () {
        if (immediate) {
           fn.apply(this, [...arguments]);
        }
        if (time) {
            clearInterval(time);
        }
        setInterval(function () {
            fn.apply(this, [...arguments]);
        }, time);
    }
}
复制代码

6， 继承

code

 function Animal(name) {
     this.name = name;
 }
 Animal.prototype.say = function () {
     console.log('my name is:' + this.name);
 }
 function Dog(name, age) {
     Animal.apply(this, [name]);
     this.age = age;
 }
 Dog.prototype = Object.create(Animal.prototype, {
     constructor: {
         value: Dog,
         enumable: false,
         writable: true,
         configurable: true
     }
 });
 var a = new Dog('xiaowang', 1)
复制代码

code

7， instanceof

code

function myInstanceof(left, right) {
    var r = right.prototype;
    left = left.__proto__;
    while(true) {
        if (left === null) {
            return false;
        } else if (left === r) {
            return true;
        }
        left = left.__proto__;
    }
}
复制代码

test

8， new

code

  function myNew(fn, ...args) {
      let obj = {};
      obj.__proto__ = fn.prototype;
      var res = fn.apply(obj, args);
      return res instanceof Object ? res : obj;
  }
复制代码

test

9， 柯里化

code

function currying (fn, ...args) {
    if (fn.length <= args.length) {
        return fn(...args);
    }
    return function F() {
        return currying(fn, ...args, ...arguments);
    }
}
复制代码

test

10，深拷贝

方法1

code

JSON.parse(JSON.stringify(obj))
复制代码

test

缺点：

  1. 函数无法序列化
  2. 无法解决循环嵌套
  3. underfined 无法序列化
  4. symbol 无法序列化

##方法2

code

function messageChannelClone(obj) {
    return new Promise((resolve, reject) => {
        const {port1, port2} = new MessageChannel();
        port2.onmessage = res => resolve(res.data);
        port1.postMessage(obj);
    })
}
var b = {
    info: {
        name: 'jin'
    }
}
messageChannelClone(b).then(res=>{
    console.log(res);
})
复制代码

test

缺点：

  1. 函数无法序列化
  2. symbol 无法序列化

方法3 使用—lodash库

方法4 自己简单模拟实现

code

function clone(obj) {
    let res;
    if (obj && obj instanceof Object) {
        res = Array.isArray(obj) ? [] : {};
        for (let item in obj) {
            res[i] = obj[item] instanceof Object ? clone(obj[item]) : obj[item];
        }
    } else {
        res = obj;
    }
    return res;
}
复制代码

11，JSON.parse

方法1

code

var a = '{name: "jiweijin"}'
eval('(' + a + ')')
复制代码

方法2

var a = '{name: "jiweijin"}'
new Function('return ' + a)()
复制代码

12，JSON.stringify

code

function jsonStringify(obj) {
    let type = typeof obj;
    if (type !== "object") {
        if (/string|undefined|function/.test(type)) {
            obj = '"' + obj + '"';
        }
        return String(obj);
    } else {
        let json = []
        let arr = Array.isArray(obj)
        for (let k in obj) {
            let v = obj[k];
            let type = typeof v;
            if (/string|undefined|function/.test(type)) {
                v = '"' + v + '"';
            } else if (type === "object") {
                v = jsonStringify(v);
            }
            json.push((arr ? "" : '"' + k + '":') + String(v));
        }
        return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")
    }
}
复制代码

13，ajax

code

简单版

function myHttp(opt) {
  let url = opt.url || '';
  let method = opt.method || 'POST';
  let data = opt.data || {};
  let http = new XMLHttpRequest();
  if (method.toUpperCase === 'GET') {
    var dataStr = '';
    for (let item in data) {
        dataStr += item + '=' + data[item];
    }
    url += '?' + dataStr;
    http.open(method, url);
    http.send(null)
  } else {
     http.open(method, url)
     http.send(data)
  }
  http.onreadystatechange = function () {
      if (http.readystate === 4 && http.status === 200) {
          opt.success(http.responseText)
      }
  }
}

复制代码

14，promise

code

/**
 * 1. new Promise时，需要传递一个 executor 执行器，执行器立刻执行
 * 2. executor 接受两个参数，分别是 resolve 和 reject
 * 3. promise 只能从 pending 到 rejected, 或者从 pending 到 fulfilled
 * 4. promise 的状态一旦确认，就不会再改变
 * 5. promise 都有 then 方法，then 接收两个参数，分别是 promise 成功的回调 onFulfilled, 
 *      和 promise 失败的回调 onRejected
 * 6. 如果调用 then 时，promise已经成功，则执行 onFulfilled，并将promise的值作为参数传递进去。
 *      如果promise已经失败，那么执行 onRejected, 并将 promise 失败的原因作为参数传递进去。
 *      如果promise的状态是pending，需要将onFulfilled和onRejected函数存放起来，等待状态确定后，再依次将对应的函数执行(发布订阅)
 * 7. then 的参数 onFulfilled 和 onRejected 可以缺省
 * 8. promise 可以then多次，promise 的then 方法返回一个 promise
 * 9. 如果 then 返回的是一个结果，那么就会把这个结果作为参数，传递给下一个then的成功的回调(onFulfilled)
 * 10. 如果 then 中抛出了异常，那么就会把这个异常作为参数，传递给下一个then的失败的回调(onRejected)
 * 11.如果 then 返回的是一个promise,那么需要等这个promise，那么会等这个promise执行完，promise如果成功，
 *   就走下一个then的成功，如果失败，就走下一个then的失败
 */

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
function Promise(executor) {
    let self = this;
    self.status = PENDING;
    self.onFulfilled = [];//成功的回调
    self.onRejected = []; //失败的回调
    //PromiseA+ 2.1
    function resolve(value) {
        if (self.status === PENDING) {
            self.status = FULFILLED;
            self.value = value;
            self.onFulfilled.forEach(fn => fn());//PromiseA+ 2.2.6.1
        }
    }

    function reject(reason) {
        if (self.status === PENDING) {
            self.status = REJECTED;
            self.reason = reason;
            self.onRejected.forEach(fn => fn());//PromiseA+ 2.2.6.2
        }
    }

    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

Promise.prototype.then = function (onFulfilled, onRejected) {
    //PromiseA+ 2.2.1 / PromiseA+ 2.2.5 / PromiseA+ 2.2.7.3 / PromiseA+ 2.2.7.4
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };
    let self = this;
    //PromiseA+ 2.2.7
    let promise2 = new Promise((resolve, reject) => {
        if (self.status === FULFILLED) {
            //PromiseA+ 2.2.2
            //PromiseA+ 2.2.4 --- setTimeout
            setTimeout(() => {
                try {
                    //PromiseA+ 2.2.7.1
                    let x = onFulfilled(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    //PromiseA+ 2.2.7.2
                    reject(e);
                }
            });
        } else if (self.status === REJECTED) {
            //PromiseA+ 2.2.3
            setTimeout(() => {
                try {
                    let x = onRejected(self.reason);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });
        } else if (self.status === PENDING) {
            self.onFulfilled.push(() => {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(self.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                });
            });
            self.onRejected.push(() => {
                setTimeout(() => {
                    try {
                        let x = onRejected(self.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                });
            });
        }
    });
    return promise2;
}

function resolvePromise(promise2, x, resolve, reject) {
    let self = this;
    //PromiseA+ 2.3.1
    if (promise2 === x) {
        reject(new TypeError('Chaining cycle'));
    }
    if (x && typeof x === 'object' || typeof x === 'function') {
        let used; //PromiseA+2.3.3.3.3 只能调用一次
        try {
            let then = x.then;
            if (typeof then === 'function') {
                //PromiseA+2.3.3
                then.call(x, (y) => {
                    //PromiseA+2.3.3.1
                    if (used) return;
                    used = true;
                    resolvePromise(promise2, y, resolve, reject);
                }, (r) => {
                    //PromiseA+2.3.3.2
                    if (used) return;
                    used = true;
                    reject(r);
                });

            }else{
                //PromiseA+2.3.3.4
                if (used) return;
                used = true;
                resolve(x);
            }
        } catch (e) {
            //PromiseA+ 2.3.3.2
            if (used) return;
            used = true;
            reject(e);
        }
    } else {
        //PromiseA+ 2.3.3.4
        resolve(x);
    }
}


复制代码

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

weixin_34362790
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端手写代码整理
努力努力再努力w
02-06 593
面试练习
程序员，都去写一写前端代码吧
四火专栏
01-19 234
你可以认为我是一个极端的人，就像有许多人专注于自己的领域而不屑于其它“肤浅”的工作范畴一样。比如我见过不少认为做portal没有技术含量的判定，做工程都是充满苦逼行为的言论，最近则还有那些“大数据”崇拜者的疯狂吐槽……我的极端则有些不同，我的极端在于我认为绝大多数优秀的程序员，都要尝试多方面的事情。并不只有底层开发或者机器学习充满睿智的挑战，我做了几年网站，很难说这就是我最初的兴趣，虽然也在接触...
前端常见手写代码
weixin_43817097的博客
07-18 114
防抖函数、节流函数、new 关键字、instanceof 类型判断、call、apply、bind、深拷贝、使用 for of 遍历对象、实现 a == 1 && a == 2 && a == 3 为真
前端面试题之手写代码篇
爱是与世界平行
06-02 2456
原文地址：前端面试题之手写代码篇 git地址：https://gitee.com/AiShiYuShiJiePingXing/lovebetterworld 点击前往GIT 一、JavaScript 基础 1. 手写 Object.create 思路：将传入的对象作为原型 function create(obj) { function F() {} F.prototype = obj return new F() } 2. 手写 instanceof 方法 instanc..
前端手写系列
越思考越清晰
12-07 1744
js原生类 效果
前端常用手写代码
weixin_34220179的博客
05-21 670
个人去面试时。有时会遇到一些手写代码题。 花了点时间来总结一下，希望对大家有所帮助。 1，call的模拟实现 Function.prototype.myCall = function(context, ...rest){ context = context || window; let fn = this; context.fn = fn; context.fn(....
前端面试题-手写代码实现
08-04
在前端面试中，手写代码实现是衡量一个开发者技术实力的重要环节。这涉及到对编程基础、算法理解、问题解决能力和代码质量的综合考察。以下将分别解析标题、描述中的知识点，并针对每个文件名提供相关的内容。 标题...
手写chatGPT前端代码
最新发布
08-05
手写chatGPT 前端代码 fetch 解析 text/event-stream 格式的文件 text/event-stream chatGPT
「2021」高频前端面试题汇总之手写代码篇.pdf
12-14
"前端面试题汇总之手写代码篇" 本资源主要对前端面试题的常见问题进行了总结和分类，涵盖了 JavaScript 基础知识、手写代码等方面的知识点。下面是对本资源中提到的知识点的详细解释： 1. 手写 Object.create 方法...
「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）
12-04
1. 实现一个new操作符 new操作符做了这些事： 它创建了一个全新的对象。 它会被执行[[Prototype]]（也就是__proto__）链接。 它使this指向新创建的对象。。 通过new创建的每个对象将最终被[[Prototype]]链接到这...
前端面试大厂手写源码系列（上）
qq_40588413的博客
03-23 3717
如今前端攻城狮的要求越来越高，会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理，以此来证明你对该知识点的理解程度。接下来，我将列举我面试时以及自认为比较重要的CSS部分、JS部分常见手写原理题！后续分享Vue全家桶、React全家桶手写原理图，敬请期待！ JS部分 手写原生Ajax 平时项目开发中，一定会用到ajax请求后端接口获取数...
面试|前端手写代码（持续更新）
weixin_49179577的博客
02-22 827
按照自己的学习进度进行更新； 主要分为以下几个部分：（1）JS基础，（2）CSS，（3）数据处理，（4）场景应用，… JS基础 1. 手写new操作符？ （1）new？ new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例 （2）在new的过程中干了什么？ 基本四步走 新建一个空对象obj 链接到原型：将obj的[[prototype]]属性指向构造函数的原型，即obj.[[prototype]] = construc.prototype （不懂的可以看图理解一下【图开源..
快速编写前端代码
computer408的博客
03-20 501
前端代码速写 简称式速写（在VS编辑器中） 不同编辑器的速写常用代码也不一样 例子 1fz60 font-size:60px; 2!与！！！ ！ <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <...
20212022最新Web前端经典面试题笔试题之前端手写功能(含答案)史上最全【笔试题】
南北极之间
02-24 832
前端面试中常见的手写功能
前端四大手写
如果有了可惜
07-31 478
转载的 手写 bind bind 用法不难，一句话解释就是把新的 this 绑定到某个函数 func 上，并返回 func 的一个拷贝。使用方法如下： let boundFunc = func.bind(thisArg[, arg1[, arg2[, …argN]]]) 那怎么实现呢？我认为手写 bind 可以分为三个等级： 初级：只用 ES6 新语法 优点：因为可以使用 const 、… 操作符，代码简洁 缺点：不兼容 IE 中级：使用 ES5 语法 优点：兼容 IE 缺点：参数要用Array.proto
前端手写汇总
qq_40511157的博客
12-26 297
1. 手写防抖与节流 // 时间戳实现的节流函数 function throttle (cb, waitTime) { let previous = 0; return function (...args) { let now = new Date(); let context = this; if (now - previous > waitTime) { previous = now;
前端设计代码编写
qq_38512857的博客
09-12 391
const getList = (size) => Array(size).fill(1); const sum = (list) => { if (list.length === 1) return list[0]; const prev = list.pop(); return prev + sum(list);const getList = (size) => Array(size).fill(1); const sum = (list) => { if (list.lengt
10个常见的前端手写功能，你会多少？
weixin_45178716的博客
04-06 470
万丈高楼平地起，地基打的牢，才能永远立于不败之地。今天给大家带来的是10个常见的 JavaScript 手写功能，重要的地方已添加注释。有的是借鉴别人的，有的是自己写的，如有不正确的地方，欢迎多多指正。1、防抖functiondebounce(fn,delay){ lettimer returnfunction(...args){ if(t...
六个初级前端要掌握的手写
eswang的CSDN博客
02-13 324
前言 回调函数为什么会丢失this，因为回调时的传参某种程度上也是一种隐式赋值，因此会造成隐式丢失的情况。 防抖 const debouce = (fn, delay) => { let timer = null return (...args) => { clearTimeout(timer) timer = setTimeout(() => { ...
提升前端面试竞争力：手写代码实战与规范指南
在IT行业的前端面试中，手写代码是一项重要的评估技能，因为这直接反映出应聘者的基础能力和编码习惯。面试官通过考察代码规范性、功能完整性和鲁棒性来判断候选人是否具备编写高质量代码的能力。代码规范性不仅包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值