Для верстальщиков. Украшаем код JavaScript
Те из вас, кто верстает сайты, прекрасно знают, как удобно читать код, когда он свёрстан в удобочитаемом виде. Это упрощает и его понимание и визуальное выявление ошибок до запуска.
В этом посте дана справочная информация по некоторым методам и операторам языка Javascript. Информация будет полезна тем, кто изучает Javascript и в качестве напоминания уже более опытным программистам.
console.log(!! 0) // output: false
console.log(!! 1) // output: true
console.log(Boolean(1)) // output: true
console.log(Boo
Преобразование строки в число:
const string = '101'
console.log(+string) // output: 101
console.log(Number(string)) // output: 101
Используйте обратный метод для изменения порядка элементов массива. Обратите внимание, что обратный метод изменяет исходный массив.
const numbers = ['1', '2', '3']
console.log(numbers.reverse()) // output: [ "3", "2", "1" ]
Найдите минимальные или максимальные значения из массива с помощью функции Math.min и Math.max:
const numbers = [1, 2 ,3, 4, 5]
console.log(Math.min(...numbers)) // output: 1
console.log(Math.max(...numbers)) // output: 5
Используйте оператор spread для объединения массивов:
const fruits = ['яблоки', "бананы']
const vegetables = ['картофель', 'морковь']
const food = [...fruits, ...vegetables]
console.log(food) // output: [ "яблоки", "бананы" , "картофель", "морковь" ]
В языке javascript есть девять ложных значений.
undefined , null , NaN , 0 , 0n (BigInt 0), -0 ""(empty string),false,document.all
Тернарный оператор позволяет писать оператор if...else более компактно.
let number = 1
if (number == 1) {
console.log('number is one')
} else {
console.log('number is not one')
}
// Syntax: condition ? exprIfTrue : exprIfFalse (MDN)
console.log(number === 1 ? "number is one" : "number is not one");
const fruits = ['яблоки', 'мандарины', 'яблоки', 'мандарины']
// Method 1:
const filteredFruits = Array.from(new Set(fruits))
console.log(filteredFruits) // output: Array [ "яблоки", "мандарины" ]
// Method 2:
const filteredFruits = [...new Set(fruits)]
console.log(filteredFruits) // output: Array [ "яблоки", "мандарины" ]
Попробуйте использовать метод map(), если вы хотите манипулировать элементами массива. Метод map() выполняет данную функцию для каждого элемента массива и возвращает новый массив на основе исходного массива:
const numbers = [1, 2, 3, 4, 5]
const mapedNumbers = numbers.map(element => element + 1)
console.log(mapedNumbers) // output: [2, 3, 4, 5, 6]
Чтобы проверить, содержит ли массив определенное значение или нет, используйте метод includes().
const hearts = ['красный', 'синий', 'белый']
console.log(hearts.includes('красный')) // output: true
console.log(hearts.includes('оранжевый')) // output: false
Фильтр массивов на основе условий Метода filter() принимает функцию в качестве аргумента и выполняет эту функцию для каждого элемента массива и возвращает новый массив:
const numbers = [1, 5, 6, 7, 4]
const filteredArray = numbers.filter(element => element > 4)
console.log(filteredArray) // output: [ 5, 6, 7 ]
const button = document.querySelector('button')
button.addEventListener('click', function () {
window.scrollTo(0,0)
})
На этом всё. Удачи вам!
Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.Другие статьи по теме:
Те из вас, кто верстает сайты, прекрасно знают, как удобно читать код, когда он свёрстан в удобочитаемом виде. Это упрощает и его понимание и визуальное выявление ошибок до запуска.
JavaScript - это универсальный язык программирования, который допускает широкий спектр методов кодирования, включая одну из самых неправильно понимаемых функций из всех: замыкания.
Давайте рассмотрим некоторые из удивительных трюков, которые вы могли бы сделать с помощью ванильного JavaScript.
Файлы cookie — это небольшие фрагменты данных, хранящиеся в браузере клиента и часто используемые для управления сеансами, пользовательских предпочтений и отслеживания.
Многие начинающие пользователи интернета задают себе данную фразу. Но не у всех выходит добиться желаемого... Всё связано с различными стереотипами, например, о том, что для создания сайта или личной странички в интернете требуются навыки и знание программирования... Прочитайте статью и создайте свой сайт.