常见JS手写代码系列总结2

最新推荐文章于 2022-08-22 20:28:51 发布
最新推荐文章于 2022-08-22 20:28:51 发布
阅读量386 收藏
点赞数
分类专栏： 【前端】JS相关知识 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cindy647/article/details/118568929
版权

JS手写系列2

JS常见手写代码题（一）

JS常见手写代码题（二）

32个手写JS_单眼皮的小熊-CSDN博客

  1. promise、promise.all、promise.race
  2. instanceof
  3. 手写一个ajax
  4. 闭包cache
  5. 浅拷贝、深拷贝
  6. 字符串转驼峰
  7. 图片懒加载
  8. 滚动加载

一、手写一个Promise

完整解析：

https://zhuanlan.zhihu.com/p/103651968

function Promise(executor) {
let self = this
this.status = 'pending' //当前状态
this.value = undefined  //存储成功的值
this.reason = undefined //存储失败的原因
this.onResolvedCallbacks = []//存储成功的回调
this.onRejectedCallbacks = []//存储失败的回调
function resolve(value) {
  if (self.status == 'pending') {
    self.status = 'resolved'
    self.value = value
    self.onResolvedCallbacks.forEach(fn => fn());
  }
}
function reject(error) {
  if (self.status == 'pending') {
    self.status = 'rejected'
    self.reason = error
    self.onRejectedCallbacks.forEach(fn => fn())
  }
}
try {
  executor(resolve, reject)
} catch (error) {
  reject(error)
}
}
Promise.prototype.then = function (infulfilled, inrejected) {
let self = this
let promise2
infulfilled = typeof infulfilled === 'function' ? infulfilled : function (val) {
  return val
}
inrejected = typeof inrejected === 'function' ? inrejected : function (err) {
  throw err
}
if (this.status == 'resolved') {
  promise2 = new Promise(function (resolve, reject) {
    //x可能是一个promise，也可能是个普通值
    setTimeout(function () {
      try {
        let x = infulfilled(self.value)
        resolvePromise(promise2, x, resolve, reject)
      } catch (err) {
        reject(err)
      }
    });

  })
}
if (this.status == 'rejected') {

  promise2 = new Promise(function (resolve, reject) {
    //x可能是一个promise，也可能是个普通值
    setTimeout(function () {
      try {
        let x = inrejected(self.reason)
        resolvePromise(promise2, x, resolve, reject)
      } catch (err) {
        reject(err)
      }
    });
  })
}
if (this.status == 'pending') {
  promise2 = new Promise(function (resolve, reject) {
    self.onResolvedCallbacks.push(function () {
      //x可能是一个promise，也可能是个普通值
      setTimeout(function () {
        try {
          let x = infulfilled(self.value)
          resolvePromise(promise2, x, resolve, reject)
        } catch (err) {
          reject(err)
        }
      });
    })
    self.onRejectedCallbacks.push(function () {
      //x可能是一个promise，也可能是个普通值
      setTimeout(function () {
        try {
          let x = inrejected(self.reason)
          resolvePromise(promise2, x, resolve, reject)
        } catch (err) {
          reject(err)
        }
      });
    })
  })
}
return promise2
}
function resolvePromise(p2, x, resolve, reject) {
if (p2 === x && x != undefined) {
  reject(new TypeError('类型错误'))
}
//可能是promise,看下对象中是否有then方法，如果有~那就是个promise
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  try {//为了防止出现 {then:11}这种情况,需要判断then是不是一个函数
    let then = x.then
    if (typeof then === 'function') {
      then.call(x, function (y) {
        //y 可能还是一个promise,那就再去解析，知道返回一个普通值为止
        resolvePromise(p2, y, resolve, reject)
      }, function (err) {
        reject(err)
      })
    } else {//如果then不是function 那可能是对象或常量
      resolve(x)
    }
  } catch (e) {
    reject(e)
  }
} else {//说明是一个普通值
  resolve(x)
}
}

Promise.all

Promise.all是支持链式调用的，本质上就是返回了一个Promise实例，通过resolve和reject来改变实例状态。

Promise.myAll = function(promiseArr) {
  return new Promise((resolve, reject) => {
    const ans = [];
    let index = 0;
    for (let i = 0; i < promiseArr.length; i++) {
      promiseArr[i]
      .then(res => {
        ans[i] = res;
        index++;
        if (index === promiseArr.length) {
          resolve(ans);
        }
      })
      .catch(err => reject(err));
    }
  })
}

Promise.race

Promise.race = function(promiseArr) {
  return new Promise((resolve, reject) => {
    promiseArr.forEach(p => {
      // 如果不是Promise实例需要转化为Promise实例
      Promise.resolve(p).then(
        val => resolve(val),
        err => reject(err),
      )
    })
  })
}

二、实现检测数据类型的instanceof

left表示要检测的数据，right表示类型。其原理是用原型链实现的，
A(实例对象) instanceof B(构造函数)。
function instanceof(left, right){
    let proto = left._proto_
    let prototype = right.prototype
    while(true){
        if(proto === null) return false
        if(proto === prototype) return true
        proto = proto._proto_
    }
}

三、ajax

（1）get请求的ajax

let xhr = new XMLHttpRequest() //1、创建连接
xhr.open('GET', url, true) //2、连接服务器
xhr.onreadystatechange = function () { //4、接收请求，当状态改变时触发这个函数
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {//xhr.responseText是字符串需转换为JSON
            success(JSON.parse(xhr.responseText))
        } else {
            fail(xhr.status)
        }
    }
}
xhr.send(null) //3、发送请求

（2）post请求的ajax

let xhr = new XMLHttpRequest() //1、创建连接
const postData = {
    userName: 'zhangshan',
    passWord: 'xxx'
}
xhr.open('POST', url, true) //2、连接服务器
xhr.onreadystatechange = function () { //4、接收请求，当状态改变时触发这个函数
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {//xhr.responseText是字符串需转换为JSON
            success(JSON.parse(xhr.responseText))
        } else {
            fail(xhr.status)
        }
    }
}
xhr.send(JSON.stringify(postData)) //3、发送请求(需发送字符串，将json转化成字符串)

（3）用Promise优化

function ajax(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest() //1、创建连接
        xhr.open('GET', url, true) //2、连接服务器
        xhr.onreadystatechange = function () { //4、接收请求，当状态改变时触发这个函数
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {//xhr.responseText是字符串需转换为JSON
                    resolve(JSON.parse(xhr.responseText))
                }else if(xhr.status === 404){
                    reject(new Error('404'))
                }
            }
        }
        xhr.send(null) //3、发送请求
    })
} 
const url = ''
ajax(url)
.then(res => console.log(JSON.parse(xhr.responseText)))
.catch(err => console.log(err))

四、闭包写一个cache工具

function creatCache() {
    let data = {} //隐藏数据，外部访问不到
    return {
        get(key) {
            return data[key]
        },
        set(key, val) {
            data[key] = val
        }
    }
}
var c = creatCache()
c.set('name', 'jin')
console.log(c.get('name'))

五、浅拷贝、深拷贝

浅拷贝只复制对象的第一层属性、深拷贝是对对象的属性进行递归复制。

//浅拷贝   （obj1为所要拷贝的对象）
//方式一：原始版本（obj1为所要拷贝的对象，obj2已经默认为一个对象）
function shallowCopy(obj1, obj2){
    for(let key in obj1){
        obj2[key] = obj1[key]
    }
}
//方式一：优化版本（obj为所要拷贝的对象）
function shallowClone(obj){
    if(typeof obj !== 'object' || obj == null){
        //obj是null，或者不是对象和数组，直接返回
        return obj
    }
    let result
    if(obj instanceof Array){
        result = []
    }else{
        result = {}
    }
    for(let key in obj){// for in 遍历对象可枚举属性，包括其原型的属性和方法， 
        if(obj.hasOwnProperty(key)){ //保证key不是原型的属性
            //递归调用
            result[key] = obj[key]
        }
    }
    //返回结果
    return result
}
//方式二
function shallowCopy(obj1, obj2){
    obj2 = Object.assign({}, obj1)
}

//深拷贝   （obj1为所要拷贝的对象）
//方式一：原始版本（obj1为所要拷贝的对象）   
function deepCopy(obj1, obj2){
    for(let key in obj1){// for in 遍历对象可枚举属性，包括其原型的属性和方法， 可用obj1.hasOwnPerporty(key)判断这个实例是否有这个属性
        let item = obj1[key] 
        if(item instanceof Array){ // 不能用typeof  item，因为不能区分对象和数组
            obj2[key] = []
            deepCopy(item, obj2[key])
        }else if(item instanceof Object){
            obj2[key] = {}
            deepCopy(item, obj2[key])
        }else{
            obj2[key] = item
        }
    }
}
//方式一：优化版本（obj为所要拷贝的对象，obj2已经默认为一个对象）
思路：1、判断是否是值类型还是引用类型。2、判断是数组还是对象。3、递归
function deepClone(obj){
    if(typeof obj !== 'object' || obj == null){
        //obj是null，或者不是对象和数组，直接返回
        return obj
    }
    let result
    if(obj instanceof Array){
        result = []
    }else{
        result = {}
    }
    for(let key in obj){// for in 遍历对象可枚举属性，包括其原型的属性和方法， 
        if(obj.hasOwnProperty(key)){ //保证key不是原型的属性
            //递归调用
            result[key] = deepClone(obj[key])
        }
    }
    //返回结果
    return result
}
缺陷：当遇到两个互相引用的对象，会出现死循环的情况。
//方式二  
function deepCopy(obj1, obj2){
    obj2 = JSON.parse(JSON.stringify(obj1))
}
缺陷：这种方法不能拷贝函数属性

