From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../learn/javascript/first_steps/arrays/index.html | 678 +++++++++++++++++++++ 1 file changed, 678 insertions(+) create mode 100644 files/ru/learn/javascript/first_steps/arrays/index.html (limited to 'files/ru/learn/javascript/first_steps/arrays/index.html') diff --git a/files/ru/learn/javascript/first_steps/arrays/index.html b/files/ru/learn/javascript/first_steps/arrays/index.html new file mode 100644 index 0000000000..7f38ce4a50 --- /dev/null +++ b/files/ru/learn/javascript/first_steps/arrays/index.html @@ -0,0 +1,678 @@ +--- +title: Массивы +slug: Learn/JavaScript/Первые_шаги/Arrays +tags: + - JavaScript + - Pop + - Push + - shift + - unshift + - Для начинающих + - Массивы + - Статья +translation_of: Learn/JavaScript/First_steps/Arrays +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}
+ +

В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймем, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.

+ + + + + + + + + + + + +
Необходимые навыки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript.
Цель:Понять, что такое массивы и как использовать их в JavaScript.
+ +

Что такое массив?

+ +

Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причем разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счете-фактуре, общая сумма всех цен и распечатка общей цены внизу.

+ +

Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займет намного больше времени, сам код будет менее эффективным и подверженным  ошибкам. Если бы у нас было 10 элементов для добавления в счет-фактуру, это еще куда ни шло, но как насчет 100 предметов? Или 1000? Мы вернемся к этому примеру позже в статье.

+ +

Как и в предыдущих статьях, давайте узнаем о реальных основах массивов, введя некоторые примеры в консоль JavaScript. Мы предоставили один ниже (вы также можете open this console в отдельном окне, или использовать browser developer console, если вам угодно).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

+ +

Создание массива

+ +

Массивы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.

+ +
    +
  1. Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль: + 
    var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;
    +
    2. +
  2. В данном случае, каждый элемент в массиве — это строка , но имейте в виду, что вы можете хранить любой элемент в массиве — строку, число, объект, другую переменную, даже другой массив. Вы также можете перемешивать типы элементов — они не должны все быть числами, строками, и так далее. Попробуйте это: + 
    var sequence = [1, 1, 2, 3, 5, 8, 13];
+var random = ['tree', 795, [0, 1, 2]];
    +
    3. +
  3. Попробуйте сами создать несколько массивов, перед тем как двигаться дальше.
    4. +
+ +

Получение и изменение элементов массива

+ +

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

+ +
    +
  1. Введите следующее в вашу консоль: + 
    shopping[0];
+// возвращает "bread"
    +
    2. +
  2. Вы также можете изменять элемент в массиве, просто дав отдельному элементу массива новое значение. Попробуйте это: + 
    shopping[0] = 'tahini';
+shopping;
+// shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    + +
    Заметка: Мы уже упоминали это прежде, но просто как напоминание — компьютеры начинают считать с нуля!
    +
    3. +
  3. Заметьте, что массив внутри массива называется многомерным массивом. Вы можете получить доступ к элементу внутри массива, который сам находится внутри другого массива, объединив два набора квадратных скобок. Например, для доступа к одному из элементов внутри массива, который является третьим элементом внутри массива random (см. предыдущую секцию данной статьи), мы могли бы сделать что-то вроде этого: + 
    random[2][2];
    +
    4. +
  4. Попробуйте внести некоторые дополнительные изменения в свои примеры массивов, прежде чем двигаться дальше.
    5. +
+ +

Нахождение длины массива

+ +

Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство {{jsxref("Array.prototype.length","length")}}. Попробуйте следующее:

+ +
sequence.length;
+// должно возвратить 7
+ +

Это свойство имеет и другие применения, но чаще всего используется, чтобы сказать, что цикл продолжается, пока он не зациклится на всех элементах массива. Так, например:

+ +
var sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i < sequence.length; i++) {
+  console.log(sequence[i]);
+}
+ +

В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:

+ +
    +
  1. Начать цикл с номера позиции 0 в массиве.
    2. +
  2. Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).
    3. +
  3. Для каждого элемента вернуть его значение в консоли браузера с помощью console.log().
    4. +
+ +

Некоторые полезные методы массивов

+ +

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

+ +

Преобразование между строками и массивами

+ +

Часто у Вас могут быть некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть разделить полезные пункты до более удобной и полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод {{jsxref ("String.prototype.split ()", "split ()")}}. В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.

+ +
+

Заметка: Хорошо, технически это строковый метод, не метод массива, но мы поместили его в массивы, так как он хорошо подходит для них.

+
+ +
    +
  1. Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли: + 
    var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    +
    2. +
  2. Теперь разделим ee посредством запятой: + 
    var myArray = myData.split(',');
+myArray;
    +
    3. +
  3. Наконец, попробуйте найти длину вашего нового массива и извлечь из него некоторые элементы: + 
    myArray.length;
+myArray[0]; // первый элемент в массиве
+myArray[1]; // второй элемент в массиве
+myArray[myArray.length-1]; // последний элемент в массиве
    +
    4. +
  4. Вы можете сделать обратное используя метод{{jsxref("Array.prototype.join()","join()")}} . Попробуйте следующее: + 
    var myNewString = myArray.join(',');
