Массивы — это контейнеры, которые хранят несколько значений в одной переменной в упорядоченном списке с индексом 0. Они могут содержать данные любого типа, включая числа, строки, объекты и даже другие массивы, и являются динамическими, т. е. вы можете добавлять или удалять элементы из массива по мере необходимости.
Создание массива
Буквенный синтаксис
Вот массив, в котором хранятся 3 элемента разных типов:
const myArray = ['a', 42, 3.14];
Array Конструктор
const myArray = new Array('a', 42, 3.14);
Самоанализ
Arrays реализованы в JavaScript как объекты:
console.log(typeof myArray); // prints: object
Вы можете проверить, является ли переменная массивом:
const myArray = ['a', 42, 3.14]; console.log(Array.isArray(myArray)); //prints true
Индексы элементов
Массивы индексируются 0, поэтому для доступа к третьему элементу массива мы будем использовать:
myArray[2]; // returns: 42
Индексы также используются, если нужно извлечь диапазон элементов из массива — в приведенном ниже примере мы извлекаем элементы из индекса 2 в индекс 4. Обратите внимание, что индекс 4 не включен в ответ:
myArray.slice(2, 4); // returns: Array [ 42, 3.14 ]
Итерация
Существует несколько способов перебора элементов массива.
Использование forEach:
myArray.forEach(function(item) { console.log(item); });
Классический цикл for:
for(let i = 0; i < myArray.length; i++) { console.log(myArray[i]); }
цикл `for…in`:
for(const item of myArray) { console.log(item); };
Изменение массивов
толкать и поп
Для добавления и удаления элементов из конца массива доступны 2 метода: push и pop.
push позволяет нам добавить один или несколько элементов в конец массива — в приведенном ниже примере мы добавляем строку и объект:
myArray.push('Hello', {'x': 1}); // returns: 5
// the new number of elements in our array
console.log(myArray);
// prints Array(5) [ "a", 42, 3.14, "Hello", {...} ]
pop удаляет и возвращает последний элемент:
myArray.pop(); // returns: Object { x: 1 }
console.log(myArray); // prints: Array(4) [ "a", 42, 3.14, "Hello" ]
сдвигать и не сдвигать
Чтобы добавлять и удалять элементы из начала массива, мы будем использовать unshift и shift.
Так же, как `push`, `unshift` принимает один или несколько параметров:
myArray.unshift('Start', {'y': 2}); // returns: 6
console.log(myArray);
// prints: Array(6) [ "Start", {...}, "a", 42, 3.14, "Hello" ]
Аналогичным образом `shift` удаляет и возвращает первый элемент:
myArray.shift(); // returns "Start"
console.log(myArray); // prints: Array(5) [ {...}, "a", 42, 3.14, "Hello" ]
Фильтр
Как следует из названия, мы «фильтруем» элементы массива на основе заданных критериев; в приведенном ниже примере мы находим все четные числа в массиве:
let myArray = [1, 4, 42, 11, 79];
let letters = myArray.filter((item) => {
return (item % 2) === 0;
});
console.log(letters); // prints: [4, 42]
Давайте рассмотрим немного более сложный пример извлечения всех строковых элементов из массива:
let myArray = ["a", 42, 3.14];
let letters = myArray.filter((item) => {
return Object.prototype.toString.call(item) === "[object String]";
});
console.log(letters); // prints: ["a"]
карта
Метод map позволяет нам преобразовать каждый элемент массива в другой объект на основе определенного потока. Здесь мы вызываем функцию стрелки для каждого элемента массива:
let myArray = [1, 4, 42, 11, 79];
let doubleArray = myArray.map((item) => {
return item * 2;
});
console.log(doubleArray); // prints: [2, 8, 84, 22, 158]
Обратите внимание, что мы возвращаем новый массив, в то время как исходный остается неизменным.
Одним из очень распространенных вариантов использования является возврат массива, содержащего свойство объекта:
let articles = [
{ title: 'article 1', abstract: 'abstract 1'},
{ title: 'article 2', abstract: 'abstract 2'},
{ title: 'article 3', abstract: 'abstract 3'}
];
let titles = articles.map((article) => {
return article.title;
});
console.log(titles); // prints: ["article 1", "article 2", "article 3"]
Уменьшать
Метод reduce поначалу может показаться немного запутанным, но подсказка кроется в названии — он сводит весь массив к одному значению. Давайте посмотрим, как вычислить сумму всех элементов массива:
let myArray = [1, 4, 42, 11, 79];
let total = myArray.reduce((item, currentTotal) => {
return currentTotal + item;
}, 0);
console.log(total); // prints: 137
Обратите внимание, что reduce принимает 2 параметра: стрелочную функцию, которая вычисляет текущий шаг, и начальное значение. Значение, возвращаемое на одном шаге, вводится как currentTotal для следующего шага или возвращается, когда мы исчерпали массив.
Выше мы упоминали, что reduce "уменьшает" массив до одного значения - это верно, когда массив одномерный. Но его также можно использовать для выравнивания многомерных массивов:
let myArray = [[1, 4], 23, [42, 11], 79];
const flatArray = myArray.reduce((currentFlatArray, amount) => {
return currentFlatArray.concat(amount);
}, []);
console.log(flatArray); // prints: [1, 4, 23, 42, 11, 79]
Практический пример
Подсчитаем частоту слов в тексте:
let text = 'Alice was beginning to get very tired of sitting ' +
'by her sister on the bank, and of having nothing to do : ' +
'once or twice she had peeped into the book her sister was ' +
'reading, but it had no pictures or conversations in it ... ';
// 1. Split text into words
let words = text.split(" ");
// 2. Compute word count
var wordsCount = words.reduce( (tally, word) => {
let lowercaseWord = word.toLowerCase();
tally[lowercaseWord] = (tally[lowercaseWord] || 0) + 1 ;
return tally;
} , {});
// 3. Sort word count with the most used first
// 3.1. Create array from dictionary
var wordsCountArray = Object.keys(wordsCount).map(function(key) {
return [key, wordsCount[key]];
});
// 3.2. Sort the array based on the second element
wordsCountArray.sort(function(first, second) {
return second[1] - first[1];
});
// 4. Display the end result
console.log(wordsCountArray);
Вывод покажет наиболее часто используемые слова:
[["was", 2], ["to", 2], ["of", 2], ["her", 2], ["sister", 2], ["the", 2], ["or", 2], ["had", 2], ["it", 2], ["alice", 1], ["beginning", 1], ["get", 1], ["very", 1], ["tired", 1], ["sitting", 1], ["by", 1], ["on", 1], ["bank,", 1], ["and", 1], ["having", 1], ["nothing", 1], ["do", 1], [":", 1], ["once", 1], ["twice", 1], ["she", 1], ["peeped", 1], ["into", 1], ["book", 1], ["reading,", 1], ["but", 1], ["no", 1], ["pictures", 1], ["conversations", 1], ["in", 1], ["...", 1], ["", 1]]
Первоначально опубликовано на https://www.90-10.dev 10 января 2023 г.
