Привет! Структуры данных обозначают один из самых ценных навыков для каждого инженера -программиста. В прошлом году я уже опубликовал всеобъемлющее руководство по коллекциям Java. На этот раз я хотел бы предоставить этот пост на встроенных структурах данных в JavaScript. Они включают в себя классические массивы, а также две новые структуры данных – карты и наборы – которые были введены в ES6. Этот пост обзор наиболее важных операций для массивов, карт и наборов в Vanila JS, включая объявление, добавление/удаление элементов, итерации, элементы доступа, получить размер сбора или валидацию элемента в сборе.
Множество
Массивы – самые старые коллекции JS. С технической точки зрения, массив означает структуру данных, в которой хранится последовательность элементов. В JavaScript массивы объекты . Однако сравните с Java Массивы, JS не фиксирует ни одного размера массивов, ни типа объектов. Элементы доступны с использованием их индекса, а это [0; Длина массива – 1]. В этом разделе обзоры наиболее важные операции массивы.
Декларация
Чтобы объявить массив в JS там два общих способа:
- Используя массив буквального синтаксис
- Использование конструктора Массив класс
Этот фрагмент кода демонстрирует, как создавать массивы с этими подходами:
// using array literal let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva']; // using constructor let numbers = new Array(1,2,3,4,5);
Добавить элементы
JS имеет значение с добавлением/удалением элементов, в зависимости от их позиции в массиве (спереди/конец). Это означает, что для того, чтобы Вставьте новый элемент к конец Мы используем push Метод, в то время как без устранения Операция добавляет элемент в 1 -я позиция Анкет Посмотрите на следующий пример:
let numbers = new Array(1,2,3,4,5); console.log(numbers); // [1,2,3,4,5] numbers.push(6); console.log(numbers); // [1,2,3,4,5,6] numbers.unshift(7); console.log(numbers); // [7,1,2,3,4,5,6]
Кроме того, оба метода могут занять несколько Аргументы одновременно:
let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
names.push('Gabriela', 'Hana', 'Katarina');
Удалить элементы
Как и в случае с дополнением, есть несколько способов удалить элементы из массива JS:
- С самого начала с использованием сдвиг
- С конца, используя поп
- Используя фильтр операция
Позвольте наблюдать первые две операции в этом примере:
let numbers = [1,2,3,4,5,6,7]; numbers.shift(); console.log(numbers); // [2,3,4,5,6,7] numbers.pop(); console.log(numbers); //[2,3,4,5,6]
Другой подход к удалению элементов из массива – это использование фильтр . Вопреки предыдущим двум операциям, этот подход Создает новый массив , с элементами, фильтрованные с использованием заданного условия (предикат). Посмотрите на этот код, который создает массив с ровными числами:
let numbers = [2, 15, 6, 19, 54, 12, 9];
let even = numbers.filter(value => {
return value %2 === 0
});
console.log(even); //[2,6,54,12]
Получить доступ к элементу
Элементы массива доступны с использованием Индекс , это имеет значение [0; Длина массива – 1]. Этот фрагмент кода демонстрирует, как это сделать:
let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva']; let name = names[0]; console.log(name); //Anna
Проверьте наличие
Есть несколько способов Проверьте существование элемента в массиве:
- Используя Включает Метод: вернуть логическое значение на присутствие/отсутствие
- Используя Indexof Это возвращает индекс элемента -1, если его нет. Nb используется в основном для нацеливания старых браузеров
- Используя каждый и некоторые : оба элемента проверки для удовлетворения предиката (условия) и возвращает логический результат, если все элементы/некоторые элементы действительны для условий
Посмотрите на этот пример:
let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let hasName = names.includes('Carolina');
console.log(hasName); // true
let cities = new Array('Madrid', 'Prague', 'Buenos Aires', 'Brussels');
let paris = names.indexOf('Paris');
console.log(paris); // -1
// using every and some
let numbers = [2, 15, 6, 19, 54, 12, 9];
let everyIsEven = numbers.every(value => {
return value%2===0
});
console.log(everyIsEven); // false
let someAreEven = numbers.some(value => {
return value%2===0
});
console.log(someAreEven); // true
Получить размер
Размер массива в JS – это собственность , не функция. Чтобы получить это, позвоните Array.length :
let numbers = [2, 15, 6, 19, 54, 12, 9]; console.log(numbers.length); // 7
В JS это возможно также, чтобы Установите размер массива Присвоив новое значение длина :
let numbers = [1,2,3,4,5]; console.log(numbers.length); // 5 numbers.length = 3; console.log(numbers); // [1,2,3]
Итерации
Чтобы зацикнуть элементы использования массива foreach метод Этот фрагмент кода демонстрирует использование этого метода:
let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva']; names.forEach(name => console.log(name));
Это будет повторяться над массивом имена и распечатать каждое значение.
Набор
Наборы в JS были введены в ES6. В информатике SET – это коллекция, которая не содержит дублирующих элементов. Наборы JS могут хранить любой тип элементов – либо объекты, либо примитивы (строка, номер, биглинт, логический, нулевой, неопределенный и символ).
Декларация
JS разрешает создавать пустой набор или набор из массива с использованием конструктора. Посмотрите на фрагмент кода ниже:
// empty set let set = new Set(); // from array let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva']; let nameSet = new Set(names);
Добавить элементы
Чтобы вставить новые элементы в набор использования Добавить метод Он возвращает набор, так что это возможно в цепь Несколько методов добавляют. Вот пример:
let numbers = new Set(); numbers.add(1); numbers.add(2).add(3); // chain numbers.add(2); //2 already in array
Наборы также могут хранить значения различных типов неопределенное , НАН и NULL ценности:
let set = new Set();
set.add(1).add('Hello world').add(NaN).add(undefined);
console.log(set); //Set(4) [ 1, "Hello world", NaN, undefined ]
Удалить элементы
SET предоставляет Удалить Метод, который удаляет значение из коллекции и возвращает логическое значение – Верно Если элемент был успешно удален, и ложный Если элемент не был удален (или не представлен изначально):
let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let nameSet = new Set(names);
nameSet.delete('Carolina');
console.log(nameSet); // Set(4) [ "Anna", "Barbora", "Denisa", "Eva" ]
let result = nameSet.delete('Marketa');
console.log(result); // false
Есть также метод ясно это удаляет все Элементы в наборе:
let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva']; let nameSet = new Set(names); console.log(nameSet); // Set(5) [ "Anna", "Barbora", "Carolina", "Denisa", "Eva" ] nameSet.clear(); console.log(nameSet); // Set []
Проверьте наличие
Чтобы проверить существование элемента в наборах, используйте имеет метод Он возвращается Верно Если элемент находится в наборе, и ложный Если это не так. Посмотрите на следующий фрагмент кода:
let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let nameSet = new Set(names);
let has = nameSet.has('Anna');
console.log(has); // true
Итерации
Есть два подхода, чтобы зацикливаться на элементах SET:
- Используя для каждого
- Используя из
Здесь оба фрагмента итерации по элементам и распечатают каждый из них:
let nameSet = new Set(['Anna', 'Barbora', 'Carolina']);
// using forEach
nameSet.forEach(name => console.log(name));
// using of
for (name of nameSet) {
console.log(name);
}
карта
Окончательная структура данных – карта . Технически карты представляют собой структуры данных, которые хранят элементы в формате ключа. Как и наборы, карты также были введены в ES6. Таким образом, на карте JS находится объект, который содержит пары ключей и запоминает исходный порядок вставки ключей. Как ключи, так и значения могут быть примитивными значениями или объектами (включая NAN, NULL или неопределенные значения), однако клавиши должны быть уникальным Например, Нет дубликатов.
Декларация
То же, что и наборы, карты могут быть созданы двумя способами:
- Пустая карта с Map () конструктор
- Из итерационной коллекции
Вот пример, который демонстрирует, как инициализировать карты:
let emptyMap = new Map(); let phoneNumbers = new Map([['5352342', 'Anna'], ['9358432', 'Barbora'], ['9874342', 'Carolina']]);
Nb Это во втором подходе мы прошли множество массивов в форме [[ключ, значение], [ключ, значение] …] .
Добавить элементы
Карта разрешает вставлять новые элементы, используя установить Метод, который принимает два аргумента: ключ и значение. Если Key уже представлен на карте, его значение обновится с новым значением:
let words = new Map();
words.set('apple', 'manzana');
words.set('orange', 'naranja');
words.set('pineapple', 'pina');
// update an existing key
words.set('pineapple', 'piña');
Как и в случае с наборами, также возможно цеплять несколько установить Методы вместе.
Удалить элементы
Есть два способа удалить элементы с карты JS:
- Предоставленным ключом, используя Удалить метод
- Удалить все Элементы с ясно метод
Посмотрите на следующий фрагмент кода ниже:
let phoneNumbers = new Map([['5352342', 'Anna'], ['9358432', 'Barbora'], ['9874342', 'Carolina']]);
console.log(phoneNumbers); // Map(3) { 5352342 → "Anna", 9358432 → "Barbora", 9874342 → "Carolina" }
phoneNumbers.delete('5352342');
console.log(phoneNumbers); // Map(2) { 9358432 → "Barbora", 9874342 → "Carolina" }
phoneNumbers.clear();
console.log(phoneNumbers); // Map (0)
Получить доступ к элементу
Карты позволяют получить значение для данного ключ используя получить метод Если элемент не представлен на карте, метод вернет неопределенное :
let words = new Map();
words.set('apple', 'manzana');
words.set('orange', 'naranja');
words.set('pineapple', 'pina');
let word = words.get('apple');
console.log(word); // manzana
word = words.get('hello');
console.log(word); // undefined
Проверьте наличие
Чтобы проверить, содержит ли карта элемент (значение) для указанного ключа. Использование имеет :
let phoneNumbers = new Map([['5352342', 'Anna'], ['9358432', 'Barbora'], ['9874342', 'Carolina']]);
console.log(phoneNumbers.has('5352342')); // true
Итерации
Последняя вещь о картах – это итерация. Есть несколько способов выполнить эту задачу:
- Петля над значениями, используя ценности
- Петля над ключами, используя Ключи
- Перевернуть пары клавишных значений с использованием записи
Посмотрите на примеры кода:
// create map
let map = new Map();
map.set(4211234, 'Anna').set(2447759, 'Barbora').set(3333123, 'Carolina').set(4444095, 'Denisa');
// iterate over keys
for (key of map.keys()) {
console.log(key)
}
// iterate over values
for (value of map.values()) {
console.log(value)
}
// iterate over pairs
for ([key, value] of map.entries()) {
console.log(key + ': ' +value)
}
Вывод
В этом посте мы наблюдали три встроенные структуры данных в JS -массивах, наборах и картах. Мы проверили наиболее важные операции по этим коллекциям, включая объявление, добавление/удаление элементов, итерации, элементы доступа, получить размер сбора или проверку существования элемента в сборе.
Рекомендации
- Клиффорд А. Шаффер Структуры данных и анализ алгоритма 3 Edn, Dover Publications, 2013
- Рад, Чинда Взлом для создания массивов JavaScript (2018) Freecodecamp, Читайте здесь
- Джордан Ирабор Изучение наборов и карт в JavaScript (2019) Scotch.io, Читайте здесь
Оригинал: “https://dev.to/iuriimednikov/guide-to-javascript-data-structures-arrays-sets-maps-1o09”