Краткое справочное руководство по современному синтаксису JavaScript

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

Часто в примерах кода используются новейшие доступные функции JavaScript.

Иногда эти функции сложно отличить от функций фреймворка. Это часто случается, например, с React, который поощряет очень «современный» подход к JavaScript.

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

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

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

Синтаксис стрелочных функций следующий:

const myFunction = () => {
  //...
}

Немного отличается от обычных функций:

const myFunction = function() {
  //...
}

() Может содержать параметры, как и в обычных функциях. Иногда скобки полностью удаляются, когда в функции всего один оператор, и это неявное возвращаемое значение (ключевое слово return не требуется):

const myFunction = i => 3 * i

Подробнее о функциях стрелок

Оператор спреда

Если ты видишь

const c = [...a]

Этот оператор копирует массив.

Вы также можете добавлять элементы в массив, используя

const c = [...a, 2, 'test']

В...называется оператором распространения. Вы также можете использовать его на объектах:

const newObj = { ...oldObj } //shallow clone an object

Подробнее об операторе спреда

Разрушение заданий

Вы можете извлечь тольконемногосвойства из объекта с использованием этого синтаксиса:

const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 54 //made up
}

const { firstName: name, age } = person

Теперь у вас будет два значения constnameиage.

Синтаксис также работает с массивами:

const a = [1,2,3,4,5]
[first, second, , , fifth] = a

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

Если вы видите строки, заключенные в обратные кавычки, это литерал шаблона:

const str = `test`

Внутри вы можете поместить переменные и выполнить javascript, используя${...}фрагменты:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

А также вы можете растянуть строку на несколько строк:

const string3 = `Hey
this

string
is awesome!`

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: