Как узнать что параметр является массивом в JavaScript?

Способы проверки массива в JavaScript

В JavaScript существует несколько методов для определения, является ли значение массивом. Каждый подход имеет свои преимущества и ограничения в зависимости от контекста и требований.

1. Array.isArray() - рекомендуемый метод

// Самый надежный способ
const arr = [1, 2, 3];
const notArr = { 0: 1, length: 3 }; // похож на массив, но не является

console.log(Array.isArray(arr));     // true
console.log(Array.isArray(notArr));  // false
console.log(Array.isArray('string')); // false
console.log(Array.isArray(null));     // false

Array.isArray() - это стандартный и самый безопасный метод, работающий во всех современных браузерах и Node.js.

2. instanceof оператор

// Проверка через instanceof
const arr = [1, 2, 3];

console.log(arr instanceof Array);           // true
console.log([] instanceof Array);            // true
console.log('string' instanceof Array);      // false
console.log({ length: 3 } instanceof Array); // false

Этот метод работает в большинстве случаев, но может дать неправильный результат при работе с iframe или разными глобальными контекстами.

3. Проверка свойства constructor

// Менее надежный способ
const arr = [1, 2, 3];

console.log(arr.constructor === Array);      // true
console.log([].constructor === Array);       // true
console.log('string'.constructor === Array); // false

Этот подход может быть обманут через переопределение constructor, поэтому не рекомендуется для критичного кода.

4. Проверка prototype

// Еще один способ через Object.prototype
const arr = [1, 2, 3];
const obj = {};

console.log(Object.prototype.toString.call(arr));  // [object Array]
console.log(Object.prototype.toString.call(obj));  // [object Object]
console.log(Object.prototype.toString.call('str')); // [object String]

// Или сокращенно
function isArray(value) {
  return Object.prototype.toString.call(value) === '[object Array]';
}

Этот метод очень надежен и работает даже в старых браузерах.

5. Проверка свойства length и typeof

// Не рекомендуется как основной метод
function looksLikeArray(value) {
  return typeof value === 'object' && 
         value !== null && 
         typeof value.length === 'number' &&
         typeof value[Symbol.iterator] === 'function';
}

console.log(looksLikeArray([1, 2, 3]));      // true
console.log(looksLikeArray('string'));       // false (нет Symbol.iterator)
console.log(looksLikeArray({ length: 3 })); // false (нет Symbol.iterator)

Этот подход можно использовать для проверки array-like объектов.

6. Практический пример с TypeScript

// TypeScript type guard
function isArray<T>(value: unknown): value is Array<T> {
  return Array.isArray(value);
}

// Использование
const data: unknown = [1, 2, 3];

if (isArray<number>(data)) {
  // Теперь TypeScript знает, что data это number[]
  data.forEach(item => console.log(item));
}

Type guard функция позволяет TypeScript правильно типизировать значение после проверки.

7. Проверка в реальных сценариях

// Обработка API ответа
async function fetchAndProcessData(url) {
  const response = await fetch(url);
  const data = await response.json();
  
  if (Array.isArray(data)) {
    return data.map(item => ({ ...item, processed: true }));
  } else if (Array.isArray(data.items)) {
    return data.items; // Может быть { items: [...] }
  } else {
    throw new Error('Expected array or array-like structure');
  }
}

// Валидация props в React
interface ListProps {
  items: unknown;
}

function List({ items }: ListProps) {
  if (!Array.isArray(items)) {
    return <div>Invalid data</div>;
  }
  
  return (
    <ul>
      {items.map((item, i) => <li key={i}>{item}</li>)}
    </ul>
  );
}

Сравнение методов

Рекомендация

Используй Array.isArray() - это официальный стандарт ECMAScript, работающий надежно во всех современных окружениях. Это лучший выбор для новых проектов и 99% случаев использования.