В части 1 мы поговорим о введении в массивы и различных способах создания массива в JavaScript.
Массивы в JavaScript: Часть 1 Содержание:
- Введение в массивы.
- Массивы - это объекты.
- Что такое Iterable?
- Различные способы создания массивов.
Введение в массивы
Массивы и другие типы данных существуют в большинстве языков программирования. В программировании логика массивов одинакова, но некоторые части отличаются от одного языка к другому.
Массив представляет собой упорядоченный набор значений, каждое значение называется элементом, и каждый элемент имеет числовую позицию в массиве, известную как индекс.
Он похож на любую переменную в том смысле, что вы можете использовать его для хранения данных любого типа. Однако у него есть одно важное отличие: он может одновременно хранить более одного элемента данных.
JavaScript позволяет массиву содержать элементы с разными типами данных: строковые, логические, даже объекты или массивы. Это означает, что можно создать массив, который содержит строку в первой позиции, число во второй, объект в третьей и т. Д.
Массивы в Javascript отсчитываются от нуля, что означает, что индекс первого элемента равен 0. Это очень важно, потому что это означает, что всегда будет смещение в одну единицу: первый элемент имеет индекс 0, второй элемент имеет индекс 1, и так далее.
Массив в JavaScript - это глобальный объект, который содержит список элементов.
JavaScript очень заботится о массивах. В JavaScript есть множество встроенных методов, которые помогают легче работать с массивами. Прежде чем изучать их, полезно сначала изучить основы работы с массивами.
Предположим, нам нужно сохранить в нашей программе список чисел от 1 до 100. В JavaScript мы объявляем переменную, как показано ниже:
let num1 = 1;
Каждая переменная может содержать только 1 значение. Итак, мы объявим 1, так что осталось 99. Теперь нам нужно объявить 99 уникальных переменных для остальных:
let num2 = 2; let num3 = 3; let num4 = 4; . . . let num100 = 100;
Итак, 100 переменных объявлены для 100 чисел. Не очень практично, правда?
Однако, если мы используем массив, мы можем хранить более одного значения и хранить все числа в одной переменной:
let arr = [1,2,3,...,100];
Массивы - это объекты
Массивы не являются примитивным типом данных в JavaScript, а в JavaScript нет типа данных, называемого массивом. Вместо этого массивы - это объекты в JavaScript.
Объект JavaScript может одновременно содержать разные типы данных: строковые, целые, логические:
let person = {
firstName: "Mahmoud",
lastName: "Yasser",
age: 21
};
Поскольку массив в JS является объектом, они также могут содержать разные типы данных:
let arr = [1, 2, "hello world", 3.14, true];
Что такое Iterable?
Технически: это объект или объекты, которые реализуют итерационный протокол и имеют метод @@ итератора (то есть свойство Symbol.iterator).
Символы - это особый тип значений в JavaScript.
Для нас, людей: объекты, для которых вы можете использовать цикл for-of. Да, это действительно так просто.
Теперь важно то, что не каждая итерация в JavaScript является массивом.
Пока мы работаем с массивами, но есть и другие итерируемые объекты, такие как NodeList, Strings, Maps и Sets, которые мы рассмотрим позже.
Теперь есть еще один термин, который я уже использовал, и это объект, подобный массиву, и это не то же самое, что итерация, итерация, и подобная массиву являются официальными терминами в JavaScript.
Теперь, что такое объекты, подобные массивам?
Эй, сосредоточься на мне, а не на гифке, это не то, что она означает.
Это объекты, которые имеют свойство длины и используют индексы для доступа к элементам, это очень просто.
Как и итерации, не каждый объект, подобный массиву, является массивом! Вот почему они называются массивными.
У нас есть объекты, похожие на массивы, такие как NodeList, String.
NodeLists и String - это объекты, которые имеют длину, индексы и где мы можем использовать для / из, но все еще не настоящий массив, потому что, как вы узнаете, у реальных массивов есть несколько интересных поведений, а также множество важных методов, доступных для них, которые не существуют для этих массивов или повторяемых объектов.
Разобравшись с определениями, давайте немного углубимся в массивы, прежде чем мы также рассмотрим другие объекты, подобные массивам, и итерируемые объекты.
Различные способы создания массивов
Просто правильно, вы используете квадратные скобки, хорошо ли вы знали, что есть несколько разных способов создания массива?
Const arr = [1]; Const arr = Array(1); Const arr = new Array(1); Const arr = [‘Hi’]; Const arr = Array(‘Hi’); Const arr = new Array(‘Hi’); Const arr = Array.of(1); Const arr = Array.of(‘Hi’); Const arr = Array.from(‘Hi’); Const arr = Array.from(1);
Как видите, это не совсем разные методы, но на самом деле то, как эти методы создают массивы, также иногда зависит от типа данных, которые вы передаете этому методу.
Итак, давайте рассмотрим различные способы создания массивов, прежде чем мы затем будем работать с ними, и для этого, конечно же, мы не просто взглянем на это, мы также увидим, как это ведет себя и когда вы, возможно, захотите использовать какой.
Есть два разных способа создать массив JavaScript:
1. Литералы массива
Давайте посмотрим на первый способ создания массива, рекомендуемый способ использования - квадратные скобки [] и наиболее распространенный способ.
Поэтому обязательно используйте это для создания массива в очень редких случаях, когда вы хотите создать массив по-другому.
Const Numbers = [1, 2, 3];
Теперь, когда вы видите, что вы разделяете значения в массиве запятой, вы также можете иметь конечную запятую в конце, это не повредит, вы можете иметь это для удобочитаемости, если хотите, но я рекомендую не использовать, поместите это конечная запятая
Const Numbers = [1, 2, 3,];
И если я зарегистрирую этот массив на консоли, неудивительно, что он напечатает мой массив [1,2,3] в этой форме.
Как я уже сказал, это один из способов создания массивов, и, как вы видели ранее, существуют и другие методы.
2. Конструктор массива
Давайте воспользуемся другим способом создания массива с помощью специального ключевого слова (ключевого слова new), теперь этот метод называется функцией-конструктором, а новый метод Array создает новый массив.
Теперь давайте рассмотрим это на примере, создав новый массив с этими методами, но с пустым массивом, и посмотрим на результат.
Const Numbers = new Array(); Console.log(Numbers); // []
Конечно, на выходе будет пустой массив с нулевой длиной.
Давайте изменим его, и допустим, мы добавим в массив Hi и Welcome, два элемента, разделенных запятой ,, и вы можете передать столько параметров, потому что вы вызываете здесь функцию, так что вы можете передавать столько параметров, сколько хотите.
Const Alpha = new Array(‘Hi’, ‘Welcome!’); Console.log(Alpha); // [‘Hi’, ‘Welcome!’]
Теперь становится странно, если мы изменим эти значения, которые мы передали, и передадим их в числах. Например, если мы передадим два числа.
Const arr = new Array(1, 2); Console.log(arr); // [1,2]
Ладно, все в порядке.
Интересная вещь, которую следует отметить в функции Constructor, - это ее удобное переопределение.
Переопределение заключается в том, что если вы передаете только один аргумент, и это целое число, функция конструктора создаст для вас пустой массив указанной длины.
Теперь начинается странное поведение, если я передам только одно число. Если вы это сделаете, посмотрим, что мы получим.
Const arr = new Array(5); Console.log(arr); [ <5 empty items> ]
Подождите минутку, у нас есть массив длиной 5, который пуст, мы этого раньше не видели.
По сути, это пустой массив фиксированного размера, фиксированной длины.
Честно говоря, вам это редко понадобится, но это странный способ создания массива, который, как я уже сказал, вам не понадобится так часто, но вы должны знать о том факте, что если вы по какой-либо причине используете это new Array(), если вы передадите единственное число, это будет интерпретироваться как длина этого массива, и будет создан пустой массив такой длины вместо массива с этим единственным числом в качестве единственного значения.
Это просто специальность, о которой вам следует знать.
Как я уже упоминал, в подавляющем большинстве случаев вы будете создавать массивы с обозначением квадратных скобок [], что, кстати, также лучше с точки зрения производительности, но если вы когда-нибудь встретите код, в котором вы видите что-то вроде этого, в каком-то коде, который вы не писали, или в коде, написанном вами, где по какой-то причине вы создаете массив с ключевым словом new, а затем помните об этом особом поведении.
Кстати, другой способ создания массива - опустить ключевое слово new, и это будет вести себя так же, как если бы вы его добавили.
Const arr = Array(5); Console.log(arr); [ <5 empty items> ]
Итак, здесь мы получаем пустой массив длиной 5, как только мы добавляем более одного числа или любых других значений, даже если это всего лишь один элемент, мы получаем массив с этими элементами.
Const arr = Array(1, 5); Console.log(arr); // [1, 5] Const arr = Array(‘Hi’); Console.log(arr); // [‘Hi’]
Итак, с ключевым словом new или без него вы можете добавить его или опустить, это, в конце концов, вызов Array в качестве функции даст вам массив, как мы видели, но опять же, как правило, вы должны использовать квадратные скобки [] вместо этого.
Другой способ создания массива - использовать Array.of, это специальный метод для этого глобально доступного объекта массива, и вы снова можете передавать значения.
Const arr = Array.of(1, 2); Console.log(arr); // [1, 2]
Опять же, вам следует использовать квадратные скобки [], потому что это будет медленнее с точки зрения производительности, чем квадратные скобки [].
Вы можете задаться вопросом, почему он существует тогда, как и new Array(), есть редкие нишевые случаи, когда вам могут понадобиться такие функции, потому что вам нужно динамически создавать массив определенной длины, но, в конце концов, на данный момент я просто хочу, чтобы вы были зная об этих методах, поскольку вы можете встретить их в других фрагментах кода, у вас не будет никаких вариантов использования, в которых вам нужно было бы создать массив с этими методами.
Теперь более полезен другой способ создания массива, Array.from() он особенный, он не использует несколько чисел, как мы это делали раньше.
Const arr = Array.from(1, 2); Console.log(arr); // TypeError: 2 is not a function
Вы видите, что у меня возникла ошибка, потому что я не должен передавать здесь несколько аргументов, вместо этого требуется итерируемый объект или объект, подобный массиву, и это интересная вещь.
Array.from() в конце позволяет преобразовать итерируемый объект или объект, подобный массиву, который еще не является массивом, в массив.
Конечно, вы можете передать массив, но это не имеет особого смысла, потому что это уже массив.
Const arr = Array.from([1,2]); Console.log(arr); // [1,2]
Так что, если вы это сделали, это сработает, но вы не получите многого.
Более интересно, если у вас есть объект, подобный массиву, или итерация, которую вы хотите преобразовать в массив.
Const arr = Array.from(‘Hi!’); Console.log(arr); // [‘H’,’i’,’!’];
Если мы передали строку в Array.from(), мы получим массив, в котором она разделена на отдельные символы, составляющие этот массив, что может быть полезно, если у вас есть строка, которую вы хотите разделить на отдельные символы, Array.from() упрощает и дает вам реальный массив, с которым вы можете работать.
Этот метод также полезен, если у вас есть несколько элементов в DOM, которые вы хотите выбрать NodeList, и вы хотите что-то сделать с этими узлами, что вы можете сделать с реальным массивом.
Const items = document.querySelectAll(‘li’); Console.log(items);
Когда вы это сделаете, вы преобразуете этот NodeList в реальный массив, с которым вы сможете выполнять некоторые операции с элементами этого массива.
Последний способ, которым мы сейчас поговорим об этом, - это Array.of(), он работает как Array.from, но без странного поведения, когда вы передаете ему одно число, он вернет массив, содержащий это единственное число.
Const arrr = Array.of(1,2,3); Console.log(arr); // [1,2,3] Const arr = Array.of(4); Console.log(arr); // [4] Const arr = Array.of(1,2,3,4,5,”str”); Console.log(arr); // [1,2,3,4,5,”str”]
Вот как можно создавать массивы.
Вкратце, вы обычно хотите использовать обозначение квадратных скобок [] и что Array.from может быть полезно для преобразования массивоподобных или повторяемых объектов в реальные массивы.
Если у вас есть вопросы, как всегда, обращайтесь через Facebook ❤
