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

Дополнительные свойства объекта

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

const hobbies = ['hiking']
const address = null
const hasHobbies = hobbies.length > 0

const person = { 
  name: 'Matt', 
  age: 30,
  // Add this if there are hobbies
  ...(hasHobbies && { hobbies }),
  // Add address if exists, otherwise use a default
  ...(address ? { address } : { address: defaultAddress })
}

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

const hobbies = ['hiking']
const address = null

const person = { 
  name: 'Matt', 
  age: 30
}

if (hobbies.length > 0) {
  person.hobbies = hobbies
}

if (address) {
  person.address = address
} else {
  person.address = defaultAddress
}

Удаление свойства распространения объекта

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

const person = {
  fname: 'Matt',
  lname: 'Chaffe',
  age: 30
}

function removePropertyFromObject (obj, propertyName) {
  const { [propertyName]: discard, ...remainingProperties } = obj
  return remainingProperties
}

removePropertyFromObject(person, 'age')
//-> { fname: 'Matt', lname: 'Chaffe' }

Объединение массивов

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

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]

const result = [...array1, ...array2]
//-> [1, 2, 3, 4, 5, 6]

Литералы шаблонов

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

const firstName = 'Matt'
const lastName = 'Chaffe'

const fullName = `${firstName} ${lastName}` // Matt Chaffe

По более традиционному способу конкатенации строк:

const firstName = 'Matt'
const lastName = 'Chaffe'

const fullName = firstName + ' ' + lastName // Matt Chaffe

Спасибо за чтение!

Первоначально опубликовано на https://mattchaffe.uk.