Эта статья даст больше информации о массивах JavaScript с нуля.
Содержание, которое мы собираемся покрыть:
- Введение в массивы
- Создание массивов
- Основные методы массива, такие как push, pop, shift, unshift и splice.
- Циклы for in, for of и forEach
- Сопоставьте, отфильтруйте и уменьшите
- Структурирование массива и деструктурирование массива
- Операторы Rest и Spread
Что такое массив? Зачем нам это нужно? Почему бы не продолжить работу с переменными вместо массивов?
Проще говоря, массивы используются для хранения более одного свойства переменной.
Чтобы понять это, давайте возьмем пример с шахматными фигурами.
Если вы хотите хранить каждое свойство/характеристику каждой шахматной фигуры с помощью переменных, тогда потребуется больше переменных.
Большее количество переменных для описания характеристик только одной части будет беспорядочным, займет больше места, а отладка кода будет сложнее. .
Вот вам и концепция массивов. Массивы могут уменьшить вышеуказанные проблемы за счет своих преимуществ.
Массивы могут хранить более одного значения для одной переменной.
Синтаксис массива
empty_array=[] array1 = [value1,value2,value3]
Используя приведенный выше синтаксис, мы можем создать массив.
Основные методы массива
Отправить
Push — это метод массива, который используется для отправки/вставки элемента в n-е/последнее место в массиве.
Аргумент вход будет значением, к которому мы хотим добавить текущий массив.
Метод push возвращает длину массива.
array_of_numbers=[1,2,3,4,5] array_of_numbers_after_push = array_of_numbers.push(10) console.log(array_of_numbers) console.log(array_of_numbers_after_push)
Здесь array_of_numbers (строка №: 4) обозначает изменение массива, а array_of_numbers_after_push — это вывод возвращаемого значения метода push, т.е. длина массива
POP
Метод pop используется для удаления элемента, расположенного в n-м/последнем месте массива.
В pop входной аргумент будет nil, и он возвращает элемент, который был удален pop.
array_of_numbers=[1,2,3,4,5] array_of_numbers_after_pop = array_of_numbers.pop() console.log(array_of_numbers) console.log(array_of_numbers_after_pop)
Сдвиг
Метод shift сдвигает все элементы массива влево. Это приводит к удалению первого элемента массива.
Методы сдвига возвращают элементы, которые были удалены смещением.
array_of_numbers=[1,2,3,4,5] array_of_numbers_after_shift = array_of_numbers.shift() console.log(array_of_numbers) console.log(array_of_numbers_after_shift)
Включить
Unshift сместит элементы слева направо. В результате заданное число будет помещено на первую позицию.
Unshift возвращает длину массивов.
array_of_numbers=[1,2,3,4,5] array_of_numbers_after_unshift = array_of_numbers.unshift(10) console.log(array_of_numbers) console.log(array_of_numbers_after_unshift)
Соединение
Метод splice будет объединять/вырезать массив, соответствующий заданным аргументам.
Входными данными будут начало индекса, а затем количество значений (включая начальное значение индекса), которые необходимо удалить, а затем его заменяемые значения.
Метод splice возвращает элементы, которые были удалены из массива.
Давайте посмотрим на это на простом примере.
let array_of_numbers=[1,2,3,4,5,6,7,8,9,10] let array_of_numbers_after_splice=array_of_numbers.splice(4,5) console.log(array_of_numbers) console.log(array_of_numbers_after_splice)
Надеюсь, вы понимаете удаление элементов с помощью метода сращивания.
Мы также можем заменять элементы с новым значением вместо элементов, которые были удалены ранее методом сращивания.
let array_of_numbers=[1,2,3,4,5,6,7,8,9,10] let array_of_numbers_after_splice=array_of_numbers.splice(4,5,11,12) console.log(array_of_numbers) console.log(array_of_numbers_after_splice)
Здесь мы ввели значения замены как 11 и 12, которые были заменены в выходных данных.
Циклы
Для цикла
Цикл for in в основном работает с индексами заданного массива.
array_of_numbers=[1,2,3,4,5]
for (i in array_of_numbers){
console.log(array_of_numbers[i])
}
Он не может напрямую работать со значениями. Для этого варианта использования есть еще один цикл, называемый циклом for of.
Давайте посмотрим на цикл for of.
Для цикла
Цикл For of в основном работает с значениями массива, в отличие от цикла for in, который работает в основном с индексом массива. .
array_of_numbers=[1,2,3,4,5]
for (values of array_of_numbers){
console.log(values)
}
Надеюсь, вы поняли разницу между циклами for-in и for-of.
В основном мы работаем с значениями, а не с индексом значений, поэтому цикл for of оказывает большее влияние, чем цикл for in. петля.
Мы видели циклы for-in и for-of, эти циклы называются внешними циклами, поскольку они являются внешним свойством массивов, и массив не владеет этими циклами.
Существует один цикл с именем цикл forEach, который принадлежит массиву и называется внутренний цикл.
Давайте посмотрим больше об этом.
Цикл Foreach
Code
Without arrow function
let array_of_numbers = [1, 2, 3, 4, 5]
array_of_numbers.forEach(function(value) {
console.log(value);
})
With arrow function
let array_of_numbers = [1, 2, 3, 4, 5]
array_of_numbers.forEach(value => console.log(value))
Сопоставление, фильтрация и сокращение
Давайте рассмотрим эти концепции на простом примере.
Предположим, вам нужно вывести четные числа от 1 до 100 одно за другим, используя цикл for, какой оператор вы будете использовать?..
Просто, это оператор модуля, верно?
Но можно ли передавать каждое значение в цикл for?.. не увеличит ли это временную сложность?
Можем ли мы сначала выполнить оператор модуля и отфильтровать четные числа, а затем использовать цикл for для печати этих чисел?
Ага. Мы можем это сделать.
Появляется метод filter.
Давайте посмотрим код, вы поймете.
let array_of_numbers = [1, 2, 3, 4, 5, 6] array_of_numbers.filter(value => value % 2 === 0). forEach(value => console.log(value))
Здесь перед переходом к циклу forEach мы фильтруемчетные числа и используем цикл forEach только для >перечислите элемент.
Что, если вы хотите использовать эти отфильтрованные значения для выполнения дальнейших операций до перехода в цикл forEach?
Наступает метод карты.
Давайте разберемся с методом карты на простом коде.
let array_of_numbers = [1, 2, 3, 4, 5, 6] array_of_numbers.filter(value => value % 2 === 0). map(value => Math.sqrt(value)). forEach(value => console.log(value))
Здесь мы сначала отфильтровали четные числа с помощью метода filter, затем нашли квадратный корень из отфильтрованных чисел с помощью метода map, а затем вывести все квадратные корни, используя цикл forEach.
Надеюсь, вы поняли о фильтре и карте.
Теперь давайте посмотрим на метод reduce.
Само название означает, что оно сведет числа к одному. Посмотрим на простом коде.
let array_of_numbers = [1, 2, 3, 4, 5, 6] sqrt = array_of_numbers.filter(value => value % 2 === 0). map(value => Math.sqrt(value)). reduce((sum, value) => sum + value) console.log(sqrt)
Здесь мы добавили квадратные корни всех значений, полученных методом map, и присвоили их переменной sqrt. Когда мы попытались напечатать переменную, она выводит результат.
Таким образом, мы можем интегрировать методы сопоставления, фильтрации и редукции для решения нашего варианта использования в массивах.
Структурирование и деструктурирование массивов
Давайте сначала посмотрим на структурирование массивов.
Когда мы конструируем массив с помощью переменных, это называется структурированием массива.
Структурирование массива — это один из способов создания массива.
Давайте посмотрим на это на простом коде.
let element1 = 2 let element2 = 4 let element3 = 6 let element4 = 8 let element5 = 10 let array = [element1, element2, element3, element4, element5] console.log(array)
Надеюсь, вы поняли, что такое структурирование массива, а теперь давайте посмотрим на деструктурирование массива.
Деструктуризация массива противоположна структурированию массива.
Давайте разберемся с этим на простом коде.
let array = [2, 4, 6, 8, 10] let [element1, element2, element3, element4, element5] = array console.log(element1) console.log(element2) console.log(element3) console.log(element4) console.log(element5)
Это приводит к двум важным концепциям, которые часто используются в JavaScript, а именно к операторам Rest и Spread.
Оператор отдыха
Когда мы не знаем, сколько аргументов мы передадим функции, мы будем использовать нотацию ….
Давайте разберемся в этом на простом примере.
let result = function(element1, element2, element3, ...remaining_elements) {
sum = element1 + element2 + element3
for (j of remaining_elements) {
sum = sum + j
}
return sum
}
console.log(result(10, 20, 30, 40, 50))
В этом примере мы передаем 5 аргументов/атрибутов в 4, функциональные параметры равны 4, но у нас есть нотация … в 4-м параметре,
таким образом, первые 3 аргумента будут сохранены в 3 параметрах, а оставшееся количество параметров «n» будет сохранено в этом 4-м параметре вместе с … обозначением.
Здесь мы использовали … нотацию в функциональных параметрах, поэтому это называется оператор покоя.
Если мы используем … обозначение в аргументах/атрибутах, то это называется параметром распространения.
Давайте посмотрим, как использовать … нотацию на стороне аргумента в простом коде ниже.
let result = function(element1, element2, element3, element4, element5) {
sum = element1 + element2 + element3 + element4 + element5
return sum
}
let [element1, ...remaining_elements] = [10, 20, 30, 40, 50]
console.log(result(element1, ...remaining_elements))
В операторе rest мы используем … в параметрах, поэтому мы можем вызывать любое количество аргументов и в spread, мы используем … в аргументах, поэтому мы можем передавать любое количество параметров.
Надеюсь, вы поняли разницу между операторами отдыха и спреда.
Вот и все.
Спасибо за ваше терпение читает. Следите за моими будущими статьями.
Вы можете указать код здесь
