В JavaScript свойство length возвращает длину или количество элементов некоторой сущности (объекта). Например, для строки свойство length вернет количество символов в строке, а для плотного массива - число элементов.
Следует избегать именования переменных словом length, т.к. в JavaScript оно является зарезервированным и относится к глобальному объекту window:
1 2 3 4 5 6 |
"use strict"; console.log(typeof length); // number length = 4; console.log(window.length); // 4 console.log(length); // 4 |
Массивы в JavaScript индексируются с нуля:
- первый элемент массива имеет индекс, равный 0;
- индекс последнего элемента равен значению свойства массива (length – 1).
Cвойство length массива (который является экземпляром объекта типа Array) устанавливает или возвращает число элементов этого массива, включая пустые (т.е. не имеющие значений) элементы.
Свойство length массива:
- является целым числом с положительным знаком и значением, меньшим чем 232;
- всегда численно больше чем самый наибольший индекс элемента в массиве.
Например:
1 2 3 4 5 |
const arr = ["первый элемент", "второй элемент", "последний элемент"]; console.log(arr[0]); // 'первый элемент' console.log(arr[1]); // 'второй элемент' console.log(arr[2]); // 'последний элемент' console.log(arr[arr.length - 1]); // 'последний элемент' |
Плотный массив хранит набор значений (элементов массива), идентифицируемых по индексу или набору индексов, принимающих целые (или приводимые к целым) значения из некоторого заданного непрерывного диапазона.
Разрежённый массив — абстрактное представление обычного массива, в котором данные представлены не непрерывно, а фрагментарно, при этом пропущенные элементы индексов не имеют:
1 2 3 4 5 6 7 8 9 10 11 |
// Примеры плотного массива var a = new Array("foo", "bar", "baz"); var b = [2, 3, 5]; console.log(a.length); // 3 // Примеры разреженного массива a[10] = "foobar"; // массив а больше не плотный, разрыв между индексами элементов массива: 0,1,2 и 10 (индексов с 3 по 9 в массиве нет) console.log(a); // ["foo", "bar", "baz", empty × 7, "foobar"] console.log(a.length); // 11 (не соответствует реальному количеству элементов массива, имеющих значение: их всего 4) |
Особенности свойства length массива:
- Замечание 1: Cвойство length не указывает количество элементов массива с определёнными значениями:
- в плотном массиве количество элементов соответствует значению свойства length массива без единицы (т.е. length-1);
- в разреженном массиве length не указывает на реальное количество элементов: значение length будет больше, чем количество элементов массива, имеющих значение.
- Замечание 2: При добавлении или удалении элементов значение length изменяют только операции, изменяющие максимальный индекс элементов (т.е. размер массива). Любые изменения массива, которые не влияют на индекс с максимальным значением, не изменяют значение length, например, при использовании delete:
-
12345678910var a = new Array("foo", "bar", "baz");a[10] = "foobar";console.log(a); // (11) ["foo", "bar", "baz", empty × 7, "foobar"]console.log(a.length); // 11delete a[2];console.log(a); // (11) ["foo", "bar", empty × 8, "foobar"]console.log(a.length); // 11 (значение length массива при удалении элемента массива не изменилось)
-
- Замечание 3: Когда при изменении новое значение length меньше или равно максимальному индексу, любые элементы, индекс которых больше или равен новому значению length (т.е. новому размеру массива), удаляются:
-
1234567let numbers = [1, 3, 5, 7, 8];console.log(numbers); // (5) [1, 3, 5, 7, 8] (массив из 5 элементов)console.log(numbers.length); // 5numbers.length = 3; // изменение размера массиваconsole.log(numbers); // (3) [1, 3, 5] (массив из 3 элементов, остальные элементы удалены)console.log(numbers.length); // 3
При использовании значения length большего, чем максимальный индекс, массив станет разреженным.
-
-
Замечание 4: Свойству length можно присвоить нечисловой тип данных, при этом JavaScript преобразует примитив в число. Если результат преобразования равен NaN или отрицательному числу, то выдается ошибка Uncaught RangeError: Invalid array length («недопустимая длина массива»):
-
12345678910let numbers = [1, 3, 5, 7, 8];console.log(numbers); // (5) [1, 3, 5, 7, 8] (массив из 5 элементов)console.log(numbers.length); // 5numbers.length = '2'; // '2' преобразуется в число 2console.log(numbers.length); // 2numbers.length = 'not-a-number'; // Uncaught RangeError: Invalid array lengthnumbers.length = -10; // Uncaught RangeError: Invalid array length
-
Изменение свойства массива length, удаление элементов с помощью delete, добавление элементов с новым индексом может является причиной возникновения создаются разрежённых массивов.
Взаимосвязь свойства length с числовыми свойствами массивов
Некоторые встроенные методы массива (например, join, slice, indexOf и т.д.) учитывают значение свойства length при своём вызове. Другие методы (например, push, splice и т.д.) в результате своей работы обновляют свойство length массива.
При установке свойства в массиве, если свойство имеет действительный индекс и этот индекс выходит за пределы текущих границ массива, движок соответствующим образом обновит свойство length:
1 2 3 4 5 6 7 8 9 |
const numArray = [12, 45, 67, 456, 34]; let value = numArray.length; console.log(value, numArray); // 5 Array(5) [ 12, 45, 67, 456, 34 ] numArray.length = 0; console.log(numArray); // [] - получили пустой массив numArray.length = 100; console.log(numArray); // (100) [empty × 100] - получили массив из 100 элементов, так как перезаписали свойство массива length |
Уменьшение свойства length приводит к удалению элементов массива:
1 2 3 4 5 6 7 |
var arr = ["Alex", "Mary", "Serg"]; console.log(arr.length); // 3 console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ] arr.length= 1; console.log(arr); // Array [ "Alex" ] |
Для исключения появления разреженных массивов при удалении или добавлении элементов следует использовать специальные методы push(), unshift(), pop(), shift().
Добавление элемента в конец массива (метод push() )
Метод push():
- присоединяет элементы к концу массива, используя для определения места вставки свойство length;
- возвращает новое значение свойства length объекта, для которого был вызван данный метод.
Метод push не является привязанным к типу Array: этот метод может быть вызван или применён и к массивоподобным объектам.
Особенности метода push():
- Если свойство length не может быть преобразовано в число, будет использован индекс 0. Если свойство length не существует, то в этом случае оно будет создано.
- К строкам (как массивоподобным объектам) метод push() применён быть не может, так как строки являются неизменяемыми.
1 2 3 4 5 |
const numArray = [12, 45, 67, 456, 34]; let value; value = numArray.push(100); // добавление элемента в конец массива, переменная value принимает новое значение свойства length console.log(value, numArray); // 6 Array(6) [ 12, 45, 67, 456, 34, 100 ] |
Функция, которая принимает значение переменной n и возвращает массив, заполненный числами от 1 до n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function getArray(num) { const arr = []; for (let i = 0; i < num; i++) { arr.push[i]; // в данном случае это аналог arr[i] = i + 1; } return arr; } // ИЛИ function returnArray(n) { let myArray = []; while (n > 0) { myArray.push(n); n--; } return myArray; } |
Добавление элемента в начало массива (метод unshift() )
Метод unshift():
- добавляет элементы в начало массива;
- возвращает новое значение свойства length объекта, для которого был вызван данный метод.
Метод unshift() не является привязанным к типу Array: этот метод может быть вызван или применён и к массивоподобным объектам.
1 2 3 4 5 6 7 8 9 10 11 |
const numberArray = [12, 45, 67, 456, 34]; let value; value = numberArray.unshift(200,100); // добавление элементов в начало массива, переменная value принимает новое значение свойства length console.log(value, numberArray); // 7 Array (7) [200, 100, 12, 45, 67, 456, 34] // Ещё пример const numArray = [10]; numArray.unshift([-200]); // добавление элементов в начало массива console.log(numArray); // Array (2) [[-200], 10] |
Удаление элемента с конца массива (метод pop() )
Метод pop():
- удаляет последний элемент из массива (изменяет длину массива);
- возвращает значение удаленного из массива элемента (или undefined, если массив пуст).
Метод pop() не является привязанным к типу Array: этот метод может быть вызван или применён и к массивоподобным объектам.
1 2 3 4 5 |
const numberArray = [200, 12, 45, 67, 456, 34, 100]; let value; value = numberArray.pop(); // удаление элемента с конца массива console.log(value, numberArray); // 100 Array(6) [ 200, 12, 45, 67, 456, 34 ] |
Удаление элемента из начала массива (метод shift() )
Метод shift():
- удаляет первый элемент из массива (изменяет длину массива, последовательно сдвигая значения индексов по направлению к нулю);
- возвращает значение удаленного из массива элемента (или undefined, если массив пуст).
1 2 3 4 5 6 |
const numberArray = [200, 12, 45, 67, 456, 34, 100]; let value; value = numberArray.shift(); // удаление элемента из начала массива, в value записывается значение удаленного элемента console.log(value, numberArray); // 200 Array(6) [ 12, 45, 67, 456, 34, 100 ] console.log(numberArray[0]); // 12 (индексы сдвинуты к началу) |
Обрезка массива ( метод slice() )
Метод slice() возвращает новый массив, содержащий копию части исходного массива.
Синтаксис метода slice():
1 |
arr.slice([begin[, end]]) |
Параметры метода slice ():
- begin (необязательный) - индекс, с которого начинается извлечение (отсчёт начинается с 0):
- если индекс отрицательный, begin указывает смещение от конца последовательности (т.е. вызов slice(-2) извлечёт два последних элемента последовательности);
- если begin не определен, slice() начинает работать с индекса 0;
- если begin больше длины последовательности - вернется пустой массив.
- end (необязательный) - индекс (счёт начинается с нуля), по которому заканчивать извлечение. Метод slice() извлекает элементы с индексом меньше end (т.е. вызов slice(1, 4) извлечёт элементы со второго по четвёртый (элементы по индексам 1, 2 и 3):
- если индекс отрицательный, end указывает смещение от конца последовательности (т.е. вызов slice(2, -1) извлечёт из последовательности элементы начиная с третьего элемента с начала и заканчивая вторым с конца);
- если end опущен, slice() извлекает все элементы до конца последовательности (т.е. до arr.length).
Возвращаемое значение:
- новый массив, содержащий извлеченные элементы.
Метод slice() не изменяет исходный массив, а возвращает новую «одноуровневую» копию, содержащую копии элементов, вырезанных из исходного массива.
Элементы исходного массива копируются в новый массив по следующим правилам:
- метод slice() копирует ссылки на объекты в новый массив. И оригинал, и новый массив ссылаются на один и тот же объект. То есть, если объект по ссылке будет изменён, изменения будут видны и в новом, и в исходном массивах.
- метод slice() копирует значения строк и чисел (но не объекты String и Number) в новый массив. Изменения строки или числа в одном массиве никак не затрагивает другой. Если к любому массиву будет добавлен новый элемент, это никак не повлияет на другой массив.
1 2 3 4 5 6 7 |
var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблоко', 'Манго']; var citrus = fruits.slice(1, 3); // citrus содержит ['Апельсин', 'Лимон'] const numArray = [12, 45, 67, 456, 34]; let value; value = numArray.slice(0, 3); // обрезка массива (вернет с 0 по 3-й элемент) console.log(value, numArray); // Array(3) [ 12, 45, 67 ] Array(5) [ 12, 45, 67, 456, 2525 ] |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var arr = ["Alex", "Mary", "Serg"]; var val = arr.splice(0, 2); console.log(val); // Array [ "Alex", "Mary" ], т.е. вырезано 2 элемента. начиная с 0-го console.log(arr); // Array [ "Serg" ] - оставшиеся элементы массива // ИЛИ const numArray = [12, 45, 67, 456, 34]; let value; value = numArray.splice(0, 2, "one", "two"); // удаление 2-х элементов массива (с 0-го, 2 элемента добавляем) console.log(value, numArray); // Array [ 12, 45 ] Array(5) [ "one", "two", 67, 456, 2525 ] value = numArray.splice(1, 0, "AAA", "BBB"); // добавление элементов массива (с 1, добавляем 2 элемента) console.log(value, numArray); // Array [] Array(7) [ "one", "AAA", "BBB", "two", 67, 456, 2525 ] |