JS 【手写】2024最新版

简介: JS 【手写】2024最新版

手写 promise.all

function pAll (_promises) {
    return new Promise((resolve, reject) => {
      // Iterable => Array
      const promises = Array.from(_promises)
      // 结果用一个数组维护
      const r = []
      const len = promises.length
      let count = 0
      for (let i = 0; i < len; i++) {
        // Promise.resolve 确保把所有数据都转化为 Promise
        Promise.resolve(promises[i]).then(o => { 
          // 因为 promise 是异步的,保持数组一一对应
          r[i] = o;
  
          // 如果数组中所有 promise 都完成,则返回结果数组
          if (++count === len) {
            resolve(r)
          }
          // 当发生异常时,直接 reject
        }).catch(e => reject(e))
      }
    })
 }

手写 getType

获取任意数据的数据类型

/**
 * 获取任意数据的数据类型
 *
 * @param x 变量
 * @returns 返回变量的类型名称(小写字母)
 */
function getType(x) {
  // 获取目标数据的私有属性 [[Class]] 的值
  const originType = Object.prototype.toString.call(x); // 以字符串为例:'[object String]'
  // 获取类型属性值中' '的下标
  const spaceIndex = originType.indexOf(" ");
  // 截取类型属性值中' '到末尾']'之间的字符串
  const type = originType.slice(spaceIndex + 1, -1); // 以字符串为例:'String'
  // 将字符串转换为小写
  return type.toLowerCase(); //以字符串为例:'string'
}

手写深拷贝 deepClone

/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
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) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用!!!
            result[key] = deepClone(obj[key])
        }
    }
 
    // 返回结果
    return result
}

手写数组反转 arrReverse

function arrReverse(arr) {
  let newArr = [];
  arr.forEach(function (item) {
    newArr.unshift(item);
  });
 
  return newArr;
}

手写类 class

https://blog.csdn.net/weixin_41192489/article/details/139442546

手写解析 url 中的参数

function getUrlParam(name) {
  let params_str = location.search.substring(1);
  let params_dic = {};
  params_str.split("&").forEach((item) => {
    let paramItem_list = item.split("=");
    if (paramItem_list.length === 2) {
      params_dic[paramItem_list[0]] = paramItem_list[1];
    }
  });
 
  return decodeURIComponent(params_dic[name]);
}

手写简易 jQuery

考虑插件和扩展性

class jQuery {
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
    }
    get(index) {
        return this[index]
    }
    each(fn) {
        for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn) {
        return this.each(elem => {
            elem.addEventListener(type, fn, false)
        })
    }
    // 扩展很多 DOM API
}
 
// 插件
jQuery.prototype.dialog = function (info) {
    alert(info)
}
 
// 扩展
class myJQuery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    // 扩展自己的方法
    addClass(className) {
 
    }
    style(data) {
        
    }
}
相关文章
|
5月前
|
JavaScript
JS中every的简单使用
JS中every的简单使用
|
5月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
JavaScript
|
5月前
|
JSON JavaScript 前端开发
js的版本
【5月更文挑战第7天】js的版本
46 1
|
5月前
|
JavaScript
js的插件
js的插件
32 1
|
5月前
|
存储 JavaScript 索引
js基础笔记(个人)
js基础笔记(个人)
|
5月前
|
JavaScript 前端开发 算法
js手写题:第二章
js手写题:第二章
42 0
|
5月前
|
JavaScript 前端开发 算法
js手写题:第一章
js手写题:第一章
30 0
|
JavaScript 前端开发 数据安全/隐私保护
|
存储 消息中间件 设计模式
JS_手写实现
CSS重点概念精讲 JS_基础知识点精讲 网络通信_知识点精讲