前端工具类大全--【成果版】

news/2024/10/23 9:25:17/

目录

📚前言 

如何判断Dom节点

Object.keys 

 Object.assign

Object.create 

 判断Number类型

判断String类型

判断Function类型

判断Object类型 

判断Array类型

判断RegExp类型 

遍历forEach

遍历map 

indexOf 


 📚前言 

前端最苦恼的问题之一就是兼容性问题。所以这篇文章它来了,我们来实现一下常见方法的兼容性写法以此来提高我们代码的健壮性。(欢迎大家来探讨~~) 

  • 如何判断Dom节点

javascript">export function isDom(value) {return typeof value === 'object'&& typeof value.nodeType === 'number'&& typeof value.ownerDocument === 'object'
}
  • Object.keys 

只需要当前obj的key,忽略其原型链
  •  Object.assign

javascript">export function extend(target, obj) {if (Object.assign) {Object.assign(target, obj)} else {for (let key in obj) {if (obj.hasOwnProperty(key) && key !== protoKey) {target[key] = obj[key]}}}return target;
}
javascript">const protoKey = '__proto__';

同样也是在当前obj内操作并且忽略key === '__proto__'的情况,这个是在处理原型污染系统环境!

  • Object.create 

extend函数如上
  •  判断Number类型

javascript">export function isNumber(value) {return typeof value === 'number';
}
  1. 在chromium和webkit上的表现判断方法比toString.call更快;
  2. new Number()很少被使用

  • 判断String类型

  1. 在chromium和webkit上的表现判断方法比toString.call更快;
  2. new String()很少被使用

  • 判断Function类型

javascript">export function isFunction(value: any): value is Function {return typeof value === 'function';
}
  • 判断Object类型 

双感叹号用于判断truly还是falsly

所以和上面的Object.keys相呼应了。tip:如果type === 'function',则Object.keys返回[]空数组 

  • 判断Array类型

javascript">export function isArray(value) {if (Array.isArray) {return Array.isArray(value);}return objToString.call(value) === '[object Array]';
}
  • 判断RegExp类型 

javascript">const objToString = Object.prototype.toString;
  • 遍历forEach

javascript">const arrayProto = Array.prototype;
const nativeForEach = arrayProto.forEach;

部分地方我做了注释,至于call方法为什么传那些参数,可参考MDN手册

  • 遍历map 

javascript">export function map(arr, cb, context) {if (!arr) {return [];}if (!cb) {return slice(arr);}if (arr.map && arr.map === nativeMap) {return arr.map(cb, context);} else {const result = [];for (let i = 0, len = arr.length; i < len; i++) {result.push(cb.call(context, arr[i], i, arr));}return result;}
}

javascript">const nativeMap = arrayProto.map;

它和forEach很像,就差一个返回值的输出

  • indexOf 

来个TS版的

文章不定期更新,收藏不迷路~~


 如果觉得有收获,麻烦给个赞和关注。你的鼓励是我写作的动力,大家一起学习一起进步。


http://www.ppmy.cn/news/1541285.html

相关文章

Flink Taskmanager 内存模型详解

配套讲解视频&#xff1a;Flink TaskManager 内存模型详解_哔哩哔哩_bilibili

二叉树展开为链表

二叉树展开为链表 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同…

el-table 表格设置必填项

el-table 表格设置必填项 要在 el-table 中集成 el-form 来设置必填项&#xff0c;并进行表单验证&#xff0c;可以使用 Element UI 提供的表单验证功能。下面是一个详细的示例&#xff0c;展示了如何在 el-table 中使用 el-form 来设置必填项&#xff0c;并进行验证。 示例代…

Oracle19.25发布,如何打补丁到19.25

一. 19.25发布 2024年10月16日 19c 19.25补丁发布 文档编号19202410.9&#xff0c;文档编码规则&#xff1a; 19&#xff08;版本号&#xff09;2024&#xff08;年份&#xff09;07&#xff08;当季的第一个月01/04/07/10&#xff09;.9 一般每个季度的首月中15号左右发布…

2、图像的特征

一、角点检测-Harris 1、cv2.cornerHarris角点检测函数 在 cv2.cornerHarris 函数中&#xff0c;Sobel 算子用于计算图像的梯度&#xff0c;这是 Harris 角点检测的第一步。 cv2.cornerHarris(src, blockSize, ksize, k, dstNone, borderTypeNone)下面是各个参数的详细解释&…

lua while循环

软考鸭微信小程序 过软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 Lua作为一种小巧精致的语言&#xff0c;特别适用于嵌入其他程序提供脚本支持。在编程中&#xff0c;循环结构是不可或缺的一部分&#xff0c;而while循环则是…

数据分析题面试题系列2

一.如何估算星巴克一天的营业额 a.需求澄清&#xff1a;区域&#xff1f;节假日&#xff1f;产品范围&#xff1f; b.收入销售杯数*单价&#xff08;营业时间*每小时产能*每小时产能利用率&#xff09;*平均单价 Hypo该星巴克门店的营业时间为12小时&#xff08;取整&#x…

苍穹外卖学习笔记(二十六)

来电提醒与客户催单 用户下单并且支付成功后&#xff0c;需要第一时间通知外卖商家。通知方式有&#xff1a; 语音播报弹出提示框 实现步骤&#xff1a; 通过WebSocket实现管理端页面和服务端保持长连接状态当客户支付后&#xff0c;调用WebSocket的相关API实现服务端向客户…