六、字符串转驼峰

方法一：分割成数组，利用toUpperCase()转大写，substring（1）为第一个元素后面的元素
var str="border-bottom-color";
function tf(){
  var arr=str.split("-");
  for(var i=1;i<arr.length;i++){
    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
  }
  return arr.join("");
};
tf(str);

方法二：正则
var str="border-bottom-color";
function tf(){
  var re=/-(\w)/g;
  str=str.replace(re,function($0,$1){
    return $1.toUpperCase();
  });
  alert(str)
};
tf(str);

七、图片懒加载

可以给img标签统一自定义属性data-src=‘default.png’，当检测到图片出现在窗口之后再补充src属性，此时才会进行图片资源加载。

function lazyload() {
  const imgs = document.getElementsByTagName('img');
  const len = imgs.length;
  // 视口的高度
  const viewHeight = document.documentElement.clientHeight;
  // 滚动条高度
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
  for (let i = 0; i < len; i++) {
    const offsetHeight = imgs[i].offsetTop;
    if (offsetHeight < viewHeight + scrollHeight) {
      const src = imgs[i].dataset.src;
      imgs[i].src = src;
    }
  }
}

// 可以使用节流优化一下
window.addEventListener('scroll', lazyload);

八、滚动加载

原理就是监听页面滚动事件，分析clientHeight、scrollTop、scrollHeight三者的属性关系。

