Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск

“Кто из вас в этом году быстрее всех выполнит план, тот получит от меня шоколадку.- Шеф, нам бы зарплату...- Так, начинается! Я уже купил шоколадки!” - анекдот дня


Разработка программ игр и приложений->JavaScript с нуля, часть 2. Что такое массив в программировании

JavaScript с нуля, часть 2. Что такое массив в программировании

0

Добавил: Катя Самохина

Дата: 03.09.2020


Вторая часть цикла статей JavaScript с нуля. На этот раз в статье будет рассмотрена тема “массивы”. Начиная свой путь разработчика приложений, вы возможно столкнетесь с тем, что огромное количество данных придется хранить в коде. Для этих целей можно использовать переменные и у каждой переменной будет свое значение, но это не целесообразно. В этом случае придется вызывать каждую переменную по отдельности и с ней работать, из- за чего скрипт существенно увеличится. Для хранения группы данных лучше использовать массив.


Что такое массив в программировании? Это сборщик данных, где хранятся данные любых типов: булевые, численные и строковые. Фактически туда можно сохранить имена городов, людей, название цветов, любимые блюда и так далее. Нередко массивы используются для gui интерфейса программы, т.е. например menu, со значением “Старт”, ”Настройки”, ”Выход”. Обычно массив обозначается array, но так как JavaScript не является строго типизированным, в нашем случае достаточно написать переменную и в значении указать квадратные скобки: var arr = [];
И таким образом будет понятно, что это за переменная.


Следующее, что необходимо знать, все массивы начинаются не с единицы, а с нуля. Вместо один, два, три, четыре, пять будет 0,1,2,3,4,5.
Массивы встречаются двух видов.

  • Индексированные – ключи индексы при вызове - это целые числа, т.е. например набор данных var name = [“Саша”,”Андрей”,”Женя”]; для вывода “Саша”, нужно написать name[0]. Для вывода ”Андрей”, нужно написать name[1], для “ Женя” – name[2]

  • Ассоциативный – это когда группа элементов массива состоит из пары “ключ”:”значение”.
    Var array = {“Name”:”Aleksandr”, ”Age”:”31”, ”City”:”Moscow”}. Ключ “Name”: значение ”Aleksandr”, ключ”Age”:значение”31”и так далее.

В качестве примера я расскажу, где применяются массивы.


Что такое массив в программировании? Игровой рюкзак из любой RPG игры – теория.


Практически во всех играх применяется массив. Самый распространенный вариант это rpg игра, где главный герой перемещается по локациям и сражается с монстрами. При победе над противником из поверженного врага выпадают разные предметы и артефакты.


Все полученные трофеи в бою нужно куда-то складывать. Для этого у героя есть специальное место рюкзак или как обычно говорят инвентарь. Вот пример из одной игры, пронумерованный инвентарь, каждая ячейка занимает свое место в массиве.
что_такое_массив_в_программировании_1


Хотите увидеть практическое применение рюкзака, читайте мою другую статью. Как создать игру. Инвентарь. Я неспроста привожу пример только rpg игр. Там практически весь мир состоит из массивов. Возьмем в качестве примера, окружающую среду, по которой бегает герой. Пусть это 2d изометрическая игра, наподобие Diablo.


Попадающиеся на пути игрока препятствия - дома, деревья, различные персонажи, все это декорации и NPC (от англ. Non-Player Character - “персонаж, управляемый не игроком” ). Они размещены в каждом отдельном квадрате именуемым “Тайтл”.


Игровой мир многомерный массив


Смысл задачи, который мы выполним в качестве примера, заключается в том ,чтобы создать игровой мир. Для этого добавим в документ тег div с уникальным “id, например, назовем world”.
что_такое_массив_в_программировании_2


На этом теге мы должны нарисовать, таблицу и раскрасить разными цветами. Как указать коду, какие цвета применять к определенной ячейке? Довольно просто, создадим двухмерный массив, он будет заполнен единицами и нулями.


  • Ноль – означает земля

  • Единица – трава


В итоге должно получится, участок из травы по которому проходят тропинки. Пример на рисунке.
что_такое_массив_в_программировании_2


Вначале нужно добавить переменные.что_такое_массив_в_программировании_4


