Привет, меня зовут Infanty, мой профиль в LinkedIn.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.

Основы ES6

Блочная область видимости переменных:

let x = 'outher'

function test(inner) {
  if (inner) {
    let x = 'inner'
    return x
  }

  return x
}

// Result: outher.
console.log(test(false))
// Result: inner.
console.log(test(true))

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

const first = 'Adrian'
const last = 'Mejia'

// Result: Your name is Adrian Mejia.
console.log(`Your name is ${first} ${last}.`)

Многострочные строки:

const template = `<ul>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ul>`

// Result: template printing.
console.log(template)

Получение определённых элементов из массива:

const array = [1, 2, 3, 4]
const [first, , third] = array

// Result: 1 3.
console.log(first, third)

Обмен значений:

let a = 1
let b = 2

[a, b] = [b, a]

// Result: 2 1.
console.log(a, b)

Деструктуризация для нескольких возвращаемых значений:

function margin() {
  const left = 1,
    right = 2,
    top = 3,
    bottom = 4

  return { left, right, top, bottom }
}

const { left, bottom } = margin()

// Result: 1 4.
console.log(left, bottom)

Деструктуризация для параметров согласования:

const user = { firstName: 'Adrian', lastName: 'Mejia' }

function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}

// Result: Adrian Mejia.
console.log(getFullName(user))

Классы и объекты:

class Animal {
  constructor(name) {
    this.name = name
  }

  speak() {
    console.log(this.name + ' makes a noise.')
  }
}

const animal = new Animal('Animal')

// Result: Animal makes a noise.
animal.speak()

Наследование:

class Lion extends Animal {
  speak() {
    super.speak()
    console.log(this.name + ' roars.')
  }
}

const lion = new Lion('Simba')

// Result: 
// - Simba makes a noise. 
// - Simba roars.
lion.speak()

Native Promises:

function printAfterTimeout(string, timeout) {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      resolve(string)
    }, timeout)
  })
}

printAfterTimeout('Hello', 2000)
  .then(result => {
    console.log(result)
    return printAfterTimeout(result + ' Reader', 2000)
  })
  .then(result => {
    console.log(result)
  })

// Result: 
// - Hello. 
// - Hello Reader.

Стрелочные функции:

// First example.
$('.btn').click(event => this.sendData())

// Second example.
const ids = [291, 288, 984]
const messages = ids.map(value => `ID is ${value}.`)

// Result: ["ID is 291.", "ID is 288.", "ID is 984."]
console.log(messages)

Перебор значений (обход) массива:

// for ...of.
const array = ['a', 'b', 'c', 'd']

for (const element of array) {
  console.log(element)
}

// Result: 
// - a. 
// - b.
// - с. 
// - в.

Задание параметров по умолчанию:

function point(x = 0, y = -1, isFlag = true) {
  console.log(x, y, isFlag)
}

// Result: 0 0 true.
point(0, 0)

// Result: 0 0 false.
point(0, 0, false)

// Result: 1 -1 true.
point(1)

// Result: 0 -1 true.
point()

Rest-параметры (получение большого количества параметров):

function printf(format, ...params) {
  console.log('params: ', params)
  console.log('format: ', format)
}

// Result: 
// - params: ["adrian", 321, 3.141592653589793].
// - format:  %s %d %.2f.
printf('%s %d %.2f', 'adrian', 321, 3.141592653589793)

Spread-оператор (оператора расширения) для преобразования массива в список аргументов для вывода или обработки значений массива:

// Result (maximum number): 100.
Math.max(...[2, 100, 1, 6, 43])

Spread-оператор для объединения нескольких массивов:

const arrayOne = [2, 100, 1, 6, 43]
const arrayTwo = ['a', 'b', 'c', 'd']
const arrayThree = [false, true, null, undefined]

// Result: [2, 100, 1, 6, 43, "a", "b", "c", "d", false, true, null, undefined].
console.log([...arrayOne, ...arrayTwo, ...arrayThree])

Дополнительные полезные примеры

Очистка массива:

arr.length = 0 

Имитация приёма функцией - массива, имеющего значения по умолчанию:

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 })

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
  // ...
} 

Присвоение элементов массива отдельным переменным:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York'
const { 2: country, 4: state } = csvFileLine.split(',')

console.log(country)
console.log(state)

Замена if на switch:

function getWaterState(tempInCelsius) {
  let state

  switch (true) {
    case tempInCelsius <= 0:
      state = 'Solid'
      break
    case tempInCelsius > 0 && tempInCelsius < 100:
      state = 'Liquid'
      break
    default:
      state = 'Gas'
  }

  return state
}

Ожидание выполнения нескольких асинхронных функций в конструкции async/await:

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()]) 

Создание чистых объектов (абсолютно пустых):

const pureObject = Object.create(null) 

Форматирование JSON-кода:

const obj = {
  foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } },
}

JSON.stringify(obj, null, 2)  

Удаление дублирующихся элементов массивов:

const removeDuplicateItems = arr => [...new Set(arr)]
removeDuplicateItems([42, 'foo', 42, 'foo', true, true])

Линеаризация многомерных массивов:

function flattenArray(arr) {
  const flattened = [].concat(...arr)
  return flattened.some(item => Array.isArray(item))
    ? flattenArray(flattened)
    : flattened
}

const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]]
const flatArr = flattenArray(arr)

// Result: [11, 22, 33, 44, 55, 66, 77, 88, 99].
console.log(flatArr)

Обработка ошибок:

const a = 5

try {
  // Переменная b не объявлена - возникает ошибка.
  console.log(b) 
} catch (err) {
  // В консоль попадает сообщение об ошибке и стек ошибки.
  console.error(err) 
} finally {
  // Этот код будет выполнен в любом случае.
  console.log(a) 
} 

Проверка наличия значения в нумерованном массиве:

if (myArray.includes('findItem')) {
  console.log('Элемент найден')
} 

Получить новый массив, содержащий элементы удовлетворяющие заданному условию:

myArray.filter((item) => item >= 30) 

Получить новый массив, содержащий элементы обработанные заданным условием:

myArray.map((item) => item * 0.75) 

Вывод данных объекта

  • Object.values() - возвращает массив значений свойств переданного ему объекта.
  • Object.keys() - возвращает массив, состоящий из имён свойств объекта (ключей).
  • Object.entries() - возвращает массив, содержащий пары вида: [ключ, значение], представляющие собой имена свойств и значения этих свойств.

Избранные определения из теории

При копировании переменной с объектом – копируется эта ссылка (переменная), а объект по-прежнему остается в единственном экземпляре.

Замыкание - это комбинация функции и лексического окружения, в котором эта функция была объявлена. Это окружение состоит из произвольного количества локальных переменных, которые были в области действия функции во время создания замыкания. Это чем то напоминает вложенные процедуры и функции в языке программирования: Delphi.

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

Абстрагирование - это способ выделить набор значимых характеристик объекта, исключая из рассмотрения незначимые. Соответственно, абстракция - это набор всех таких характеристик.

Полиморфизм - это свойство системы использовать объекты с одинаковым интерфейсом без информации о типе и внутренней структуре объекта.

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

Итерируемые или, иными словами, «перебираемые» объекты - это те объекты, содержимое которых можно перебрать в цикле.

Общие рекомендации

  • Используйте понятные имена переменных и функций.
  • Пишите короткие функции, решающие одну задачу.
  • Документируйте код.
  • Помните о принципе DRY - избегайте дублирования кода.