Array.keys() в JavaScript — ітератор ключів масиву

Опис

Метод keys() створює новий ітератор для масиву, що представляє ключі кожного елемента. Його основне призначення - допомогти вам пройтися по всіх ключах масиву, при цьому ігноруючи їхні значення. Важливо зауважити, що ітератор, що повертається методом keys(), не враховує прототипи масиву або інші властивості, які не є цілочисельними ключами.

Розглянемо наступний код:

let fruits = ['apple', 'banana', 'cherry'];
let keys = fruits.keys();

for (let key of keys) {
    console.log(key);
}

У цьому прикладі ми маємо масив fruits, який містить три елементи. Використовуючи метод keys(), ми отримуємо ітератор ключів (індексів). Після цього, за допомогою циклу for...of, ми виводимо кожний ключ (індекс) масиву у консоль, отримуючи послідовність чисел: 0, 1, 2.

Цей метод виявляється особливо корисним, коли використовується разом з іншими методами масиву, такими як map(), filter() та reduce().

правити

Загальний опис

правити

Нотатка

Використання методу keys() дозволяє перебирати ключі масиву в циклі for...of або за допомогою ітератора next(). Це дозволяє отримати доступ до кожного ключа (індексу) масиву по черзі.

автор: Bond правити

Нотатка

Зверніть увагу, що ітератор, що створюється за допомогою методу keys(), враховує лише числові ключі з реальними значеннями, оминаючи пусті або видалені елементи. Якщо ж ви хочете отримати всі ключі, незалежно від їхнього стану (включаючи індекси пустих або видалених елементів), розгляньте можливість використання Array.prototype.entries().

автор: Bond правити

Нотатка

Зверніть увагу, що метод keys() повертає ітератор, а не сам масив ключів. Щоб отримати масив ключів, ви можете використати оператор spread (розподілу) або метод Array.from() для конвертації ітератора у масив.

автор: Bond правити

Нотатка

Метод keys() передбачає, що значення this міститиме властивість length і властивості з цілочисельними ключами.

автор: Bond правити

Нотатка

Для розріджених масивів (з пустими значеннями), keys() обходить всі порожні ячейки, розглядаючи їхні значення як undefined.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

keys()

Повернення

object

Новий ітерабельний об'єкт.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	38	28	8	25	12	—

Підтримка: мобільні переглядачі

Переглядач
	38	38	28	8

Підтримка: серверні переглядачі

Переглядач
	0.12.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const arr = ["a", , "c"];
const sparseKeys = Object.keys(arr);
const denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys); // [0, 1, 2]

const arrayLike = {
  length: 3,
};

for (const entry of Array.prototype.keys.call(arrayLike)) {
  console.log(entry);
}
// 0
// 1
// 2

<header>
  <h2 class="title">Приклад використання методу keys()</h2>
  <p class="description">Демонстрація використання методу keys() на масиві для отримання ключів ітератора</p>
</header>
<main>
  <pre>['a', 'b', 'c']</pre>
  <div id="output"></div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

pre {
  color: #ff0000;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
}

div#output {
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 0.5);
}

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
let output = '';

for (const key of iterator) {
  output += 'Ключ: ' + key + ' | Значення: ' + array1[key] + '<br>';
}

document.getElementById('output').innerHTML = output;
//# sourceURL=pen.js

const fruits = ['яблуко', 'банан', 'вишня'];

const it = fruits.keys();
console.log('це не масив:', Array.isArray(it), '/ що це:', String(it)); // false / [object Array Iterator]
console.log('length у ітератора:', it.length);                          // undefined

// масив індексів дає розкладання або Array.from
console.log('розкладання:', [...fruits.keys()]);                        // [0,1,2]
console.log('типи ключів у keys():', [...fruits.keys()].map((k) => typeof k).join(', ')); // number, number, number

// ⚠️ ітератор одноразовий: після проходу він порожній
const once = fruits.keys();
console.log('перший прохід:', [...once]);                               // [0,1,2]
console.log('другий прохід того самого ітератора:', [...once]);         // []

// keys() у масиву — це індекси-числа; Object.keys() — РЯДКИ і ще й зайві властивості
const list = ['a', 'b'];
list.color = 'червоний';
console.log('Object.keys():', Object.keys(list));                       // ["0","1","color"]
console.log('list.keys():', [...list.keys()]);                          // [0,1]
console.log('типи в Object.keys():', Object.keys(list).map((k) => typeof k).join(', ')); // string, string, string

// дірки: keys() рахує їх, forEach — пропускає
const sparse = [1, , 3];
const visited = [];
sparse.forEach((v, i) => visited.push(i));
console.log('keys() у розрідженому:', [...sparse.keys()], '/ forEach обійшов:', visited); // [0,1,2] / [0,2]

// разом з entries() зазвичай зручніше
for (const [i, name] of fruits.entries()) {
    console.log('entries:', i, name);                                   // 0 яблуко / 1 банан / 2 вишня
}

// у рядка методу keys() немає взагалі
try {
    'абв'.keys();
} catch (e) {
    console.log('у рядка keys() немає:', e.name);                       // TypeError
}