window.addEventListener('scroll', function() {
  const clientHeight = document.documentElement.clientHeight;
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  if (clientHeight + scrollTop >= scrollHeight) {
    // 检测到滚动至页面底部，进行后续操作
    // ...
  }
}, false);
溜溜的阿溜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS常用算法实现代码
01-21
本文的主要目的是帮助大家熟悉熟悉常用的几个算法用JS的实现，具体内容如下 （1）数组去重 原理：定义一个对象obj，然后把数组元素作为obj的属性名，利用属性名是否重复进行判重 var unique = function(arr){ let obj = {}; let newArr = []; arr.forEach(function(x){ if(!obj[x]){ //如果对象中没有该元素对应的属性 obj[x] = true; newArr.push(x); } }); return newArr; } （2）使用快速排序算
JS代码大全
思维加速度
12-14 1447
1.  将彻底屏蔽鼠标右键Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->oncontextmenu="window.event.returnvalue=false"Code highlighting produ
js日常小作业
qq_48135073的博客
08-22 502
js日常小作业
js需要掌握手写的方法
Dayer的博客
03-06 661
1、手写深拷贝 function deepClone(obj = {}) { if (typeof obj != "object" || obj == null) { return obj; } let result; if (obj instanceof Array) { result = []; } else { result = {}; } for (let .
JS常见手写代码汇总
qq_40022256的博客
06-14 305
二、lazyman 三、LRU 最近最少使用 四、数组扁平化 //数组深度扁平化 五、获取数据类型 六、深拷贝考虑到 Map Set WeakMap WeakSet等特殊类型 七、数组转树 /* const arr = [ { id: 1, name: ‘部门A’, parentId: 0 }, // 0 代表顶级节点，无父节点 { id: 2, name: ‘部门B’, parentId: 1 }, { id: 3, name: ‘部门C’, parentId: 1 }, { id: 4, na
js代码-手写代码复习
07-14
在JavaScript（JS）编程中，手写代码是提升技能和理解力的重要实践方式。通过复习手写的JS代码，我们可以深入理解语言的核心概念、语法结构以及常见的编程技巧。在这个"js代码-手写代码复习"的资源中，包含了`main....
js代码-手写代码练习
07-16
在JavaScript（简称JS）编程领域，手写代码练习是提升技能和理解力的重要途径。"js代码-手写代码练习"这个主题涵盖了多种JavaScript基础知识，包括语法、数据类型、控制结构、函数、对象以及DOM操作等。下面我们将...
js代码-手写JS代码练习
07-14
这个“js代码-手写JS代码练习”资源显然旨在帮助学习者提升JavaScript编程技能，通过实践编写JavaScript代码来巩固理论知识。 `main.js` 文件通常是JavaScript项目中的主入口文件，它包含了程序的核心逻辑或者初始...
JavaScript常见手写方法
Dimuzero的博客
09-10 287
1.手写instanceof function myInstanceof(A, B) { a = A.__proto__; b = B.prototype; while (true) { if (a == b) { return true; } else { return false; } a = A.__proto__; } } 2.手写
JS手写实现call、apply、bind(超详细)
CreatorRay的博客
02-22 2837
好久不更新了哦，最近又在找工作。复习一下JS中非常重要的一部分内容，关于this指向的问题 常规的this指向可以简单总结为谁引用就指向谁，找不到谁引用就指向window。 this指向中还有非常重要的一部分，就是改变this指向的方法。原生JS提供了call、apply、bind三种方式来修改this指向，三种方式各有特点，各有应用场景。 在如今的前端面试中，会用call、apply、bind已经达不到要求了，要能够知道原理并手写实现。 原生call的使用 先看一下原生call的使用方式。 funct.
跨站请求数据jsonp手写原生js代码实现
一只京大的博客
03-08 3251
JSONP --来自百度百科JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的&lt;script&gt; 元素是一个例外。利用 &lt;script&gt; 元素的这个开放策...
js手写代码
lee_slly的博客
12-13 5446
function myInstanceof(instance, Constructor){ if(typeof instance !== "object" || instance === null){ throw 'instance is error'; } if(typeof Constructor !== "function"){ throw 'Constructoris error'; } let prototype =.
手写20个常用的简易js方法
酒客的博客
01-08 647
Array篇 定义一个测试数组 // 自定义测试数组 const players=[ {name:'kobe',age:40}, {name:'james',age:30}, {name:'curry',age:28}, {name:'coder',age:20}, {name:'liu',age:21}, ] 1、forEach 参数代表含义 item：遍历项 index：遍历项的索引 arr：数组本身 // forEach
JS面试手写代码
weixin_34062469的博客
04-11 864
Github 代码实现案例 二叉搜索树 中序、先序、后序遍历 搜索树中的值 vue设计原理简单实现:数据劫持、依赖收集、模板编译、双向绑定、计算属性 spa单页路由设计简单实现 浏览器缓存交互实现 npm发布li-server静态服务器编写 node events模块实现 发布订阅 JavaScript数据结构与算法pdf资源 百度网盘 密码:ll8d 如果不喜欢看pdf可以看下面在网上发现一...
前端面试宝典之手写代码篇
Corey
11-29 1084
手写事件侦听器，并要求兼容浏览器 var eventUtil = { getEvent: function (event) { return event || window.event; }, getTarget: function (event) { return event.target || event.srcElement; ...
一些常见的js手写代码题
m0_46239267的博客
03-19 228
实现call、apply、bind，实现new、实现instanceof、组合继承、深浅拷贝、防抖和节流、模拟事件代理和事件绑定、promise、拷贝函数、数组扁平化、去重、获取url参数并转化成对象、函数柯里化、object.create()、proxy代理、图片懒加载、滚动加载 插入几万条数据、字符串解析
原生JS大揭秘—JS代码底层运行原理
weixin_34247155的博客
02-09 1545
JavaScript是一种基于对象的动态、弱类型脚本语言（以下简称JS），是一种解释型语言，和其他的编程语言不同，如java/C++等编译型语言，这些语言在代码执行前会进行通篇编译，先编译成字节码（机器码）。然后在执行。而JS不是这样做的，JS是不需要编译成中间码，而是可以直接在浏览器中运行，JS运行过程可分为两个阶段，编译和执行。(可参...
一些常见的手写js题目
qq_35430000的博客
04-28 530
1、call Function.prototype.call2 = function(content = window) { content.fn = this; let args = [...arguments].slice(1); let result = content.fn(...args); delete content.fn; return re...
【前端面试】同学，你会手写代码吗？
weixin_34159110的博客
04-01 435
如果您发现错误，请一定要告诉我，拯救一个辣鸡（但很帅）的少年就靠您了！ CSS 部分 两栏布局 要求：垂直两栏，左边固定右边自适应。 查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
使用js手写快速排序
最新发布
08-18
下面是使用JavaScript手写快速排序的代码： ```javascript function quickSort(arr) { if (arr.length ) { return arr; } const pivot = arr ) { left.push(arr[i]); } else { right.push(arr[i]); } } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值