Home-theater-designers
Веб-разработчики любого уровня подготовки, от начинающих программистов до экспертов по кодированию, осознают важность JavaScript для разработки современных веб-сайтов. JavaScript настолько доминирует, что это важный навык, чтобы знать, собираетесь ли вы создавать веб-приложения.
Один из самых мощных строительных блоков, встроенных в язык JavaScript, - это массивы. Массивы обычно встречаются во многих языках программирования и полезны для хранения данных.
JavaScript также включает полезные функции, известные как методы массива. Вот пятнадцать, на которые вам следует внимательно присмотреться, чтобы развить свои навыки разработчика.
Что такое методы массива?
Методы массива - это встроенные в JavaScript функции, которые вы можете применять к своим массивам. Каждый метод имеет уникальную функцию, которая выполняет изменение или вычисление вашего массива, избавляя вас от необходимости кодировать общие функции с нуля.
Методы массива в JavaScript запускаются с использованием точечной нотации, прикрепленной к вашей переменной массива. Поскольку это просто функции JavaScript, они всегда заканчиваются круглыми скобками, которые могут содержать необязательные аргументы. Вот метод, прикрепленный к простому массиву, который называется myArray .
let myArray = [1,2,3]; myArray.pop();В этом коде будет применяться метод, называемый поп в массив.
Пример массива
Для каждого примера используйте образец массива, который мы назовем myArray , для выполнения методов. Не стесняйтесь запускать консоль и писать код.
let myArray = [2,4,5,7,9,12,14];В этих примерах предполагается, что вы знаете основы что такое JavaScript и как он работает . Если нет, ничего страшного, мы все здесь, чтобы учиться и расти.
Разберитесь в этих пятнадцати мощных методах работы с массивами!
1. Array.push ()
Что оно делает: толкать() берет ваш массив и добавляет один или несколько элементов в конец массива, затем возвращает новую длину массива. Этот метод изменит ваш существующий массив.
Добавьте число 20 в массив, запустив толкать() , используя 20 в качестве аргумента.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Проверьте, сработало ли это:
console.log(myArray); [2,4,5,7,9,12,14,20]Запуск толкать() Метод myArray добавил значение, указанное в аргументе, в массив. В данном случае 20. Когда вы проверите myArray в консоли, вы увидите, что значение теперь добавлено в конец массива.
2. Array.concat ()
Что оно делает: concat () может объединить два или более массива в новый массив. Он не изменяет существующие массивы, а создает новый.
Брать myArray и объединить массив с именем newArray внутрь.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Этот метод творит чудеса при работе с несколькими массивами или значениями, которые вам нужно объединить, и все это за один довольно простой шаг при использовании переменных.
3. Array.join ()
Что оно делает: присоединиться() берет массив и объединяет его содержимое, разделенное запятой. Результат помещается в строку. Вы можете указать разделитель, если хотите использовать альтернативу запятой.
Посмотрите, как это работает, с помощью myArray. Сначала используйте метод по умолчанию без аргумента-разделителя, который будет использовать запятую.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript выведет строку с каждым значением в массиве, разделенным запятой. Вы можете использовать аргумент в функции, чтобы изменить разделитель. Обратите внимание на это с двумя аргументами: одним пробелом и строкой.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Первый пример - это пробел, составляющий строку, которую вы легко читаете.
Во втором примере используется (' а также ') , и здесь нужно знать две вещи.
Во-первых, мы используем слово «и» для разделения значений. Во-вторых, по обе стороны от слова «и» есть пробелы. Это важно помнить при использовании присоединиться() . JavaScript буквально читает аргументы; поэтому, если это пространство не заполнено, все будет сжато вместе (например, «2 и 4 и 5 ...» и т. д.). Не очень читаемый результат!
4. Array.forEach ()
Что оно делает: для каждого() (с учетом регистра!) выполняет функцию для каждого элемента в вашем массиве. Эта функция представляет собой любую созданную вами функцию, аналогичную использованию цикла for для применения функции к массиву, но с гораздо меньшим объемом работы по написанию кода.
Есть еще немного для каждого() ; посмотрите на синтаксис, а затем выполните простую функцию для демонстрации.
myArray.forEach(function(item){
//code
});
Мы используем myArray , для каждого() наносится с точечной нотацией. Вы помещаете функцию, которую хотите использовать, внутри круглых скобок аргумента, то есть функция (элемент) в примере.
Взгляни на функция (элемент) . Это функция, выполняемая внутри forEach (), и у нее есть собственный аргумент. Мы вызываем аргумент элемент . Об этом аргументе нужно знать две вещи:
- Когда forEach () перебирает ваш массив, он применяет код к этому аргументу. Думайте об этом как о временной переменной, которая содержит текущий элемент.
- Вы выбираете имя аргумента, его можно называть как угодно. Обычно его называют чем-то, что упрощает понимание, например, «элемент» или «элемент».
Помня об этих двух вещах, рассмотрим этот простой пример. Добавьте 15 к каждому значению, и консоль покажет результат.
myArray.forEach(function(item){
console.log(item + 15);
});
Мы используем элемент в этом примере в качестве переменной, поэтому функция написана для добавления 15 к каждому значению через элемент . Затем консоль распечатает результаты. Вот как это выглядит в консоли Google Chrome.
Результат - каждое число в массиве, но с добавлением 15!
5. Array.map ()
Что оно делает: карта() выполняет функцию для каждого элемента в вашем массиве и помещает результат в новый массив.
Запуск функции для каждого элемента звучит как forEach (). Разница здесь в карта() при запуске создает новый массив. forEach () не создает новый массив автоматически, для этого вам придется закодировать определенную функцию.
Используйте map (), чтобы удвоить значение каждого элемента в myArray и поместить их в новый массив. Вы увидите то же самое функция (элемент) синтаксис для большей практики.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Проверяйте результаты в консоли.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray без изменений:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift ()
Что он делает: аналогично тому, как работает метод push (), метод unshift () Метод принимает ваш массив и добавляет один или несколько элементов в начало массива вместо конца и возвращает новую длину массива. Этот метод изменит ваш существующий массив.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);При записи массива в консоль вы должны увидеть число 0 в начале массива.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Что он делает. Сортировка - одна из наиболее распространенных операций, выполняемых с массивом, и очень полезная. JavaScript Сортировать() Метод array можно использовать для сортировки массива чисел или даже строк с помощью одной строки кода. Эта операция выполняется и возвращает отсортированный массив путем изменения исходного массива. Возьмите другой набор чисел для myArray этот раз.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Поскольку сортировка выполняется на месте, вам не нужно объявлять отдельную переменную для отсортированного массива.
console.log(myArray); [10, 12, 34, 55, 65]По умолчанию массив сортируется в порядке возрастания, но вы можете при желании передать настраиваемую функцию в Сортировать() для сортировки массива желаемым образом. В данном случае я прошел кастом стрелочная функция для числовой сортировки массива в порядке возрастания.
8. Array.reverse ()
Что он делает: как следует из названия, задний ход() используется для изменения порядка элементов в массиве. Обратите внимание, что это не меняет содержимое массива, а только сам порядок. Вот пример, чтобы лучше понять этот метод:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Зарегистрируйте вывод на консоль, чтобы проверить работу.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Как видите, порядок элементов был обратным. Ранее элемент с последним индексом (элемент 14 с индексом 6) теперь является элементом с нулевым индексом и так далее.
9. Array.slice ()
Что оно делает: кусочек() используется для получения неглубокой копии части массива. Проще говоря, этот метод позволяет вам выбирать определенные элементы из массива по их индексу. Вы можете передать начальный индекс элемента, из которого вы хотите получить и элементы, а также, необязательно, конечный индекс.
Если вы не укажете конечный индекс, будут извлечены все элементы от начального индекса до конца массива. Этот метод возвращает новый массив и не изменяет существующий.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);В приведенном выше коде извлекаются все элементы от второго индекса до последнего индекса, поскольку параметр конечного индекса не передается. Зарегистрируйте оба массива в консоли.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Очевидно, что исходный массив не модифицируется методом slice (), а вместо этого возвращает новый массив, который хранится в SledArray Переменная. Вот пример, в котором параметр конечного индекса также передается в кусочек() метод.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.splice ()
Что оно делает: сращивание () - полезный метод массива, используемый для удаления или замены элементов в массиве на месте. Указав индекс и количество удаляемых элементов, он изменяет массив.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);В приведенном выше примере myArray массив склеивается из индекса 2 и из него удаляются 3 элемента. Теперь массив состоит из:
[2, 4, 12, 14]Чтобы заменить элементы, а не просто удалить их, вы можете передать любое количество необязательных параметров с элементами, которые вы хотите заменить, например:
как удалить гугл диск с компьютера
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter ()
Что он делает: фильтр() Метод - полезный метод массива, который принимает функцию, содержащую тест, и возвращает новый массив со всеми элементами, прошедшими этот тест. Верный своему названию, этот метод используется для фильтрации нужных вам элементов от других элементов. Фильтрация выполняется с помощью функции, возвращающей логическое значение.
Вот пример фильтр() метод, используемый для получения из массива только тех элементов, которые делятся на 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);В приведенном выше примере в качестве параметра передается стрелочная функция, которая берет каждое число из исходного массива и проверяет, делится ли оно на 2, используя модуль ( % ) а также равенство ( === ) оператор. Вот как выглядит результат:
[2, 4, 12, 14]12. Array.reduce ()
Что оно делает: уменьшать() - это метод массива, который принимает функцию редуктора и выполняет ее для каждого элемента массива для вывода единственного значения при возврате. Он принимает функцию редуктора с переменной-аккумулятором и переменной текущего элемента в качестве обязательных параметров. Значение аккумулятора запоминается на всех итерациях и в конечном итоге возвращается после последней итерации.
Популярным вариантом использования этого метода является вычисление суммы всех элементов в массиве. Реализация этого функционала выглядит следующим образом:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);0 передается в качестве второго параметра в приведенном выше примере, который используется как начальное значение переменной аккумулятора. В sumOfNums переменная будет содержать возвращаемое значение уменьшать() , который, как ожидается, будет суммой всех элементов в массиве.
console.log(sumOfNums); 5313. Array.includes ()
Что он делает: поиск элемента в массиве для проверки его наличия - это операция, которая используется довольно часто, и, следовательно, в JavaScript есть встроенный метод для этого в виде включает в себя() метод массива. Вот как это можно использовать:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Этот метод принимает обязательный параметр, элемент для поиска и необязательный параметр, индекс массива, с которого следует начать поиск. В зависимости от того, присутствует этот элемент или нет, он вернет правда или ложный соответственно. Следовательно, на выходе получится:
true
false
true
false14. Array.indexOf ()
Что оно делает: индекс() используется для определения индекса, по которому в массиве может быть найдено первое вхождение указанного элемента. Хотя он похож на метод includes (), этот метод возвращает числовой индекс или -1, если элемент отсутствует в массиве.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));индекс() Метод использует строгое равенство для проверки наличия элемента, что означает, что значение, а также тип данных должны быть одинаковыми. Необязательный второй параметр принимает индекс, с которого начинается поиск. Исходя из этих критериев, результат будет выглядеть так:
1
-1
415. Array.fill ()
Что он делает: Часто вам может потребоваться установить для всех значений в массиве статическое значение, например 0. Вместо использования цикла вы можете попробовать наполнять() метод для той же цели. Вы можете вызвать этот метод для массива с 1 обязательным параметром: значением для заполнения массива и двумя необязательными параметрами: начальным и конечным индексами для заполнения между ними. Этот метод изменяет существующий массив.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);Записав вывод в консоль, вы увидите:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Следующие шаги в вашем путешествии по JavaScript
Массивы - мощная часть языка JavaScript, поэтому в него встроено так много методов, которые облегчают вашу жизнь как разработчика. Лучший способ овладеть этими пятнадцатью методами - это практика.
Продолжая изучать JavaScript, MDN - отличный ресурс для получения подробной документации. Почувствуйте себя комфортно в консоли, а затем поднимите свои навыки с помощью лучших редакторов JavaScript для программистов. Готовы создать свой сайт с помощью JavaScript? Почему бы не взглянуть на некоторые фреймворки, которые вы можете рассмотреть.
Делиться Делиться Твитнуть Эл. адрес 6 фреймворков JavaScript, которые стоит изучитьСуществует множество фреймворков JavaScript, помогающих в разработке. Вот некоторые из них, которые вам следует знать.
Читать далее Похожие темы- Программирование
- JavaScript
- Советы по кодированию
Нитин - заядлый разработчик программного обеспечения и студент компьютерной инженерии, разрабатывающий веб-приложения с использованием технологий JavaScript. Он работает внештатным веб-разработчиком и в свободное время любит писать для Linux и программирования.
Ещё от Nitin RanganathПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться