JavaScript 数据类型检测方法

JavaScript 中常用的数据类型检测方法包括 typeof、instanceof、Object.prototype.toString.call() 等。每种方法适用于不同的场景，需要根据实际情况选择。

• typeof 适用于检测基本数据类型，但无法区分数组和对象。
• instanceof 用于检测对象是否属于某个构造函数的实例。
• Object.prototype.toString.call() 是最全面的检测方法，可以准确区分所有数据类型。

案例 1：表单输入验证

表单输入通常需要验证数据类型以确保数据格式正确。例如，验证用户输入的年龄是否为数字。

function validateAge(input) {
  if (typeof input !== 'number') {
    throw new Error('Age must be a number');
  }
  return true;
}

案例 2：API 响应数据处理

处理 API 返回的数据时，需要确保数据类型符合预期，避免后续处理出错。

function processApiResponse(response) {
  if (Array.isArray(response.data)) {
    response.data.forEach(processItem);
  } else if (typeof response.data === 'object') {
    processItem(response.data);
  } else {
    throw new Error('Invalid response data type');
  }
}

案例 3：函数参数校验

在函数内部校验参数类型，确保函数逻辑正确执行。

function calculateArea(shape) {
  if (shape instanceof Rectangle) {
    return shape.width * shape.height;
  } else if (shape instanceof Circle) {
    return Math.PI * shape.radius ** 2;
  } else {
    throw new Error('Invalid shape type');
  }
}

案例 4：动态渲染组件

根据数据类型动态渲染不同的 UI 组件，提升用户体验。

function renderDynamicContent(data) {
  const type = Object.prototype.toString.call(data);
  switch (type) {
    case '[object String]':
      return <TextComponent text={data} />;
    case '[object Array]':
      return <ListComponent items={data} />;
    default:
      return <DefaultComponent />;
  }
}

案例 5：错误边界处理

在错误边界中捕获并处理数据类型错误，避免应用崩溃。

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    if (error instanceof TypeError) {
      logError('Data type error', error, info);
    }
    // 其他错误处理逻辑
  }
  render() {
    return this.props.children;
  }
}