JavaScript: Рекомендации и советы

JavaScript: Рекомендации и советы

В этом посте дана справочная информация по некоторым методам и операторам языка Javascript. Информация будет полезна тем, кто изучает Javascript и в качестве напоминания уже более опытным программистам.

1. Оператор !! (двойной восклицательный знак)

Чтобы проверить, является ли значение истинным или !! ложным, вы можете вызвать оператор двойной восклицательный знак:
console.log(!! 0)             // output: false
console.log(!! 1)            // output: true

console.log(Boolean(1))     // output: true
console.log(Boo

2. Конвертировать string → number (строку в число)

Преобразование строки в число:

const string = '101'

console.log(+string)          // output: 101
console.log(Number(string))   // output: 101

3. Обратный метод (reverse method)

Используйте обратный метод для изменения порядка элементов массива. Обратите внимание, что обратный метод изменяет исходный массив.

const numbers = ['1', '2', '3']

console.log(numbers.reverse())   // output: [ "3", "2", "1" ]

4. Математические операции Math.min() и Math.max()

Найдите минимальные или максимальные значения из массива с помощью функции 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

5. Объединить массивы

Используйте оператор spread для объединения массивов:

const fruits = ['яблоки', "бананы']
const vegetables = ['картофель', 'морковь']
const food = [...fruits, ...vegetables]
console.log(food) // output: [ "яблоки", "бананы" , "картофель", "морковь" ]

6. Ложные значения

В языке javascript есть девять ложных значений.

undefined , null , NaN , 0 , 0n (BigInt 0), -0 ""(empty string),false,document.all

7. Тернарный оператор

Тернарный оператор позволяет писать оператор 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");

8. Удалить дубликаты из массива

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 [ "яблоки", "мандарины" ]

9. Метод Map()

Попробуйте использовать метод 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]

10. Метод includes()

Чтобы проверить, содержит ли массив определенное значение или нет, используйте метод includes().

const hearts = ['красный', 'синий', 'белый']
console.log(hearts.includes('красный')) // output: true
console.log(hearts.includes('оранжевый')) // output: false

11. Метод filter() 

Фильтр массивов на основе условий Метода filter() принимает функцию в качестве аргумента и выполняет эту функцию для каждого элемента массива и возвращает новый массив:

const numbers = [1, 5, 6, 7, 4]
const filteredArray = numbers.filter(element => element > 4)
console.log(filteredArray) // output: [ 5, 6, 7 ]

12. Кнопка "Прокрутите вверх"

const button = document.querySelector('button')

button.addEventListener('click', function () {
window.scrollTo(0,0)
})

На этом всё. Удачи вам!

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Другие статьи по теме:

Добавляем Видео в качестве фона страницы сайта
Добавляем Видео в качестве фона страницы сайта
Тема уже не новая, но хочется еще раз ее затронуть, т.к. она набирает обороты. Хотя и очень медленно. Возможно, проблема создания таких сайтов в связана с созданием или поиском подходящего видео. Лично мне такие сайты вполне симпатичны, привлекают внимание, а главное, задерживают посетителя на сайте, тем самым улучшая поведенческие факторы...
JavaScript: разоблачение регулярных выражений
JavaScript: разоблачение регулярных выражений

Регулярные выражения, вероятно, являются наиболее неправильно понимаемой особенностью большинства языков.

Многие разработчики пытаются понять их с помощью плохих руководств или старых книг, и когда они разочаровываются, они предпочитают игнорировать их до конца своей карьеры.

JavaScript: сила замыканий
JavaScript: сила замыканий

JavaScript - это универсальный язык программирования, который допускает широкий спектр методов кодирования, включая одну из самых неправильно понимаемых функций из всех: замыкания.

Как устанавливать, получать и обновлять файлы cookie с помощью JavaScript
Как устанавливать, получать и обновлять файлы cookie с помощью JavaScript

Файлы cookie — это небольшие фрагменты данных, хранящиеся в браузере клиента и часто используемые для управления сеансами, пользовательских предпочтений и отслеживания.

Динамические элементы JavaScript для безостановочной загрузки сценариев
Динамические элементы JavaScript для безостановочной загрузки сценариев

Сценарии JavaScript блокируют загрузку файлов, следующих за ними. Но имеется несколько приемов, предотвращающих это…

Как создать сайт?
Как создать сайт?

Многие начинающие пользователи интернета задают себе данную фразу. Но не у всех выходит добиться желаемого... Всё связано с различными стереотипами, например, о том, что для создания сайта или личной странички в интернете требуются навыки и знание программирования... Прочитайте статью и создайте свой сайт.

Мы используем файлы cookie и другие аналитичекие данные. Они помогают нам улучшить ваше взаимодействие с сайтом. Оставаясь на сайте, вы даете согласие на обработку пользовательских данных. Положение об использовании cookie