От автора: время, когда JavaScript использовалось только для добавления небольших взаимодействий на сайт, давно ушло. Новые стандарты EcmaScript теперь выходят каждый год, принося все больше и больше полезных и мощных функций, а JavaScript больше не используется только для Front-End, так как теперь также можно создавать серверную архитектуру, мобильные, стационарные или IOT-приложения.
Это первая статья серии, которую я планирую написать. Я хочу поделиться с вами тем, какие есть в JavaScript функции, которые я использую каждый день, чтобы повысить эффективность разработки, писать лучший и более удобный для чтения код, а также я расскажу, почему я считаю, что они просто потрясающие. Я также объясню, как их можно использовать и какие проблемы они решают.
Let / Const
Поскольку я начал использовать «let» и «const», я никогда больше не использую ключевое слово «var». «let» был представлен как замена для «var». И «let», и «const» ограничены блоками, а «var» — функцией. Это означает, что если мы, например, инициализируем «var» внутри цикла for, оно также будет доступно за его пределами.
|
1 2 3 4 5 6 |
var animals = ['chicken', 'duck', 'cow']; for (var key in animals) { var animal = animals[key]; } console.log(animal); // cow |
Как вы можете видеть, мы объявили переменную animal внутри цикла, но мы все равно можем получить доступ к ней из-за его пределов. Однако, если мы вместо этого используем «let», мы получим ошибку.
|
1 2 3 4 5 6 7 |
const animals = ['chicken', 'duck', 'cow']; for (var key in animals) { let animal = animals[key]; } console.log(animal); // Reference error |
Вы можете спросить, для чего нам беспокоиться об этом, а не использовать «var». Ну, в цикле нам может потребоваться объявить переменные для временного хранения некоторых данных, которые необходимы только для этого цикла. Поэтому нам не нужно, чтобы эти переменные были доступны из внешней области. Если вам нужно получить доступ к определенной переменной за пределами цикла for, вы можете просто объявить переменную снаружи.
|
1 2 3 4 5 6 |
const animals = ['chicken', 'duck', 'cow']; let animal for (var key in animals) { animal = animals[key]; } console.log(animal); // cow |
Кроме того, возможно, вы заметили, что в этих примерах я также изменил «var animals = []» на «const animals = []». Рекомендуется использовать «const», если назначенное значение не должно изменяться в будущем. Итак, если вы объявите его с помощью «var», вы можете изменить его на String, Object, Number и т. д.
|
1 2 3 4 5 6 7 8 |
var animals = ['chicken', 'duck', 'cow']; animals = { animal1: 'cow', animal2: 'chicken' } console.log(animals); // Object {animal1: "cow", animal2: "chicken"} |
Однако, если вы присвоите значение «const» и попытаетесь его изменить, вы получите сообщение об ошибке.
|
1 2 3 4 5 6 7 8 |
const animals = ['chicken', 'duck', 'cow']; animals = { animal1: 'cow', animal2: 'chicken' } console.log(animals); // SyntaxError: animals is read-only |
Важно помнить, что даже если вы назначаете объект или массив для «const», вы все равно можете изменять внутренние свойства и значения!
|
1 2 3 |
const animals = ['chicken', 'duck', 'cow']; animals[0] = 'pig'; console.log(animals); // ["pig", "duck", "cow"] |
Очень интересной особенностью «let» является то, что каждый раз, когда оно объявляется, создается новое связывание для области. Представьте себе, что вам нужно перебрать какие-то данные и в каждом цикле вам нужно сделать вызов api, а затем использовать значение индекса из цикла в обратном вызове.
|
1 2 3 4 5 6 |
for (var i = 0; i < 5; i++) { axios.get(‘//swapi.co/api/people/1') .then(resp => { console.log(i); // 5 }) } |
В этом случае console.log всегда будет 5. Это связано с тем, что цикл for не ждет завершения вызова api, а когда первый ответ будет возвращен, цикл уже завершен. Вы также можете увидеть это на изображении ниже.
Одним из возможных решений является создание замыкания для каждого цикла, чтобы мы могли сохранить индекс цикла для каждого вызова api. Мы можем использовать Immediately Invoked Function Expression (IIFE), которому передадим индекс. Это функция, которая будет вызывать себя и запускаться немедленно.
К счастью, с «let» нам не нужно это делать. Мы можем просто объявить «i» в цикле с ключевым словом «let» вместо «var», и это решит проблему.
Литералы шаблонов
Я все еще помню времена, когда, если мне нужно было создать динамическую разметку, мне приходилось писать много ненужного (но в то время, к сожалению, необходимого) кода, который также был с трудом читаемым. Просто взгляните на это:
Вместо этого теперь мы можем использовать литералы шаблонов для написания гораздо лучшего и читаемого кода. То, что мы здесь делаем, называется интерполяция строк. Вместо одиночных или двойных кавычек мы используем обратные кавычки, и внутри них мы можем использовать знак доллара с фигурными скобками ${}, чтобы добавить значение из переменной в строку. Благодаря этому наш код становится намного чище и читаемее, а также он может охватывать несколько строк. Просто следите за тем, чтобы не переусердствовать. Иногда по-прежнему лучше просто выполнить обычную конкатенацию строк с переменными.
|
1 2 |
let result = `${variable} / ${variable} / ${variable}` let result = variable + ' / ' + variable + ' / ' + variable |
Стрелочные функции
Я все время использую функции стрелок, и, честно говоря, я использую объявление обычной функции только тогда, когда без этого не обойтись. Есть несколько вещей, которые нужно знать о функциях стрелок. Во-первых, это тот факт, что функция стрелки по сравнению с нормальными функциями не имеет лексической области. Это означает, что «this» будет относиться к различным объектам в функциях стрелок и обычных функциях.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function Person (age) { this.age = age function getAge() { console.log('age', this.age) //undefined return this.age } return { getAge } } const Myke = new Person(25); console.log(Myke.getAge()); // undefined |
В этом случае, как мы видим, что попытка получить доступ к «age» через «this» приведет к ошибке, потому что «this» больше не ссылается на объект «Person», а на функцию getAge. Раньше обычно нам приходилось назначать «this» переменной, например «var self = this», а затем использовать ее в обратных вызовах. Однако, если мы используем стрелочные функции, мы можем получить доступ к свойству age.
|
1 2 3 4 |
const getAge = () => { console.log('age', this.age) // 25 return this.age } |
Конечно, я знаю, что мы могли бы просто назначить getAge как свойство непосредственно для объекта, и тогда у нас будет доступ к «age», но это было сделано только для демонстрационных целей. Функции стрелок особенно полезны для обратных вызовов и таких функций, как фильтры или карты, при попытке получить доступ к свойству из внешней области.
Помимо ключевого слова «this», «аргументы» также не привязаны, как в обычной функции. Если мы используем обычную функцию, мы можем получить доступ к аргументам.
|
1 2 3 4 5 |
function vegetables (name, colour) { console.log(arguments); // Object {0: "carrot", 1: "orange"} }; vegetables('carrot', 'orange'); |
Однако, когда мы пытаемся получить доступ к аргументам в стрелочной функции, мы ничего не получим.
|
1 2 3 4 |
const vegetables = (name, colour) => { console.log(arguments); // No object }; vegetables('carrot', 'orange'); |
Еще одна особенность функций стрелок, которая мне очень нравится — это непосредственное выражение возврата. Мы можем опустить скобки функции и сразу же вернуть значение:
|
1 2 |
const sum = (x, y) => x + y; console.log(sum(4, 5)); // 9 |
Кроме того, если нам нужно передать только один параметр, мы также можем отбросить скобки:
|
1 2 |
const multiplyByTwo = num => num * 2; console.log(multiplyByTwo(2)); // 4 |
Однако, если мы хотим немедленно вернуть объект, мы не сможем сделать это, так как скобки, используемые для объекта, также являются скобками функций.
|
1 2 |
// не будет работать const getObj = obj => {prop1: obj.prop1, prop2: obj.prop2} |
В этом случае нам нужно сделать это, чтобы заставить код работать.
|
1 2 |
// будет работать const getObj = obj => ({prop1: obj.prop1, prop2: obj.prop2}) |
Стрелочные функции имеют свои плюсы и минусы, но это одна из моих самых любимых функций, и при ее использовании ваш код может стать намного чище и понятнее.
Параметры по умолчанию
Обычно, если нам приходилось передавать параметр функции, а затем делать что-то на его основе, нам нужно было добавить проверки того, существует ли значение. Например, если нам приходилось передать функции объект, а затем мы попытались получить доступ к свойству в нем, если ничего не было передано, то мы получили бы ошибку.
|
1 2 3 4 5 6 7 8 9 |
function doSomethingWithObject(object) { // nothing passed if (object && typeof object === 'object') { // will not fire as we check if object is truthy and is an object console.log(object.property) } console.log(object.property) // error! } doSomethingWithObject() |
К счастью, теперь мы можем определить параметры по умолчанию, которые разрешают все проблемы с проверкой параметров.
|
1 |
function doSomethingWithObject(object = {}) {};``` |
Мы также можем поместить больше значений по умолчанию или назначить строку, целое число или что-то еще, что нам нужно.
|
1 2 3 4 5 |
function doSomethingWithObject(object = {property: 'hello'}, text = 'world') { console.log(object.property) // 'hello' console.log(text) // 'world' }; doSomethingWithObject(); |
Сокращения свойств
Сокращение свойства — это функция, которую мне действительно нравится использовать. Если вы хотите назначить объекту переменную с таким же именем, вместо этого:
|
1 2 3 4 |
let dinner = 'soup' mealPlan = { dinner: dinner } |
Вы можете сделать это короче, написав «dinner» только один раз.
|
1 2 3 |
mealPlan = { dinner } |
Сокращения свойств очень полезны при деструкции. Деструкция — это извлечение свойств массива или объекта. Например, в приведенном ниже примере мы деструктируем свойство данных из результатов, возвращаемых axios.
|
1 2 3 |
axios.get('something').then(({data}) => { console.log(data); //data property from response object } |
Причина, по которой мне это нравится, заключается в том, что если у меня есть большой объект со многими различными свойствами, которые мне нужно подготовить, например, для вызова api, я могу передать этот объект функции, которая вернет измененный объект.
|
1 2 3 4 5 6 7 |
let hugeObject = {'many properties here'} const prepareData = ({prop1, prop2, prop3, prop4}) => ({ prop1, prop2, prop3: prop3 ? 1 : 0, prop4 }) |
Вы также можете переименовать деструктируемые свойства:
|
1 |
const prepareData = ({prop1: name, prop2: surname}) => {}; |
Это всего лишь некоторые из функций EcmaScript, которые я использую ежедневно, и, я надеюсь, вы найдете их такими же полезными, как и я. В следующих статьях этой серии я расскажу о других функциях. Надеюсь, вам понравилась эта статья, я приглашаю вас поделиться своими мыслями в комментариях.
Автор: Thomas Kotowicz
Источник: //medium.com/
Редакция: Команда webformyself.
