手写 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) { } }