В код добавлены комментарии, объяснения не требуются. Чтобы при запуске в браузере html страницы стало появляться поле, нужно создать три функции:

  • DrawGame – основная функция, которая отвечает за работу всего скрипта и запускает оставшиеся две функции.

  • createTitle – с помощью цикла создает таблицу. В ячейки “td” автоматически добавляется идентификатор “arr” с “x, y”, расположение клетки id=arr[x,y]. В table атрибут width переменная tileW умножается на mapW, таким образом, устанавливается размер всего поля в сумме всех ячеек. Ну, и разумеется у td тегов, так же проставляется размер ширины и высоты указанные в переменных.
    что_такое_массив_в_программировании_5
    В итоге происходит конкатенация (присоединение, сцепление) и полученный результат выводится в тег div c атрибутом id world. Переменная table выступает как связующее звено, объединяющая все ячейки таблицы воедино.

  • colorTitle – теперь пора перекрасить ячейки в цвета указанные в массиве, опять как и в предыдущем примере создается вложенный цикл. С помощью switch…case проверяется цифра 1,0 и устанавливается цвет. К свойству style.background присваивается нужное значение и в результате отобразиться табличная сетка с цветными ячейками.
    что_такое_массив_в_программировании_6


В конце статьи приложен исходный код. Если вы хотите узнать, как сделать изометрическую модель мира 2d, с возможностью управлять персонажем переходите по ссылке и читайте.


Что такое массив в программировании? Функции


Для работы с массивом существует специальные функции. Для примера будет использован массив. var arr = [ 'a', 'b', 'c' ];


Функции:


  1. Push – добавляет элементы, “arr.push("d");”, в конец добавится d.

  2. Pop – удаляет последнею букву. Никакие параметры не принимает, просто к массиву через точку дописывается эта функция и пустые скобки, в итоге последний элемент массива стирается.

  3. Slice(start,end) – копирование начиная со “start” и заканчивая “end”, но исключая “end”.

  4. Splice – удаляет элементы и по возможности заменяет другими. Первый параметр функции это начало, откуда должно происходить удаление. Например, если записать вот так arr.splice(0,2);, уберутся два первых элемента, останется “c”. Чтобы произвести замену, добавьте еще два параметра: arr.splice(0,2,”d”,”g”);. В итоге у нас выйдет [“d”,”g”,”c”].

  5. Shift – убирает начальный элемент, оставляя b,c.

  6. Unshift – добавляет указанный “element” в начало. Имейте ввиду, что в скобках должна находится буква, которую хотите добавить, а не номер массива.

  7. Concat – создает новый массив и копирует значения в старый, если написать вот так
    alert( arr.concat(["3", "4"]) );, то при запуске появится сообщение, где помимо букв, так же будут еще и цифры. Используя одну функцию можно создавать несколько массивов, достаточно в скобках перечислить их через запятую.

  8. Split – эта функция разбивает строку на массив, если в строке перечислены имена, то их можно вывести по отдельности.
    что_такое_массив_в_программировании_7

  9. Join – противоположность “сплит”, создает строку из array, вставляя указанный в скобках “Джоин” элемент.
    что_такое_массив_в_программировании_8

  10. forEach – запускает функцию и перебирает данные в теле цикла, выводится результат.
    что_такое_массив_в_программировании_9


Все остальные способы работы с array, вы можете видеть в исходнике приложенного к статье. Ссылка на скачивание находятся внизу статьи, комментарии в исходниках прилагаются, и вы легко разберетесь.


Ассоциативный массив. Применение объекта Map.


В начале статьи упоминалось про тип массива, где происходит присваивания путем “ключ”:”значение”. Этот вариант применялся в прошлом. После релиза EСMAScript 2015 в JavaScript теперь можно использовать метод Map. Давайте посмотрим, как это будет выглядеть на простом примере.
что_такое_массив_в_программировании_10


Чтобы получить информацию о количестве занесенных данных в array воспользуйтесь alert или console.log. Примерно вот так: “console.log(arr.size);”.


Для получения результата нажмите на документе правой кнопкой мыши и выберите посмотреть код, во вкладке console, появится информация.
что_такое_массив_в_программировании_11


Второй способ получить консольную информацию, это нажать клавишу F12.
Теперь вернемся к нашему коду и воспользуемся функцией set для добавления еще одной строки.
что_такое_массив_в_программировании_12


