Если вы понимаете хинди 👇
Давайте начнем блог 🎯🎯🎯🎯
🤔Что такое массивы?
Массивы — это просто списки. По сути, массив — это объект, который используется для хранения нескольких значений с их индексами в одной переменной.
Значения внутри массива называются элементами.
🍌Зачем нам это нужно?
Предположим, вы идете в супермаркет, чтобы купить фрукты. Вы хотите объявить переменную в JavaScript, в которой хранится название купленного вами фрукта, и при этом вы также хотите сохранить, какие фрукты вы купили и в каком порядке. Например: Сначала вы купили апельсины, потом яблоки, потом бананы. Итак, как вы будете решать эту проблему?
🥳Для этого можно создать массив.
// 👇 array with Element --> 'oranges', 'apples', 'bananas' const fruits= ['oranges', 'apples', 'bananas'] console.log(fruits) /* Output --> [ 'oranges', 'apples', 'bananas' ] */
🏵️Понимание массивов
Каждый элемент массива имеет порядковый номер. Загвоздка здесь в том, что номер индекса начинается с 0.
// 👇 array const fruits= ['oranges', 'apples', 'bananas']
👆В коде у апельсинов будет 0 порядковый номер, у яблок 1 порядковый номер, у бананов 2 порядковый номер.
Вы можете получить элемент в массиве, указав его порядковый номер.
// 👇 array const fruits= ['oranges', 'apples', 'bananas'] console.log(fruits[0])
😏Функция распространения в массивах
Функция распространения работает в массивах так же, как и в объектах.
const fruits = ['oranges', 'apples', 'grapes'] // 👇 ... will spread the elements of fruits in moreFruits const moreFruits = ['bananas', 'watermelons', ...fruits] console.log(moreFruits);
🔪Разрушение массивов
const fruits = ['oranges', 'apples', 'grapes'] const [oranges, apples, grapes] = fruits; console.log(oranges, apples, grapes);
🫠Методы в массивах
BASIC1️⃣toString()
Что делать, если вы хотите преобразовать массив в строку.
// 👇 array const fruits= ['oranges', 'apples', 'bananas'] // 👇 toString() will convert array into a string console.log(fruits.toString()) /* Output --> oranges,apples,bananas */
BASIC2️⃣присоединиться()
Что, если вы хотите напечатать название этих фруктов и поместить между ними символ.
// 👇 array
const fruits= ['oranges', 'apples', 'bananas']
// 👇 join() will put ' + ' between the elements of an array.
console.log(fruits.join(' + '))
/*
Output
--> oranges + apples + bananas
*/
BASIC3️⃣поп()
Что делать, если вы хотите удалить последний элемент массива.
// 👇 array const fruits= ['oranges', 'apples', 'bananas'] // 👇 pop() will remove the last element from the array fruits.pop() console.log(fruits); /* Output --> ['oranges', 'apples'] */
BASIC4️⃣push()
Что делать, если вы хотите добавить новый элемент в свой массив
// 👇 array
const fruits= ['oranges', 'apples', 'bananas']
// 👇 push() will add a new element 'grapes' in the array
fruits.push('grapes')
console.log(fruits);
/*
Output
--> ['oragnes','apples', 'bananas', 'grapes']
*/
🛑Примечание: следует отметить, что вы можете добавить несколько элементов в параметры push().
// 👇 array
const fruits= ['oranges', 'apples', 'bananas']
// 👇 push() will add a new element 'grapes' in the array in the last
fruits.push('grapes', 'peaches')
console.log(fruits);
/*
Output
--> ['oranges', 'apples', 'bananas', 'grapes', 'peaches']
*/
BASIC4️⃣shift()
Представьте, что вы добираетесь до дома, и ваша мама кричит вам, что фрукты, которые вы купили первыми, не нужны. Тогда что ты будешь делать
// 👇 array const fruits= ['oranges', 'apples', 'bananas'] // 👇 shift() will remove the first element and shift all the other elements with a lower index fruits.shift() console.log(fruits); /* Output --> ['apples', 'bananas'] */
BASIC5️⃣отменить сдвиг()
А теперь представьте, что вы забыли принести фрукт, который любит ваша девушка, теперь 🙄 что вы будете делать
// 👇 array
const fruits= ['oranges', 'apples', 'bananas']
// 👇 unshift() will add a new element 'strawberries' as the first elemtn and shift all the other elements to a higher index number
fruits.unshift('strawberries')
console.log(fruits);
/*
Output
--> ['strawberries','apples', 'bananas']
*/
🛑Примечание: следует отметить, что вы можете добавить несколько элементов в параметры unshift().
// 👇 array
const fruits= ['oranges', 'apples', 'bananas']
// 👇 unshift() will add a new element 'strawberries' as the first elemtn and shift all the other elements to a higher index number
fruits.unshift('strawberries', 'peaches')
console.log(fruits);
/*
Output
--> ['strawberries','apples', 'bananas', 'peaches']
*/
BASIC6️⃣длина
Что, если твой отец спросит тебя, сколько фруктов ты принес?
// 👇 array const fruits= ['oranges', 'apples', 'bananas'] // 👇 length will return the total number of elements in the array console.log(fruits.length); /* Output --> 3 */
BASIC8️⃣Изменение элементов
Предположим, ваша милая младшая сестра хочет, чтобы вы несли персики вместо яблок (которые являются 2-м элементом) в своей сумке, тогда как вы замените 2-й элемент персиками.
// 👇 array const fruits= ['oranges', 'apples', 'bananas'] // 👇 Notice here, if I wanted to change 2nd element, // I have to change element with index number 1 // ,because index numbers start from 0. fruits[1] = 'peaches' console.log(fruits); /* Output --> [ 'oranges', 'peaches', 'bananas' ] */
🛑Примечание: следует отметить, что вы можете заменить любой элемент с любым номером индекса с помощью этого метода. Просто введите порядковый номер элемента.
BASIC9️⃣удалить
нам нужно иметь возможность удалить элемент в массиве
// 👇 array const fruits= ['oranges', 'apples', 'bananas'] // 👇 delete the element at the given index number delete fruits[0] console.log(fruits); /* Output --> [ <1 empty item>, 'apples', 'bananas' ] */
🛑Примечание: следует отметить, что другие элементы не изменят свои порядковые номера, а это означает, что если мы удалим элемент между массивами, значение с порядковым номером элемента будет emtpy.
БАЗОВЫЙ🔟concat()
Что делать, если у вас есть два мешка с фруктами, и вы хотите переложить фрукты из одного мешка в другой с помощью JavaScript.
// 👇 array 1
const fruits1 = ['oranges', 'apples', 'bananas']
// 👇 array 2
const fruits2 = ['peaches', 'watermelon' , 'grapes']
// 👇 conact() will add elements of fruits 2 in fruits 1.
const bucket = fruits1.concat(fruits2)
console.log(bucket);
/*
Output
--> [ 'oranges', 'apples', 'bananas', 'peaches', 'watermelon', 'grapes' ]
*/
// 👇 array 1
const fruits1 = ['oranges', 'apples', 'bananas']
// 👇 array 2
const fruits2 = ['peaches', 'watermelon' , 'grapes']
// 👇 array 3
const fruits3 = ['muskmelon']
// 👇 conact() will add elements of fruits 2 and fruits 3 in fruits 1.
const bucket = fruits1.concat(fruits2, fruits3)
console.log(bucket);
/*
Output
--> [
'oranges',
'apples',
'bananas',
'peaches',
'watermelon',
'grapes',
'muskmelon'
]
*/
// 👇 array
const fruits1 = ['oranges', 'apples', 'bananas']
// 👇 conact() will add 'peaches' in fruits 1.
const bucket = fruits1.concat('peaches')
console.log(bucket);
/*
Output
--> [ 'oranges', 'apples', 'bananas', 'peaches' ]
*/
Medium1️⃣splice()
С помощью splice вы можете добавлять или удалять любой элемент в массиве.
Параметры
- начальный номер — первый параметр принимает порядковый номер, по которому вы хотите добавить или удалить элементы.
- delete count — второй параметр принимает количество чисел, которые должны быть удалены из массива в начальном номере (первый параметр).
- items — Список элементов, которые будут добавлены после удаления элементов (в зависимости от количества удалений) по начальному номеру.
👇 Это пример, в котором мы удалим бананы из массива.
// 👇 array const fruits = ['oranges', 'apples', 'bananas'] // 👇 here, at index 2, which is bananas in our array, 1 (deletion count) // element will be deleted. fruits.splice(2, 1) console.log(fruits); /* Output --> [ 'oranges', 'apples' ] */
👇 Это пример, в котором мы удалим бананы, а также добавим персики в массив.
// 👇 array const fruits = ['oranges', 'apples', 'bananas'] // 👇 here, at index 2, which is bananas in our array, 1 (deletion count) // element will be deleted. fruits.splice(2, 1, 'peaches') console.log(fruits); /* Output --> [ 'oranges', 'apples', 'peaches' ] */
Что делать, если вы не хотите ничего удалять, но что-то добавить. Просто сделайте счетчик удаления равным 0.
// 👇 array const fruits = ['oranges', 'apples', 'bananas'] // 👇 here, at index 2, which is bananas in our array, 1 (deletion count) // element will be deleted. fruits.splice(2, 0, 'peaches') console.log(fruits); /* Output --> [ 'oranges', 'apples', 'bananas', 'peaches' ] */
Medium2️⃣slice()
Срез используется для создания нового массива, который содержит некоторые элементы из данного массива.
Параметры
- Start — первый параметр определяет, из какого индекса элементы должны быть выбраны для нового массива.
- End — Это необязательный параметр. Этот второй параметр определяет, до какого индекса элементы должны быть выбраны для нового массива.
Обратите внимание, что начальный индекс также будет включен в новый массив, тогда как конечный индекс не будет включен в новый массив.
// 👇 array const fruits = ['oranges', 'apples', 'bananas'] // 👇 slice will select the elements from the index number 1. // As we have not mentioned any end then it will select the elements till the end. const last2elements = fruits.slice(1) console.log(last2elements); /* Output --> ['apples', 'bananas'] */ // 👇 array const fruits = ['oranges', 'apples', 'bananas', 'peaches', 'grapes'] // 👇 slice will select the elements from the index number 1 till 2 index number. const elementsSelected = fruits.slice(1,4) /* Output --> ['apples', 'bananas', 'peaches'] */
Легкая1️⃣сортировка()
Что делать, если вы хотите отсортировать фрукты по алфавиту.
// 👇 array const fruits = ['oranges', 'apples', 'bananas', 'peaches', 'grapes'] fruits.sort() console.log(fruits); /* Output --> ['apples', 'bananas', 'peaches'] */
Easy2️⃣реверс()
Что делать, если вы хотите изменить порядок ваших фруктов.
// 👇 array const fruits = ['oranges', 'apples', 'bananas', 'peaches', 'grapes'] fruits.reverse() console.log(fruits); /* Output --> [ 'grapes', 'peaches', 'bananas', 'apples', 'oranges' ] */
🥸Итерации
В массивах, если мы хотим перейти к каждому элементу и выполнить какую-то операцию, мы можем использовать итерации. По сути, это цикл, в котором наша функция выполняет какую-то операцию.
1️⃣для каждого()
С помощью forEach мы можем выполнить операцию, перейдя к каждому элементу массива.
// 👇 array
const names = ['Dhruv', 'Harshil', 'Anurag', 'Mayank']
// foreach
names.forEach((value, index, array) => {
console.log(index + ' -> ' + value);
console.log(array)
})
/*
Output
--> 0 -> Dhruv
[ 'Dhruv', 'Harshil', 'Anurag', 'Mayank' ]
1 -> Harshil
[ 'Dhruv', 'Harshil', 'Anurag', 'Mayank' ]
2 -> Anurag
[ 'Dhruv', 'Harshil', 'Anurag', 'Mayank' ]
3 -> Mayank
[ 'Dhruv', 'Harshil', 'Anurag', 'Mayank' ]
*/
🥰Концепция
Что происходит за forEach(), так это то, что функция переходит к индексу номер 0 и возвращает нам значение, затем она переходит к индексу номер 1 и возвращает значение по этому индексу и так далее.
ForEach() возвращает функцию обратного вызова (это функция, которая передается в другую функцию в качестве аргумента), которая имеет параметр как —
Значение — значение в порядковом номере.
Индекс — это порядковый номер значения.
Массив — возвращает массив, для которого мы выполняем итерацию.
2️⃣Карта()
// 👇 array
const names = ['Dhruv', 'Harshil', 'Anurag', 'Mayank']
// map
names.map((value, index, array) => {
console.log(index + ' -> ' + value);
console.log(array)
})
/*
Output
--> 0 -> Dhruv
[ 'Dhruv', 'Harshil', 'Anurag', 'Mayank' ]
1 -> Harshil
[ 'Dhruv', 'Harshil', 'Anurag', 'Mayank' ]
2 -> Anurag
[ 'Dhruv', 'Harshil', 'Anurag', 'Mayank' ]
3 -> Mayank
[ 'Dhruv', 'Harshil', 'Anurag', 'Mayank' ]
*/
🥸Разница между картой и forEach
map() похож на forEach(), но map() может что-то вернуть. Если вы попытаетесь использовать return в forEach(), это не сработает.
// 👇 array
const names = ['Dhruv', 'Harshil', 'Anurag', 'Mayank']
// map
const nameMap = names.map((value, index, array) => {
return index + '->' + value
})
console.log(nameMap);
/*
Output
--> 0 -> Dhruv
[ '0->Dhruv', '1->Harshil', '2->Anurag', '3->Mayank' ]
*/
3️⃣Уменьшить()
Что делать, если вы создали список номеров и хотите, чтобы все номера в вашем списке были добавлены, и должен быть возвращен один единственный номер.
Параметры
а. Функция обратного вызова — имеет следующие параметры
- Предыдущий номер — работает как аккумулятор.
- Текущая стоимость
- текущий Индекс
- множество
б. Значение по умолчанию для предыдущего номера — это значение, которое вы указываете в качестве значения по умолчанию для предыдущего номера.
// 👇 array
const numbers = [1, 2, 10, 25]
// reduce
const sum = numbers.reduce((previousNumber, currentValue, currentIndex, array) => {
console.log(previousNumber, currentValue)
return previousNumber + currentValue;
}, 0) // 👈 0 is the default value
console.log('--');
console.log(sum);
/*
Output
--> 0 1
1 2
3 10
13 25
--
38
*/
🛑Примечание: если вы не укажете значение по умолчанию для предыдущего числа, которое в нашем случае равно 0, тогда функция сокращения примет первый элемент массива в качестве значения по умолчанию и начнет цикл со 2-го элемента.
4️⃣ИндексОф
Что, если твоя мама попросит тебя найти порядковый номер фрукта в твоей сумке?
// 👇 array
const fruits = ["Apple", "Banana","Durian"];
// indexOf
const index = fruits.indexOf('Hi')
const index2 = fruits.indexOf('Apple')
console.log(index);
console.log(index2);
/*
Output
--> -1
0
*/
Вы можете заметить, что если элемент не выходит из массива, функция вернет -1.
5️⃣найти
Представьте, что ваша сестра разработала тест, в котором будут участвовать все фрукты, и только тот фрукт, который пройдет тест, будет возвращен.
// 👇 array const fruits = ["Apple", "Banana","Durian", 'Apple']; // find const apple = fruits.find((value) => value === 'Apple') const apple2 = fruits.find((value) => value === 'Appl') console.log(apple); console.log(apple2); /* Output --> Apple undefined */
Что делать, если вы хотите найти индекс этих значений
// 👇 array const fruits = ["Apple", "Banana","Durian", 'Apple']; // findIndex const apple = fruits.findIndex((value) => value === 'Apple') const apple2 = fruits.findIndex((value) => value === 'Appl') console.log(apple); console.log(apple2); /* Output --> 0 -1 */
Вы можете видеть, что если ни один элемент не проходит тест, возвращается undefined .
6️⃣Фильтр
Как мы видели, find просто возвращает один элемент, что, если вам нужен тест, в котором эти элементы должны быть удалены из массива, который проходит тест.
// 👇 array
const fruits = ["Apple", "Banana","Durian", 'Apple'];
// filter
const fruitsWithA = fruits.filter((value ) => value.startsWith('A'))
// 👆 startsWith checks the first letter of the string.
console.log(fruitsWithA);
/*
Output
--> [ 'Apple', 'Apple' ]
*/
7️⃣включает
Что, если ты купил так много фуритов, и твой отец спрашивает тебя, не принесла ли ты ему яблоко? Как ты это проверишь
// 👇 array
const fruits = ["Apple", "Banana","Durian", 'Apple'];
// includes
const apple = fruits.includes('Apple')
const grapes = fruits.includes('grapes')
console.log(apple);
console.log(grapes);
/*
Output
--> true
false
*/
Спасибо за чтение этого блога.
