Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


Карты JavaScript

Карта содержит пары ключ-значение, где ключи могут быть любого типа данных.

Карта запоминает исходный порядок вставки ключей.

Карта имеет свойство, которое представляет размер карты.

Методы карты

МетодОписание
новая карта()Создает новый объект карты
набор()Устанавливает значение для ключа на карте
получить()Получает значение ключа на карте
чистый()Удаляет все элементы с карты
Удалить()Удаляет элемент карты, указанный ключом
имеет()Возвращает true, если ключ существует на карте
для каждого()Вызывает обратный вызов для каждой пары ключ/значение на карте.
записи()Возвращает объект итератора с парами [ключ, значение] в Map
ключи()Возвращает объект итератора с ключами на карте
ценности()Возвращает объект итератора значений в Map
ИмуществоОписание
размерВозвращает количество элементов карты

Как создать карту

Вы можете создать карту JavaScript следующим образом:

  • Передача массива вnew Map()
  • Создайте карту и используйтеMap.set()

новая карта()

Вы можете создать карту, передав массив new Map()конструктору:

Пример

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Карта.set()

Вы можете добавлять элементы на карту с помощью set()метода:

Пример

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Этот set()метод также можно использовать для изменения существующих значений Map:

Пример

fruits.set("apples", 500);

Карта.получить()

Метод get()получает значение ключа на карте:

Пример

fruits.get("apples");    // Returns 500


Размер карты

Свойство sizeвозвращает количество элементов на карте:

Пример

fruits.size;

Карта.удалить()

Метод delete()удаляет элемент Map:

Пример

fruits.delete("apples");

Карта.очистить()

Метод clear()удаляет все элементы из карты:

Пример

fruits.clear();

Карта.has()

Метод has()возвращает true, если на карте существует ключ:

Пример

fruits.has("apples");

Попробуй это:

fruits.delete("apples");
fruits.has("apples");

Карты — это объекты

typeofвозвращает объект:

Пример

// Returns object:
typeof fruits;

instanceofКарта возвращает истину:

Пример

// Returns true:
fruits instanceof Map;

Объекты JavaScript и карты

Различия между объектами JavaScript и картами:

Объекткарта
Итерируемый Не итерируется напрямую Непосредственно повторяемый
Размер Не иметь свойства размера Иметь свойство размера
Ключевые типы Ключи должны быть строками (или символами) Ключи могут быть любого типа данных
Порядок ключей Ключи не в порядке Ключи заказываются вставкой
По умолчанию Иметь ключи по умолчанию Нет ключей по умолчанию

Карта.для каждого()

Метод forEach()вызывает обратный вызов для каждой пары ключ/значение в Map:

Пример

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

Карта.keys()

Метод keys()возвращает объект итератора с ключами в карте:

Пример

// List all keys
let veggies = "";
for (const x of fruits.keys()) {
  veggies += x;
}

Карта.значения()

Метод valuesвозвращает объект итератора со значениями в карте:

Пример

// Sum all values
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Карта.entries()

Метод entries()возвращает объект итератора с [key,values] в Map:

Пример

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Объекты как ключи

Возможность использовать объекты в качестве ключей — важная функция Карты.

Пример

// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

// Create a Map
const fruits = new Map();

// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Помните: ключ — это объект (яблоки), а не строка («яблоки»):

Пример

fruits.get("apples");  // Returns undefined

Поддержка браузера

Карты JavaScript поддерживаются во всех браузерах, кроме Internet Explorer:

Chrome Edge Firefox Safari Opera