Как for…of понимает что у массива нужно перечислить только элементы по ключам

for…of использует итератор объекта, который определяется в свойстве Symbol.iterator. У массивов этот итератор по умолчанию перебирает только значения элементов, игнорируя нечисловые ключи.

Пример:

const arr = ['a', 'b'];
arr.foo = 'bar';

for (const val of arr) {
  console.log(val); // 'a', 'b' (foo не выведется)
}

Массивы реализуют протокол итератора так, что Symbol.iterator возвращает только индексированные значения. Это отличается от for…in, который перебирает все перечисляемые свойства.