Техники написания более чистого JavaScript с помощью ES6+ (сколько вы знаете? 💪)

Нулевой оператор объединения (??)

Нулевой оператор объединения отлично подходит для работы с, возможно, неопределенными данными.
Этот оператор сообщает JavaScript, что нужно возвращать данные с правой стороны, когда его левая сторона равна нулю или не определена (нулевая).

// returns 'default value'
null ?? 'default value'

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

// if 'name' is not defined,
// we pass a default string into our function.
customFunc(name ?? 'default')

Примечание против оператора ИЛИ

Многие думают, что это то, что делает оператор ИЛИ (||).
Однако оператор ИЛИ возвращает свою правую часть, когда левая часть ложная, а не просто нулевая. Сюда входят такие данные, как 0 и ‘’.

Необязательная цепочка (?.)

Используя необязательную цепочку, при доступе к свойствам, если какая-либо ссылка на свойство имеет нулевое значение, выражение возвращает неопределенное значение, а не вызывает ошибку.

const object = {
  property1: {
    name: 'P1'
  }
}

// returns undefined and doesn't cause an error
object.property2?.name

Это также работает при вызове функций.

// will call 'customFunc' if it exists on 'object',
// or returns undefined if not.
object.customFunc?.()

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

💡 Совет. Нулевые операторы объединения и необязательные операторы цепочки лучше всего использовать с TypeScript, так как вы будете точно знать, когда их использовать.

Логическая и оценка короткого замыкания

При использовании оператора AND (&&) правостороннее выражение оценивается только в том случае, если первое значение является истинным.

// returns 'this'
true && 'this'

Сокращение с помощью оператора && позволяет оценить условие перед вызовом функции. Таким образом, вы можете избежать необходимости писать подробный оператор if перед вызовом чего-либо.

// calls func() if 'variable' is true
variable && func()

Включает в себя()

Array.includes() — это способ проверить, содержит ли массив что-либо.

[1, 2, 3].includes(2) // returns true

Это можно использовать как способ избежать множественных условных проверок, сократить код, а также сделать его более читабельным.

// instead of this
if(var === 'A' || var === 'B' || var === 'C')
  return var
  
// do this
if(['A', 'B', 'C'].includes(var)) 
  return var

Для и для каждого()

Цикл можно сделать намного чище, используя for of и .forEach(), а не традиционный цикл for. Важным моментом использования forEach() является то, что его можно объединить в цепочку, что сделает ваш код более кратким и читабельным.

// a tiny amount of code for looping over wanted items in an array.
// can be chained further for more complicated cases.
arr.filter((i) => i > 0)
   .forEach((v, i) => console.log(v));

С другой стороны, существует множество пограничных случаев при использовании forEach(), таких как отсутствие включения пустых элементов и некорректная работа с асинхронным/ожидающим кодом. В таких случаях лучше всего использовать «for of», что также довольно лаконично, хотя и не имеет такого количества пограничных случаев, как forEach() или «for in».

// for performing the same function as above.
// not as concise for more complicated cases but more robust.
for (const i of arr.filter((i) => i > 0)) 
  console.log(i)
// or
for (const i of arr) 
  if(i > 0) console.log(i)

Распространенный синтаксис (…)

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

// combine two arrays, inserting '3' between the two.
const arr1 = [1, 2]
const arr2 = [4, 5]

const newArr = [...arr1, 3, ...arr2]
// newArr = [1, 2, 3, 4, 5]

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

// create a new object with the same properties as obj1 and obj2,
// while also adding another property 'newProperty'.
const obj1 = {property1: 'p1'}
const obj2 = {property2: 'p2'}

const newObj = {...obj1, ...obj2, newProperty: 'newP'}
// newObj = {property1: 'p1', property2: 'p2', newProperty: 'newP'}

Оператор деструктуризации и отдыха (…)

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

// getting the 'id' property from obj.
const obj = {id: 1}

const {id} = obj
// id = 1

// or we can have a custom variable name.
const {id: idLabel} = obj
// idLabel = 1

Точно так же оператор rest можно использовать для отделения свойств от объекта. Это полезно для быстрого копирования объекта при удалении некоторых свойств.

// copying obj1, removing the 'unwanted' property.
const obj = {id: 1, unwanted: 2}

const {unwanted, ...newObj} = obj
// newObj = {id: 1}

💰 Бонус: удаление дубликатов из массива

Хотите быстрый способ удаления повторяющихся примитивных элементов из массива? Это очень легко сделать с помощью небольшого фрагмента кода с помощью «new Set()».
Сочетание этого с другими методами чистого кода может привести к очень мощным действиям с минимальным кодом.

// using set with the spread syntax to combine two arrays, removing duplicates (a union).
const arr1 = [1, 2, 3]
const arr2 = [3, 4, 5]

const arr3 = [...new Set([...arr1, ...arr2])] 
// arr3 = [1, 2, 3, 4, 5] as an array

Спасибо за прочтение ❤️. Если вам понравилась эта статья, поделитесь ею.
Проверьте мой github, веб-сайт и другие статьи.

Первоначально опубликовано на https://dev.to 22 декабря 2021 г.