Попробуйте выполнить следующее: добавить уже к существующему ключу значение, например key1 присвоим value10. Изначально непонятно, какой результат получился. Используем консоль, для вывода значения. Пример, будет выглядеть вот так.
что_такое_массив_в_программировании_13


Вот и результат. Первый, элемент массива стал value10. В ассоциативном массиве при работе с Map, есть специальные функции.


  • Set – добавить новый ключ со значением

  • Get – укажите в скобках имя ключа и вы получите значение, чтобы просмотреть результат воспользуйтесь одним из способов вывода на экран например alert или console.

  • Has – проверяет существования ключа в массиве, если записать в скобках ключ над котором хотите выполнить проверку появится сообщение true или false.
    Delete –удаляет указанный в скобках ключ в переменной arr.

  • Clear – очищает полностью array.

  • Size – проверяет размер массива. Пример: можно выполнить clear, а потом использовать size для проверки и вы увидите, что результат вывода ноль.


Все примеры работы с этими функциями находится в архиве в файле example3. Скачать можно по ссылке внизу статьи.
Продемонстрируем несколько примеров. Выведем добавленные данные на экран. Для этих целей используется цикл for. Выглядеть это будет вот так. Из примера видно, что мы получим key.
что_такое_массив_в_программировании_14


Значение получается с помощью values(), показано на следующем примере.что_такое_массив_в_программировании_15


Взглянем, как будет выглядеть пример, если использовать entries. В этом случае мы получим все записи и сможем вывести и ключ и значение.
что_такое_массив_в_программировании_16


Метод entries, по умолчанию используется, когда мы работает с массивом, поэтому его можно опустить и в цикле просто написать arr.
что_такое_массив_в_программировании_17


Ещё один способ сделать переборку это использовать forEach.
что_такое_массив_в_программировании_18


Если требуется преобразовать массив в Json и обратно, попробуйте выполнить следующий вариант.
что_такое_массив_в_программировании_19


Ассоциативный массив: объект


Дальше речь пойдет об использовании ассоциативного массива как объекта. Чтобы инициализировать переменную как объект, для последующего хранения данных используйте любой из следующих способов.
что_такое_массив_в_программировании_20


Стандартный набор данных можно создать, когда переменная инициализирована, пример ниже.
что_такое_массив_в_программировании_21


Чтобы добавить значение нужно записать переменную с новым ключом и присвоить текст или любые другие данные.
что_такое_массив_в_программировании_22


Заметьте, что добавление новых ключей происходит только в том случае, если они отсутствует в переменной arr. Указав в массиве существующий ключ, произойдет просто автозамена значения.
Помимо квадратных скобок вы можете вызывать ключ через точку и присвоить ему данные. Как показано в следующем примере.
что_такое_массив_в_программировании_23


Получения данных, можно выполнить следующими способами- в квадратных скобках или через точку. Чтобы отобразить эти данные, как и в предыдущих примерах, используйте alert или console.
что_такое_массив_в_программировании_24


Отобразить счетчик созданных ключей можно следующим образом console.log(Object.keys(arr).length);. После этого в консоли отобразится результат, в моем случае 4.


Когда есть необходимость удалить один из ключей, используйте команду delete.
delete arr["key1"];
Чтобы сделать проверку на существование keys, можно применить в коде два способа.
что_такое_массив_в_программировании_25


Ранее “ключ1”, был удален (delete), поэтому при проверке он не будет найден, во втором случае будет найден “ключ2”.
Перебрать массив в цикле и вывести результат воспользуйтесь конструктором for..in
что_такое_массив_в_программировании_26


Последний пример, как и в предыдущей главе, это преобразование в json и обратно.
что_такое_массив_в_программировании_27


Заключение


Статья получилась объемной, так как я попыталась раскрыть полностью темы работы с массивами. Мы разобрали несколько способов создания хранилищ данных (array). Прочитав статью, надеюсь вы поняли, что такое массив в программировании? Если статья вам понравилась, ставьте одобрение, палец вверх. Если что-то непонятно, задавайте вопросы в комментариях или скачайте архив_с_исходниками, там три примера и в каждом разобран конкретно случай из статьи.


Разработка программ игр и приложений->JavaScript с нуля, часть 2. Что такое массив в программировании


Перейти на главнуюВагон игр Назад

Просмотров: 64

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика