Полезный? да. Нужный? Иногда. Должны ли вы их знать? Абсолютно.
Что такое методы JavaScript?
JavaScript — один из самых гибких и широко используемых языков программирования, поэтому неудивительно, что существует множество (ха-ха) методов, которые вы можете использовать для строк, массивов и объектов!
Методы JS являются встроенными и поэтому могут использоваться в любом экземпляре массива, если вы создали их с некоторыми полезными элементами! Следующий синтаксис показывает, как вы вызываете метод в массиве:
someArray.nameOfMethod() // pseudocode
В большинстве случаев методы массива имеют внутри функцию обратного вызова, что делает их по-настоящему мощными, как мы увидим ниже.
Методы
Этот список ни в коем случае не является окончательным, это просто мое скромное мнение, основанное на моем опыте изучения JS. Эти методы помогли сделать мою жизнь намного проще и сократить количество кода, который я написал! (за петлями смотрю на тебя! 👀)
.includes()
.includes() — один из самых простых методов, но пусть вас это не смущает. Это может пригодиться, когда вы выполняете какую-то проверку или сравнение в своем коде. Этот метод ищет в массиве определенное значение, а затем возвращает true или false. Возврат: логическое значение
const numbers = [1, 2, 3];
const strings = ["hello", "world"];
numbers.includes(1) // returns true
numbers.includes(4) // returns false
numbers.includes(2, 1) // search for 2 from index 1. returns true
numbers.includes(1, 2) // search for 1 from index 2. returns false
strings.includes("hello") // returns true
strings.includes("javascript") // returns false
.forEach()
.forEach() значительно упрощает жизнь, перебирая весь массив и предоставляя вам доступ к каждому отдельному элементу. Это достигается с помощью функции обратного вызова . Однако, и я обнаружил это на собственном горьком опыте, метод .forEach() возвращает undefined. Это важно, потому что присвоение вывода метода и попытка сделать что-либо с ним может привести к слезам. Обратите внимание, что .forEach() не мутирует массив, для которого он вызывается, а также не является цепочкой. Возврат:undefined
const someArray = [1, 2, 3]; someArray.forEach(element => console.log(element + 5)); // output -> 6 // output -> 7 // output -> 8 someArray.forEach((element, idx) => console.log(element + 5, idx)); // output -> 6 0 // output -> 7 1 // output -> 8 2
.map()
Это один из моих любимых и, вероятно, наиболее часто используемый метод. React amirite? Подобно .forEach(), .map() перебирает весь массив и дает вам доступ к каждому элементу. Основное отличие состоит в том, что .map() создает новый массив с результатами некоторой пользовательской логики в функции обратного вызова. Это очень полезно, потому что вы можете назначить вывод новой переменной и вызывать для нее другие методы. Вот почему карта может быть цепочкой. Обратите внимание, что карта не изменяет массив, для которого она вызывается. Возврат: массив
const someArray = [3, 6, 9];
const newArray = someArray.map(element => element * 5);
console.log(newArray);
// output -> [15, 30, 45]
const anotherArray = newArray.map((element, idx) => {
console.log(idx);
return element + 1
}
// output -> 0
// output -> 1
// output -> 2
console.log(anotherArray)
// output -> [16, 31, 46]
.filter()
Если вы еще не использовали .filter(), попробуйте немедленно. Это еще один суперполезный метод, без которого вы в конечном итоге не сможете жить. Подобно .map(), он создает новый массив со всеми элементами, которые прошли условие, заданное с помощью функции обратного вызова. Даже базовое понимание (как у меня) этого метода может помочь вам решить множество проблем. Возврат: массив
const numbers = [20, 10, 30]; const words = ["hello", "world", "learn", "javascript"]; const filteredNum = numbers.filter(number => number >= 20); console.log(filteredNum); // output -> [20, 30] const filteredWords = words.filter(word => word.length > 5); console.log(filteredWords); // output -> ["javascript"];
.reduce()
.reduce() — это один из методов массива, который сложнее понять, но как только вы узнаете, как он работает, у него есть несколько вариантов использования, в которых на самом деле нет любой другой вариант. Как следует из названия метода, он уменьшает массив и возвращает одиночноезначениекаждый раз, обычно целое число или объект JS. Это достигается с помощью функции редуктора, которая выполняется методом reduce(). Возврат: объект/целое число
Вот некоторые ключевые термины: accumulator,currentValue,initialValue. accumulator — это промежуточная сумма, так как текущий массив зацикливается. currentValue — это значение элемента, в котором временно находится цикл. initialValue дается методу как отправная точка для accumulator. Давайте посмотрим на это в действии:
const numbersAgain = [1, 2, 3, 4, 5];
const initialValue = 0;
const reducer = (accumulator, currentValue) => {
console.log("acc is " + accumulator + " current value is " + currentValue);
return accumulator + currentValue
}
const sum = numbersAgain.reduce(reducer, initialValue);
// output -> acc is 0 current value is 1
// output -> acc is 1 current value is 2
// output -> acc is 3 current value is 3
// output -> acc is 6 current value is 4
// output -> acc is 10 current value is 5
console.log(sum);
// output -> 15
Вывод
Как видите, всего лишь 5 методов могут помочь вам решить столько проблем. Есть масса других методов, о которых я не упомянул, но если вам интересно, заходите на MDN. Вы обнаружите, что это незаменимый ресурс для того, чтобы узнать больше о том, на что способны методы, упомянутые в этой статье, и увидеть, насколько мощными являются встроенные методы.
Считаете ли Вы это полезным? Оставьте комментарий, упомянув хотя бы одну небольшую вещь, которую вы узнали, или дайте мне знать что-нибудь важное, что я, возможно, пропустил. Продолжайте учиться!
