Методы написания более чистого JavaScript с помощью ES6
Оператор объединения с нулевым значением отлично подходит при работе с возможно неопределенными данными.
Этот оператор сообщает JavaScript, чтобы он возвращал данные с его правой стороны, если его левая сторона имеет значение null или undefined (nullish).
// returns 'default value'
null ?? 'default value'
Этот оператор можно использовать для определения значения по умолчанию для потенциально нулевых данных, избегая проверки подробного кода, если некоторые данные не определены.
// if 'name' is not defined,
// we pass a default string into our function.
customFunc(name ?? 'default')
Note против оператора OR
Многие думают, что именно это и делает оператор OR (||).
Однако оператор OR возвращает его правую часть, когда левая часть ложна, а не просто равна нулю. Сюда входят такие данные, как 0 и ".
Необязательная цепочка (?.)
При использовании необязательной цепочки при доступе к свойствам, если какая-либо ссылка на свойство имеет значение NULL, выражение возвращает undefined вместо того, чтобы вызывать ошибку.
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?.()
Необязательная цепочка может использоваться, чтобы избежать использования условного оператора каждый раз, когда есть некоторые данные, которые, возможно, могут быть неопределенными, что делает ваш код значительно чище.
Оператор AND
При использовании оператора AND (&&) правое выражение оценивается только в том случае, если первое значение истинно.
// returns 'this'
true && 'this'
Замыкание с помощью оператора && позволяет оценить условие перед вызовом функции.
Таким образом, вы можете избежать необходимости писать подробный оператор if перед тем, как что-то вызывать.
// calls func() if 'variable' is true
variable && func()
Includes()
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 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 (), таких как отсутствие включения пустых элементов и некорректная работа с кодом async/await.
В таких случаях лучше всего использовать 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]
Similarly, with objects, we can use the spread syntax to clone another object, while also being able to add new properties.
Точно так же с объектами мы можем использовать синтаксис распространения для клонирования другого объекта, а также иметь возможность добавлять новые свойства.
// 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'}
Деструктуризация и оператор rest (...)
Деструктуризация может использоваться во многих контекстах для получения различных переменных из значений массива или свойств объекта.
Это отличный способ чисто получить глубоко вложенные свойства объекта.
// 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
Спасибо за чтение ❤️.
