5 полезных советов и рекомендаций по Javascript

Вы их всех знаете?

JavaScript продолжает добавлять новые полезные функции. Иногда бывает трудно угнаться. В этой статье я поделюсь парой интересных советов и приемов, которые помогут вам оставаться в курсе событий и углубят свои знания JS.

1. Создайте массив с уникальными значениями с помощью объекта «Установить».

Представьте, что у вас есть массив с несколькими повторяющимися элементами и вы хотите отфильтровать только уникальные.

Для этого вы можете попробовать написать карту или фильтр. В качестве альтернативы ES6 представляет объект Set, который решает эту проблему всего в 1 строке кода.

const arrayWithUniqueItems = [...new Set([1, 2, 3, 3,])]
// [1, 2, 3]

Теперь в этом примере используются целые числа, но вы также можете использовать строки и числа с плавающей запятой!

Чтобы получить более подробные сведения об объекте Set, ознакомьтесь с этой статьей Клэр-Паркер Джонс.

2. Сократите формулировки «если».

Теперь это непростой вопрос.

Сокращение операторов «если» может быть отличным способом упростить код.

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

// Instead of using this                                      
if (iAmHungry) {
   bakeAnEgg()
}
// You can use this
if (iAmHungry) bakeAnEgg()
// Or this
iAmHungry? bakeAnEgg() : 0

Помните, читабельность и простота использования важнее, чем пара строк кода меньше.

3. Сократите массив, используя его свойство длины.

Отличный способ сократить массив - переопределить его свойство длины.

let array = [0, 1, 2, 3, 4, 5, 6, 6, 8, 9]
array.length = 4
// Result: [0, 1, 2, 3]

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

4. Использование оператора распространения для объединения объектов.

Допустим, вы хотите объединить несколько объектов в один, содержащий их все.

Оператор распространения (…) - отличный способ добиться этого!

const obj1 = {'a': 1, 'b': 2}
const obj2 = {'c': 3}
const obj3 = {'d': 4}
// Combine them using the spread operator            
const objCombined = {...obj1, ...obj2, ...obj3}
// Result: {'a': 1, 'b': 2, 'c': 3, 'd': 4}

При использовании этого следует помнить о том, что всякий раз, когда вы обновляете один из объектов, он не отражает эти изменения в объединенном объекте.

5. Использование объекта window.location

JavaScript может получить доступ к текущему URL-адресу с помощью объекта window.location. Довольно аккуратно, но еще круче то, что этот объект также содержит определенные части URL-адреса.

Получите доступ к протоколу / хосту / пути / поиску / и многому другому!

// JavaScript can access the current URL in parts. For this URL:
`https://thatsanegg.com/example/index.html?s=article`
window.location.protocol == `https:`
window.location.host == `thatsanegg.com`
window.location.pathname == `/example/index.html`
window.location.search == `?s=article`

Это все!

Спасибо за чтение, посмотрите, сколько вы узнали 😄

Эта статья изначально была размещена в разделе Это яйцо 🍳