+myNewString;
    +
    5. +
  5.  Другой способ преобразования массива в строку - использовать метод {{jsxref("Array.prototype.toString()","toString()")}} . toString() ,возможно, проще,чем join() поскольку он не принимает параметр, но это ограничивает его. С join()вы можете указать разные разделители (попробуйте выполнить шаг 4 с другим символом, кроме запятой). + 
    var dogNames = ["Rocket","Flash","Bella","Slugger"];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger
    +
    6. +
+ +

Добавление и удаление элементов массива

+ +

Мы еще не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив myArray , с которым мы столкнулись в предыдущем разделе. Если вы еще не прошли этот раздел, сначала создайте массив в консоли:

+ +
var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+ +

Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать {{jsxref("Array.prototype.push()","push()")}} и {{jsxref("Array.prototype.pop()","pop()")}} соответственно.

+ +
    +
  1. Давайте сначала используем метод push() — заметьте, что вам нужно указать один или более элементов, которые вы хотите добавить в конец своего массива. Попробуйте это: + + 
    myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+
    +
    2. +
  2. При завершении вызова метода возвращается новая длина массива. Если бы вы хотели сохранить новую длину массива в переменной, вы бы могли сделать что-то вроде этого: + 
    var newLength = myArray.push('Bristol');
+myArray;
+newLength;
    +
    3. +
  3. Удаление последнего элемента массива можно совершить с помощью вызова метода pop(). Попробуйте это: + 
    myArray.pop();
    +
    4. +
  4. Когда вызов метода завершается, возвращается удалённый элемент. Вы бы могли также сделать такое: + 
    var removedItem = myArray.pop();
+myArray;
+removedItem;
    +
    5. +
+ +

{{jsxref("Array.prototype.unshift()","unshift()")}} и {{jsxref("Array.prototype.shift()","shift()")}} работают точно таким же способом, за исключением того что они работают в начале массива, а не в конце.

+ +
    +
  1. Сначала, попробуем метод unshift(): + + 
    myArray.unshift('Edinburgh');
+myArray;
    +
    2. +
  2. Теперь shift(); попробуйте эти! + 
    var removedItem = myArray.shift();
+myArray;
+removedItem;
    +
    3. +
+ +

Практика: Печать продуктов!

+ +

Вернемся к описанному выше примеру - распечатываем названия продуктов и цен на счет-фактуру, затем суммируем цены и печатаем их внизу. В приведенном ниже редактируемом примере есть комментарии, содержащие числа - каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:

+ +
    +
  1. Ниже комментария // number 1  имеется ряд строк, каждая из которых содержит название продукта и цену, разделенные двоеточием. Нужно превратить их в массив и сохранить его  под названием  products.
    2. +
  2. На строке с комментарием // number 2  начинается цикл for. В строке цикла имеется i <= 0, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когда i меньше или равен 0», при этом i начинается с 0. Нужно заменить i <= 0 условным тестом, который останавливает цикл, когда i перестает быть меньше длины массива products .
    3. +
  3. Под комментарием // number 3 мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (name:price) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, еще раз просмотрите статью Полезные строковые методы, а лучше, посмотрите раздел {{anch("Преобразование между строками и массивами")}} этой статьи.
    4. +
  4. В рамках приведенной выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьей строки в JavaScript.
    5. +
  5. В верхней части кода есть переменная с именем total , которая содержит значение 0. Внутри цикла (под комментарием // number 4) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счет-фактуре. Для этого вам может понадобится оператор присваивания.
    6. +
  6. Под комментарием // number 5 нужно изменить строку так, чтобы переменная itemText была равна "current item name — $current item price",  например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счете-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.
    7. +
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}

+ +

Практика: Топ 5 поисовых запросов

+ +

Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведете запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.

+ +

В этом примере мы собираемся показать гораздо более простое использование - ниже мы даем вам поддельный поисковый сайт с полем поиска. Идея заключается в том, что когда в поле поиска вводятся запросы, в списке отображаются 5 предыдущих поисковых запросов. Когда число терминов превышает 5, последний член начинает удаляться каждый раз, когда новый член добавляется в начало, поэтому всегда отображаются 5 предыдущих терминов.

+ +
+

Примечание: В реальном приложении для поиска вы, вероятно, сможете щелкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.

+
+ +

Чтобы завершить приложение, вам необходимо:

+ +
    +
  1. Добавьте строку под комментарием // number 1, которая добавляет текущее значение, введенное в ввод поиска, к началу массива. Его можно получить с помощью searchInput.value.
    2. +
  2. Добавьте строку под комментарием // number 2, которая удаляет значение, находящееся в конце массива.
    3. +
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}

+ +

Заключение

+ +

Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны себе похлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!

+ +

Осталось только выполнить тестовую задачу, которая проверит ваше понимание статей, которые Вы прочли до этого момента. Удачи!

+ +

Посмотрите также

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}

+ +

В этом разделе

+ + -- cgit v1.2.3-54-g00ecf