Я всегда мечтал создавать видео, связанные с моим хобби – программированием. Но я понимал, что я не являюсь носителем языка, что меня пугало, и я не решался пробовать.
Но пару недель назад, когда я готовил несколько полезных советов по JavaScript для начала своего путешествия в мир YouTube, я написал вот этот список советов, которые могут сэкономить ваше время. Я надеюсь, что они помогут вам также, как и мне когда-то.
В этой статье я хочу поделиться с вами пятью полезными советами по JavaScript (готовы окунуться?)
Деструктуризация объектов
Деструктуризация – это функция, которая появилась в ES6. Это одна из тех функций, которой вы будете пользоваться постоянно, стоит вам только узнать, как она работает.
Она поможет вам справиться с тремя главными вопросами:
- Повтор. Каждый раз, когда вы извлекаете свойство какого-либо объекта и создаете новую переменную, вы записываете все это в новую строку.
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
// Wow... should we display
// John's password like that?
{ // Ну и ну… неужели мы должны выводить
// пароль Джона вот таким образом? }
const firstName = user.firstName;
const lastName = user.lastName;
const password = user.password;- Доступность. Каждый раз, когда вы пытаетесь получить доступ к свойству какого-либо объекта, вы должны указать путь до него (например, user.firstName, user.firstName и т.д.).
- Использование. Скажем, вы создали новую функцию и при этом работаете лишь с одним свойством объекта.
Итак, теперь вы знаете, что это за проблемы, связанные с объектами. Так, как же их можно решить?
Как решить вопрос с повтором?
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const { firstName, lastName, password } = user;
console.log(firstName, lastName, password);
// Output: 'John', 'Doe', '123' { // Вывод: 'John', 'Doe', '123' }Деструктуризация – это процесс извлечения свойства объекта по его ключу. Если вы возьмете существующий ключ, который есть у объекта, и поместите его в скобки ({ firstName }), то, таким образом, сообщите JavaScript следующее:
«Эй, JavaScript, я хочу создать переменную с таким же именем, как у моего свойства. Я хочу создать переменную под названием firstName для свойства под названием firstName, которое есть у моего объекта.»
Примечание: если вы хотите произвести деструктуризацию объекта, то вам в любом случае нужен существующий ключ. При ином раскладе такой подход работать не будет.
Как решить вопрос с доступностью?
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
family: {
sister: {
firstName: "Maria",
},
},
};
// We access to the nested object `sister`
// and we extract the `firstName` property
{ // Мы получаем доступ к вложенному объекту sister
// и извлекаем свойство firstName }
const { firstName } = user.family.sister;
console.log(firstName);
// Output: 'Maria'Если вы работаете с вложенными объектами и постоянно пытаетесь получить доступ к одному и тому же свойству, это может вам наскучить и, кроме того, занять слишком много времени.
Однако у вас есть возможность сократить путь к свойству до одной переменной. Для этого вам нужно воспользоваться деструктурированием, и все это можно сделать в одну строку.
Как решить вопрос с использованием?
Вы уже знаете, как деструктурировать объект, а теперь я хочу вам показать, как можно извлекать свойства прямо в определении параметра функции.
Если вы знакомы с React, то, скорее всего, вы уже знаете, как это делать.
function getUserFirstName({ firstName }) {
return firstName;
}
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
console.log(getUserFirstName(user));
// Output: 'John'В примере выше у нас есть функция getUserFirstName, и при этом мы знаем, что она будет использовать лишь одно свойство нашего объекта - firstName.
И в данном случае вместо того, чтобы передавать весь объект или создавать новую переменную, мы можем просто деструктурировать параметры функции объекта.
Как можно объединять объекты в ES6?
В программировании довольно часто возникают проблемы, связанные со структурами данных, и их нужно как-то решать. Благо, в ES6 появился spread-оператор и упростил манипуляции с объектами и массивами.
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const userJob = {
jobName: "Developer",
jobCountry: "France",
jobTimePerWeekInHour: "35",
};Давайте представим, что у нас есть два объекта:
- User. Это объект, который определяет общую информацию о пользователе.
- UserJob. Это объект, который определяет информацию о работе пользователя.
Наша задача – создать один объект, который бы содержал свойства только этих двух объектов.
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const userJob = {
jobName: "Developer",
jobCountry: "France",
jobTimePerWeekInHour: "35",
};
const myNewUserObject = {
...user,
...userJob,
};
console.log(myNewUserObject);
// Output:
//{
// firstName: 'John',
// lastName: 'Doe',
// password: '123',
// jobName: 'Developer',
// jobCountry: 'France',
// jobTimePerWeekInHour: '35'
//}С помощью spread-оператора (…) мы можем извлечь все свойства из одного объекта и поместить их в другой.
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const userJob = {
jobName: "Developer",
jobCountry: "France",
jobTimePerWeekInHour: "35",
};
const myNewUserObject = {
...user,
...userJob,
};
console.log(myNewUserObject);
// Output:
//{
// firstName: 'John',
// lastName: 'Doe',
// password: '123',
// jobName: 'Developer',
// jobCountry: 'France',
// jobTimePerWeekInHour: '35'
//}Как объединять массивы?
const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];
const namesWithSpreadSyntax = [...girlNames, ...boyNames];
console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']Как и в случае с объектами, spread-оператор (…) извлекает все элементы из одного массива и помещает их в другой.
const girlNames = ["Jessica", "Emma", "Amandine"];
const newNewArray = [
...girlNames,
// We extract: { // Мы извлекаем следующие элементы: }
// - 'Jessica'
// - 'Emma'
// - 'Amandine'
// and send them to { // и отправляем их }
// a new array `[]` { // в новый массив }
];Как удалять дубликаты в массиве?
Массивы – это те же списки, а значит, в них может присутствовать большое количество одинаковых элементов. Если вы хотите избавиться от дубликатов в своем массиве, то можете воспользоваться одним из способов, которые мы привели ниже.
Один из способов позволяет сделать это в одну строку (благодаря ES6), но мы привели и «старый» способ для сравнения.
Как удалять дубликаты: старый способ
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];
const uniqueAnimalsWithFilter = animals.filter(
// Parameters example: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl']
{ // Пример параметров: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'] }
(animal, index, array) => array.indexOf(animal) == index
);
console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']Давайте посмотрим на пример выше. Здесь мы хотим очистить массив под названием animals от всех дубликатов.
Мы можем сделать это с помощью функции filter и метода indexOf внутри нее.
Функция filter берет все элементы из массива animals (animals.filter). После чего для каждого вхождения предоставляются следующие данные:
- Текущее значение (пример: duck)
- Индекс (пример: 0)
- Первоначальный массив (пример: массив animals => ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])
Мы применяем метод indexOf к каждому вхождению исходного массива и передаем переменную animal (текущее значение) в качестве параметра.
indexOf вернет первый индекс текущего значения (пример: для значения «owl» индекс будет 0).
Затем внутри функции filter мы сравниваем значение indexOf с текущим индексом. Если они совпадают, то мы возвращаем true, в противном случае - false.
Функция filter создаст новый массив, в котором будут только те элементы, для которых было возвращено значение true.
То есть в нашем случае: ['owl', 'frog', 'canary', 'duck', 'goose'].
Как удалять дубликаты: новый способ
Ну скажем так, «старый» способ довольно интересный, но при этом долгий и немного сложный. Так что, давайте посмотрим на «новый» способ:
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];
const uniqueAnimalsWithSet = [...new Set(animals)];
console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']Давайте посмотрим на каждый шаг в отдельности:
// 1
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];
// 2
const animalsSet = new Set(animals);
console.log(animalsSet);
// Output: Set { 'owl', 'frog', 'canary', 'duck', 'goose' }
// 3
const uniqueAnimalsWithSet = [...animalsSet];
console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']У нас есть массив под названием animals, и мы преобразуем его в тип Set – специальный тип объектов в ES6.
Что его отличает от остальных, так это то, что он позволяет создавать набор уникальных значений.
Примечание: Set – это набор уникальных значений, но это не массив.
Раз уж мы имеем объект типа Set с уникальными значениями, мы должны преобразовать его обратно в массив.
Для этого мы должны воспользоваться spread-операторами, которые позволят нам деструктурировать объект и отправить все свойства в новый массив.
За счет того, что объект типа Set имеет только уникальные свойства, наш новый массив также будет иметь только уникальные значения.
Как использовать тернарный оператор?
Вы слышали когда-нибудь о таком способе, который позволяет писать небольшие условия в одну сроку?
Если нет, то настало время избавиться от блоков if-else и начать использовать вместо них небольшие тернарные операторы.
Давайте для начала взглянем на пример с console.log. Идея здесь вот в чем: мы должны проверить значение переменной и при определенных условиях отобразить на экране вывод.
const colour = "blue";
if (colour === "blue") {
console.log(`It's blue!`);
} else {
console.log(`It's not blue!`);
}Данный пример – это типичный случай использование тернарного оператора, который позволяет заменить 5 строк всего одной!
Всего одна строка!
const colour = "blue";
colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`);
// [condition] ? [if] : [else] { // [условие] ? [if] : [else] }Тернарный оператор может заменить if и else в случае небольших условий.
Примечание: в ситуациях со сложными условиями, тернарный оператор лучше не использовать, поскольку он может снизить читаемость.
Ниже есть еще один пример, в котором используется тернарный оператор. Здесь он применяется в операторе return внутри функции.
function sayHelloToAnne(name) {
return name === "Anne" ? "Hello, Anne!" : "It's not Anne!";
}
console.log(sayHelloToAnne("Anne"));
// Output: 'Hello, Anne!'
console.log(sayHelloToAnne("Gael"));
// Output: "It's not Anne!"Заключение
Надеюсь, что эта статья стала для вас полезной и вы смогли узнать что-то новое о JavaScript.
