Array.length у JavaScript — довжина масиву


Опис

Властивість length в масиві відображає кількість елементів, які він містить. Ця властивість представляє собою 32-бітне додатнє ціле число, що завжди перевищує найвищий індекс у масиві.

const listA = [1, 2, 3];
const listB = new Array(6);

console.log(listA.length); // 3

console.log(listB.length); // 6

listB.length = 2 ** 32; // 4294967296
// RangeError: Неприпустима довжина масиву

const listC = new Array(-100); // Від'ємні числа не допускаються
// RangeError: Неприпустима довжина масиву

Об'єкт масиву моніторить властивість length, синхронізуючи її значення із вмістом масиву. Це означає:

  • Встановлення довжини на число, менше поточної довжини, обрізає масив - елементи, що виходять за рамки нової довжини, усуваються.
  • Встановлення будь-якого індексу масиву (додатного цілого числа менше 2^32) поза поточною довжиною веде до розширення масиву - властивість length зростає, відображаючи новий максимальний індекс.
  • Встановлення недопустимого значення довжини (наприклад, від'ємного числа або нецілого числа) викликає виняткову ситуацію RangeError.

Коли довжина встановлюється на значення, більше ніж поточна, масив розширюється за рахунок додавання порожніх місць, а не реальних значень undefined. Ці порожні слоти взаємодіють з методами масиву особливим чином; більше про це в розділі про методи масиву та порожні слоти.

const arr = [1, 2];
console.log(arr); // [ 1, 2 ]

arr.length = 5; // встановлюємо довжину масиву на 5, в теперішній момент вона 2.
console.log(arr); // [ 1, 2, <3 порожні елементи> ]

arr.forEach((елемент) => console.log(елемент)); 
// 1
// 2
автор: Bond

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

автор: NagarD

Порада

Коли Array.length дорівнює нулю, це означає, що масив порожній. Ви можете використати це, щоб перевірити, чи є масив порожнім або виконати певні умовні дії. Наприклад:

const myArray = [];
if (myArray.length === 0) {
  console.log("Масив порожній");
} else {
  console.log("Масив має елементи");
}

Результат виведення буде "Масив порожній".

автор: Bond
Нотатка

Маєте на увазі, що властивість Array.length читається, але безпосередньо не змінюється. Її оновлення відбувається автоматично при додаванні або видаленні елементів з масиву за допомогою таких методів, як push(), pop(), splice() та ін. Зверніть увагу, що безпосередня зміна значення Array.length може привести до обрізки або розширення масиву.

автор: Bond

Синтаксис

Array.length

Властивість length може отримувати єдине значення:

integer

Невід'ємне ціле число, менше 232.

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 4 12 4
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
1 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

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

Масив з незмінною властивістю length. Властивість length автоматично оновлюється масивом, коли елементи додаються поза поточною довжиною. Якщо властивість length зробити незмінною, масив не зможе її оновити. Це призводить до помилки в строгому режимі.

'use strict';

const numbers = [1, 2, 3, 4, 5];
Object.defineProperty(numbers, 'length', { writable: false });

try {
    numbers.push(6); // мусить збільшити length — а він заморожений
} catch (error) {
    console.log('push не пройшов:', error.name);
}

console.log(numbers.length); // 5 — довжина незмінна
автор: Bond

Ітерація по масиву.

const numbers = [1, 2, 3, 4, 5];
const length = numbers.length;
for (let i = 0; i < length; i++) {
  numbers[i] *= 2;
}
// numbers тепер [2, 4, 6, 8, 10]
автор: Bond

У прикладі масив numbers скорочується до довжини 3, якщо поточна довжина більша за 3.

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

if (numbers.length > 3) {
  numbers.length = 3;
}

console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3
console.log(numbers[3]); // undefined; зайві елементи видаляються
автор: Bond

Створення порожнього масиву фіксованої довжини. Встановлення значення length більшого, ніж поточна довжина, створює розріджений масив.

const numbers = [];
numbers.length = 3;
console.log(numbers); // [empty x 3]
автор: Bond

Цей приклад демонструє, як використовувати властивість length масива для визначення його довжини, а також як дізнатися про властивості кожного окремого елемента масиву, включаючи довжину рядків та типи даних для нерядкових елементів.

HTML

<header>
  <h2 class="title">Властивість Array: length</h2>
  <p class="description">Використовуємо властивість 'length' для визначення кількості елементів в масиві та розглядаємо властивості кожного елемента.</p>
</header>
<main>
  <div class="result">
    <h3 class="result-title">Масив:</h3>
    <pre id="array"></pre>
    <h3 class="result-title">Довжина масиву:</h3>
    <pre id="arrayLength"></pre>
    <h3 class="result-title">Властивості елементів масиву:</h3>
    <pre id="elementProperties"></pre>
  </div>
</main>

CSS

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

pre {
  color: #ff0000;
  letter-spacing: 1px;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  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;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.result-title {
  font-weight: bold;
  color: #333;
}

JS

const clothing = ['shoes', 'shirts', 'socks', 'sweaters', 123, { name: 'hat' }];

document.getElementById('array').innerText = JSON.stringify(clothing, null, 2);

document.getElementById('arrayLength').innerText = 'Довжина масиву: ' + clothing.length;

let properties = [];
for (let i = 0; i < clothing.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  if (typeof clothing[i] === "string") {
    properties.push('Елемент ' + i + ': ' + 'рядок, довжина ' + clothing[i].length);
  } else {
    properties.push('Елемент ' + i + ': ' + 'тип даних - ' + typeof clothing[i]);
  }
}window.CP.exitedLoop(0);

document.getElementById('elementProperties').innerText = properties.join('\n');
//# sourceURL=pen.js
автор: Bond

Читання довжини, обрізання масиву присвоєнням і пастка порожніх місць: після length = 4 масив «має» чотири елементи, але forEach бачить лише два.

const arr = ['a', 'b', 'c', 'd'];
console.log('довжина:', arr.length);              // 4
console.log('останній:', arr[arr.length - 1]);    // d
console.log('те саме коротше:', arr.at(-1));      // d

arr.length = 2;                     // запис обрізає масив на місці
console.log('після length = 2:', arr.join(','));  // a,b

arr.length = 4;                     // розширення дає ПОРОЖНІ місця, не undefined
console.log('чи є індекс 3:', 3 in arr);          // false

let visited = 0;
arr.forEach(() => { visited += 1; });
console.log('forEach обійшов:', visited);         // 2 — порожні місця пропущено

console.log('порожній масив:', [].length === 0);  // true — так і перевіряють
console.log('але сам масив істинний:', Boolean([])); // true — if (arr) не годиться
автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід