JavaScript: 7 советов, которые вы, возможно, не знаете

Привет, в этой статье вы найдете несколько советов по JavaScript, которые, возможно, вы не знаете, и они могут быть вам полезны в будущем 😃.

1. Возврат функции

Вы знаете, как работает оператор возврата? Позвольте мне привести Вам пример:

Каков результат этого кода? Это Uncaught TypeError: Cannot read property 'message' of undefined, почему? В JavaScript есть автоматическая вставка точки с запятой (ASI), и точка с запятой вставляется автоматически. Наш возврат понимается как:

return; // Note “;” here
  {
    message: ‘Hello World’
  };

Мы ничего не вернули, поэтому пытаемся получить доступ к полю message в свойстве aundefined undefined.message). Чтобы получить правильный результат, мы можем написать:

2. Сокращенный синтаксис для литерала объекта

Если вы создаете JavaScript литерал объекта (объект с определением свойств, разделенным запятыми), например:

Используя ES6, вы можете просто написать этот сокращенный синтаксис 😎:

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

myFunction({message: message});

Вы можете просто преобразовать в:

myFunction({message});

Когда у вас есть поля, которые могут быть краткими, и другие поля с другим ключом/значением, лучше написать краткие поля раньше, чем другие. Например, этот код намного читабельнее:

return {
  name,
  lastname,
  description: ‘A very nice person’
}

Чем:

return {
  name,
  description: ‘A very nice person’,
  lastname
}

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

можно преобразовать в:

3. Эмблематичное это

Что будет на выходе со следующим кодом?

Результатом будетundefinedпотому что мы звонимthis.messageна другоеthis имя. С анонимусной функцией все по-другому и нам нужно задать ее, например, withbind:

Или вы можете использовать функцию стрелки ES6, чтобы это устанавливалось автоматически:

4. Сортировка массива

Знаете ли вы, что функция sortмассива сортирует элементы, преобразуя их в строки? Например:

Какой результат вы ожидаете? Это[5, 10, 16, 25, 44]но вы получите[10, 16, 25, 44, 5]😮 потому что без пользовательской функции сравнения используется функция по умолчанию, и все элементы преобразуются в строки: например, "5" намного больше, чем "16", потому что "16" начинается с "1", а в Юникоде оно больше, чем "5".

console.log(5 > 16); // false
console.log(“5” > “16”); //true

Используя пользовательскую функцию сравнения, вы получите правильный порядок:

5. Функция подъема

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

Мы получимHello from myFunction()в нашей консоли, но зачем? Объявление функции находится после вызова… это работает благодаря подъему! JavaScript перемещается вверху объявления функции кода и кода, который он преобразует следующим образом:

Давайте посмотрим на другой пример:

ФункциюmyFunction нельзя использовать до ее объявления, потому что также для переменных есть подъем и вверху кода перемещаются только объявления переменных, а не их назначение. Код будет преобразован в:

Когда мы попытаемся вызватьmyVarFunction()переменную по-прежнемуundefinedи мы получим ошибку.

6. Аргументы функции по умолчанию

Если вам нужно использовать значение по умолчанию, вы можете написать такой код:

Таким образом, если вы создаете человека без имени, имя по умолчанию будет John. Что делать, если нужно добавить еще один параметр? Мы можем попробовать добавить еще один оператор if:

Добавление других значений по умолчанию читабельность хуже, будет слишком много операторов if только для значений по умолчанию… с ES6 была введена новая функция: функции параметров по умолчанию! Мы можем переписать наш код намного лучше:

7. Деструктуризация

Давайте представим, что у нас есть объект, представляющий человека с двумя полями:

Как мы можем получить доступ к полям человека? Один пример:

С помощью ES6 мы можем переписать приведенный выше код таким образом благодаря деструктуризации:

Мы создали две константы (nameиlastname) непосредственно соpersonзначениями. Это возможно, потому что мы использовали одно и то же имя поля для констант и полей объекта. с другими именами полей это не может работать, например, в следующем коде мы не получим значения: ageisundefinedпотому что в personнет поля anage.

const {age} = person;

Деструктуризация может быть очень полезной с функциями. Представьте, если у нас есть функция, которая показывает информацию о человеке, мы можем написать:

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

Наконец, мы можем использовать эту функцию и с массивом:

Вместо того, чтобы писать что-то вроде этого:

👏