来源 | https://javascript.plainenglish.io/7-super-useful-utility-functions-i-learned-from-vue3-adc6c93067b

在本文中，我将与您分享7个我在 Vue3 中学习到的一些实用功能小技巧，我把源码放在这里。这些函数具有高度的可重用性，对日常开发很有用，所以，让我们开始吧！

1、判断一个字符串是否以on开头

const onRE = /^on[^a-z]/;const isOn = (key: string) => onRE.test(key);console.log(isOn('onClick')); // trueconsole.log(isOn('onclick')); // false

我们可以看到它使用了正则匹配。它将匹配以 on 开头且下一个字符不是 a 到 z 的字母。

2、确定property是否为自己的

const hasOwnProperty = Object.prototype.hasOwnProperty;const hasOwn = (val: object, key: string | symbol): key is keyof typeof val =>  hasOwnProperty.call(val, key);const testObj = { name: 1 };console.log(hasOwn(testObj, 'name')); // trueObject.getPrototypeOf(testObj).age = 2;console.log(hasOwn(testObj, 'age')); // false

此方法使用 Object.prototype.hasOwnProperty 来确定键是否是对象本身的属性。

当我们使用 Object.getPrototypeOf() 获取 testObj 的原型并在其上设置 age 属性时，hasOwn 将返回 false。

除此之外，它在这里使用 TypeScript 的 is 关键字，它创建了一个用户定义的类型保护，在运行时检查以确保它是我们在特定范围内期望的类型。

3、判断是否为Promise

const isObject = (val: unknown): val is Record<any, any> =>  val !== null && typeof val === 'object';const isFunction = (val: unknown): val is Function => typeof val === 'function';const isPromise = <T = any>(val: unknown): val is Promise<T> => {  return isObject(val) && isFunction(val.then) &&      isFunction(val.catch);};console.log(isPromise(new Promise(() => {}))); // trueconsole.log(isPromise(async function () {})); // falseconsole.log(isPromise(function* () {})); // false

此方法借用isObject判断当前值对象，借用isFunction判断当前值的then和catch属性是函数。

他们三个也都使用 is 关键字。此外，isPromise 还使用泛型来传递 Promise 的 Result 类型。

4、判断是否为整数字符串

const isString = (val: unknown): val is string => typeof val === 'string';const isIntegerKey = (key: unknown) =>  isString(key) &&  key !== 'NaN' &&  key[0] !== '-' &&  '' + parseInt(key, 10) === key;console.log(isIntegerKey('10')); // trueconsole.log(isIntegerKey('010')); // falseconsole.log(isIntegerKey('3.0')); // falseconsole.log(isIntegerKey('Vue')); // false

先用isString判断是否为字符串类型，再判断是否为'NaN'且首字符不是-，最后用空字符串将parseInt转换后的十进制数转为字符串，判断是否为等于原始字符串。

5、缓存字符串计算结果

const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {  const cache: Record<string, string> = Object.create(null);  return ((str: string) => {    const hit = cache[str];    return hit || (cache[str] = fn(str));  }) as any;};const getUpperCase = cacheStringFunction((str: string): string =>  str.toUpperCase(),);console.log(getUpperCase('a')); // Aconsole.log(getUpperCase('a')); // A

这是一个高阶函数，内部使用闭包来缓存之前的计算结果，如果再次调用时发现已经计算过，则返回之前的结果。

6、连字符转驼峰/驼峰转连字符

const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {  const cache: Record<string, string> = Object.create(null);  return ((str: string) => {    const hit = cache[str];    return hit || (cache[str] = fn(str));  }) as any;};const camelizeRE = /-(\w)/g;const camelize = cacheStringFunction((str: string): string => {  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));});const hyphenateRE = /\B([A-Z])/g;const hyphenate = cacheStringFunction((str: string) =>  str.replace(hyphenateRE, '-$1').toLowerCase(),);console.log(camelize('on-click')); // onClickconsole.log(camelize('test-a-click')); // testAClickconsole.log(hyphenate('onClick')); // on-clickconsole.log(hyphenate('testAClick')); // test-a-click

以上两种方法都使用正则表达式匹配和使用String.prototype.replace()替换字符，并且都被上一节介绍的缓存函数包裹，也就是说一旦需要处理相同的字符串，会直接返回缓存结果。

7、获取当前环境的全局对象

let _globalThis: any;const getGlobalThis = (): any => {  return (    _globalThis ||    (_globalThis =      typeof globalThis !== 'undefined'        ? globalThis        : typeof self !== 'undefined'        ? self        : typeof window !== 'undefined'        ? window        : typeof global !== 'undefined'        ? global        : {})  );};console.log(getGlobalThis());console.log(getGlobalThis());