当前位置：首页 > news >正文

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

news 2024/10/22 11:52:26

📚前言

如何判断Dom节点

Object.keys

Object.assign

Object.create

判断Number类型

判断String类型

判断Function类型

判断Object类型

判断Array类型

判断RegExp类型

遍历forEach

遍历map

indexOf

📚前言

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

如何判断Dom节点

export function isDom(value) {return typeof value === 'object'&& typeof value.nodeType === 'number'&& typeof value.ownerDocument === 'object'
}

Object.keys

Object.assign

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;
}

const protoKey = '__proto__';

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

Object.create

判断Number类型

export function isNumber(value) {return typeof value === 'number';
}

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

判断String类型

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

判断Function类型

export function isFunction(value: any): value is Function {return typeof value === 'function';
}

判断Object类型

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

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

判断Array类型

export function isArray(value) {if (Array.isArray) {return Array.isArray(value);}return objToString.call(value) === '[object Array]';
}

判断RegExp类型

const objToString = Object.prototype.toString;

遍历forEach

const arrayProto = Array.prototype;
const nativeForEach = arrayProto.forEach;

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

遍历map

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;}
}