К какому типу относится Массив

К какому типу относится Массив

Массив в JavaScript/TypeScript — это объект особого вида. Давайте разберём это подробно.

Типизация массивов в TypeScript

1. Как JavaScript видит массив

const arr = [1, 2, 3];

console.log(typeof arr);           // 'object' (не 'array'!)
console.log(Array.isArray(arr));   // true
console.log(arr instanceof Array);  // true

Вывод: массив — это объект типа object, но специальный подтип, который определяется через Array.isArray() или instanceof Array.

2. TypeScript типы для массивов

В TypeScript есть несколько способов типизации массивов:

// Способ 1: с квадратными скобками
const numbers: number[] = [1, 2, 3];
const strings: string[] = ['a', 'b', 'c'];

// Способ 2: с генериком Array<T>
const numbers: Array<number> = [1, 2, 3];
const booleans: Array<boolean> = [true, false];

// Способ 3: объединённые типы (Union types)
const mixed: (string | number)[] = [1, 'hello', 2];
const mixed: Array<string | number> = [1, 'hello'];

// Способ 4: кортежи (Tuples) — точный порядок типов
const tuple: [string, number] = ['hello', 42];
const tuple: [string, number, boolean] = ['test', 123, true];

// Способ 5: массив объектов с интерфейсом
interface User {
  id: number;
  name: string;
}
const users: User[] = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
];

Природа массива в JavaScript

Массив как объект

const arr = [10, 20, 30];

// Это объект с числовыми ключами
console.log(arr[0]);          // 10
console.log(arr['0']);        // 10 (ключ '0' тоже работает)
console.log(arr.length);      // 3

// Можно добавлять и свойства
arr.customProp = 'value';
console.log(arr.customProp);  // 'value'

// Но это не рекомендуется
for (const key in arr) {
  console.log(key);
  // '0', '1', '2', 'customProp' — все ключи перебираются
}

Вывод: массив — это объект с автоматически управляемым индексом и свойством length.

Сравнение с обычным объектом

// Массив
const arr = [1, 2, 3];

// Эквивалентный объект
const obj = {
  '0': 1,
  '1': 2,
  '2': 3,
  length: 3
};

// Но у массива есть встроенные методы
arr.map()      // не будет на obj
arr.filter()   // не будет на obj
arr.push()     // не будет на obj

Прототипная цепь (Prototype Chain)

const arr = [1, 2, 3];

// Прототипная цепь
arr
  -> Array.prototype
    -> Object.prototype
      -> null

// Поэтому имеет доступ к:
console.log(Object.getPrototypeOf(arr) === Array.prototype);  // true
console.log(arr.toString());  // 1,2,3 (из Object.prototype)
console.log(arr.map());       // (из Array.prototype)

Встроенные методы массива

Методы трансформации (возвращают новый массив)

const arr: number[] = [1, 2, 3, 4, 5];

// map — трансформирует элементы
const doubled: number[] = arr.map(x => x * 2);
// [2, 4, 6, 8, 10]

// filter — отфильтровывает элементы
const evens: number[] = arr.filter(x => x % 2 === 0);
// [2, 4]

// reduce — агрегирует в один результат
const sum: number = arr.reduce((acc, x) => acc + x, 0);
// 15

// flatMap — map с flatten одного уровня
const nested = [1, 2, 3].flatMap(x => [x, x * 2]);
// [1, 2, 2, 4, 3, 6]

Методы поиска

const arr = [1, 2, 3, 4, 5];

// find — первый элемент, удовлетворяющий условию
const found = arr.find(x => x > 3);  // 4

// findIndex — индекс первого элемента
const idx = arr.findIndex(x => x > 3);  // 3

// includes — проверка наличия
const has = arr.includes(3);  // true

// indexOf — индекс элемента
const i = arr.indexOf(3);  // 2

Методы мутации (изменяют исходный массив)

const arr = [1, 2, 3];

// push — добавить в конец
arr.push(4);  // arr = [1, 2, 3, 4]

// pop — удалить с конца
arr.pop();    // arr = [1, 2, 3], вернул 4

// unshift — добавить в начало
arr.unshift(0);  // arr = [0, 1, 2, 3]

// shift — удалить с начала
arr.shift();  // arr = [1, 2, 3], вернул 0

// splice — удалить/вставить элементы
arr.splice(1, 2, 'a', 'b');  // удалил 2 элемента с индекса 1, вставил 'a', 'b'

// reverse — развернуть
arr.reverse();  // arr в обратном порядке

// sort — отсортировать
arr.sort((a, b) => a - b);

Const массив может изменяться

Важная особенность:

const arr = [1, 2, 3];

// Это работает! Изменяем содержимое
arr.push(4);         // OK
arr[0] = 99;         // OK
arr.length = 2;      // OK

// Это НЕ работает! Переприсваиваем переменную
arr = [5, 6, 7];     // ERROR: Assignment to constant variable

Вывод: const защищает от переприсвоения переменной, но не от изменения её содержимого.

Производительность: выбор метода

const arr = new Array(1000000).fill(0);

// Быстро: встроенный метод (оптимизирован в V8)
arr.forEach(x => {});

// Быстро: for loop
for (let i = 0; i < arr.length; i++) {}

// Медленнее: for...in (перебирает все ключи)
for (const key in arr) {}

// Медленнее: for...of (транспилируется в while)
for (const item of arr) {}

Создание копии массива

const original = [1, 2, 3];

// Поверхностная копия (shallow copy)
const copy1 = [...original];              // spread оператор
const copy2 = original.slice();           // slice без аргументов
const copy3 = Array.from(original);       // Array.from

// Это разные массивы
copy1[0] = 999;
console.log(original[0]);  // 1 (не изменилась)

// Но если элементы — объекты, они не копируются
const arr = [{ id: 1 }, { id: 2 }];
const copy = [...arr];
copy[0].id = 999;  // оригинальный объект изменился!
console.log(arr[0].id);  // 999

// Глубокая копия для объектов
const deepCopy = JSON.parse(JSON.stringify(arr));  // но не работает с функциями

Типизация в React

// Props с массивом
interface ButtonGroupProps {
  items: string[];
  onSelect: (item: string) => void;
}

// Состояние с массивом
function MyComponent() {
  const [items, setItems] = useState<string[]>([]);
  
  // Добавить элемент
  const add = (item: string) => {
    setItems([...items, item]);
  };
  
  return (
    <div>
      {items.map((item, idx) => (
        <div key={idx}>{item}</div>
      ))}
    </div>
  );
}

Заключение

К какому типу относится массив:

1. JavaScript: тип object (по typeof), но специальный подтип Array
2. TypeScript: тип T[] или Array<T> в зависимости от элементов
3. Природа: объект с числовыми индексами, автоматическим управлением length и встроенными методами
4. Прототип: наследуется от Array.prototype -> Object.prototype
5. Использование: основной контейнер для коллекций в JavaScript

Массив — это фундаментальный тип данных в JavaScript, и понимание его природы как объекта крайне важно для эффективной разработки.