兼容的数据类型获取器 - 跨浏览器准确识别人人喜爱的数据类型

2024-02-18 05:35:46

在《lodash 源码分析之获取数据类型》一文中，我们探讨了如何获取 JavaScript 中的数据类型。然而，在某些环境下，例如在 IE11 中，一些 ES6 新添加的对象获取到的类型都是 [object Object]。这使得我们无法对数据类型进行细致的区分。

本文将深入分析 Lodash 中的数据类型获取方法，并揭示其在不同浏览器环境下的兼容性差异。我们将探讨如何跨浏览器准确地识别人人喜爱的各种数据类型，包括字符串、数组、对象、函数、正则表达式、日期、错误等。

lodash 中的数据类型获取方法

Lodash 提供了 _.isArray、_.isObject、_.isFunction、_.isString、_.isNumber、_.isBoolean、_.isSymbol、_.isUndefined、_.isNull 等方法来获取数据类型。这些方法都是基于 JavaScript 原生的 Object.prototype.toString 方法实现的。

function isArray(value) {
  return Array.isArray(value);
}

function isObject(value) {
  return value !== null && typeof value === 'object';
}

function isFunction(value) {
  return typeof value === 'function';
}

function isString(value) {
  return typeof value === 'string';
}

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

function isBoolean(value) {
  return typeof value === 'boolean';
}

function isSymbol(value) {
  return typeof value === 'symbol';
}

function isUndefined(value) {
  return typeof value === 'undefined';
}

function isNull(value) {
  return value === null;
}

兼容性差异

在不同的浏览器环境下，Object.prototype.toString 方法的返回值可能不同。这会导致 Lodash 中的数据类型获取方法在不同浏览器环境下具有不同的兼容性。

例如，在 IE11 中，Object.prototype.toString 方法将 ES6 新增的 Map 对象和 Set 对象都返回为 [object Object]。这使得 _.isArray、_.isObject、_.isFunction、_.isString、_.isNumber、_.isBoolean、_.isSymbol、_.isUndefined、_.isNull 等方法在 IE11 中无法正确地获取 Map 对象和 Set 对象的类型。

为了解决这个问题，Lodash 提供了 _.isMap、_.isSet、_.isArguments、_.isDataView、_.isTypedArray、_.isDate、_.isRegExp、_.isError 等方法来获取更细致的数据类型。这些方法都是基于 ES6 的原生方法实现的，因此具有更好的兼容性。

function isMap(value) {
  return value instanceof Map;
}

function isSet(value) {
  return value instanceof Set;
}

function isArguments(value) {
  return isArrayLikeObject(value) && isObjectLike(value) && hasToStringTag(value, 'Arguments');
}

function isDataView(value) {
  return isObjectLike(value) && hasToStringTag(value, 'DataView');
}

function isTypedArray(value) {
  return isObjectLike(value) && hasToStringTag(value, /^\[object (?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)Array\]$/);
}

function isDate(value) {
  return isObjectLike(value) && hasToStringTag(value, 'Date');
}

function isRegExp(value) {
  return isObjectLike(value) && hasToStringTag(value, 'RegExp');
}

function isError(value) {
  return isObjectLike(value) && hasToStringTag(value, 'Error');
}

如何跨浏览器准确地获取数据类型

为了跨浏览器准确地获取数据类型，我们可以使用 Lodash 提供的 _.isMap、_.isSet、_.isArguments、_.isDataView、_.isTypedArray、_.isDate、_.isRegExp、_.isError 等方法。这些方法具有更好的兼容性，可以准确地获取更细致的数据类型。

if (_.isMap(value)) {
  // 代码逻辑
} else if (_.isSet(value)) {
  // 代码逻辑
} else if (_.isArguments(value)) {
  // 代码逻辑
} else if (_.isDataView(value)) {
  // 代码逻辑
} else if (_.isTypedArray(value)) {
  // 代码逻辑
} else if (_.isDate(value)) {
  // 代码逻辑
} else if (_.isRegExp(value)) {
  // 代码逻辑
} else if (_.isError(value)) {
  // 代码逻辑
}