目录
📚前言
如何判断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
-
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
-
判断Number类型
javascript">export function isNumber(value) {return typeof value === 'number';
}
- 在chromium和webkit上的表现判断方法比toString.call更快;
-
new Number()很少被使用
-
判断String类型
- 在chromium和webkit上的表现判断方法比toString.call更快;
-
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版的
文章不定期更新,收藏不迷路~~
如果觉得有收获,麻烦给个赞和关注。你的鼓励是我写作的动力,大家一起学习一起进步。