Автор оригинала: FreeCodeCamp Community Member.
Я всегда хотел создавать видео вокруг моего программирования хобби. Но я не родной английский докладчик, и я был напуган, чтобы попробовать.
Но несколько недель назад, хотя я готовил несколько советов JavaScript, чтобы начать свой путешествие YouTube, я написал этот список советов спасения по времени. Я надеюсь, что они помогут вам, как они помогли мне.
В этой статье я собираюсь поделиться с вами 5 полезными советами JavaScript (вы готовы погрузиться? 😀).
И теперь, угадайте, что? Некоторые из этих советов на Мой канал YouTube 📹! (Вот Плейлист ).
Разрушение объекта
Разрушивание – это функция, которая была введена в 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.family.sisterи так далее). - Применение. В качестве примера, когда вы создаете новую функцию, и вы работаете только с одним свойством объекта.
Теперь, когда вы видели то, что эти три проблемы с объектами, как вы думаете, вы можете их решить?
Как решить проблему повторения
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const { firstName, lastName, password } = user;
console.log(firstName, lastName, password);
// Output: 'John', 'Doe', '123'
Разрушивание – это процесс извлечения свойства от объекта на его ключ. Принимая существующий ключ в вашем объекте, затем поместив его между двумя скобками ( {FirstName} ) Вы говорите JavaScript:
«Эй, JavaScript, я хочу создать переменную с тем же именем, что и моя собственность. Я хочу создать переменную Имя Для Имя Свойство моего объекта».
Примечание: Если вы хотите разрушить объект, вы всегда должны использовать существующий ключ. В противном случае это не будет работать.
Как решить проблему доступности
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
const { firstName } = user.family.sister;
console.log(firstName);
// Output: 'Maria'
Когда вы работаете с вложенными объектами, он может стать довольно повторяющимся и потратить много времени, доступ к тому же свойству много раз.
Использование Разрушения только в одной строке, вы можете уменьшить путь свойства к одной переменной.
Как решить проблему использования
Теперь, когда вы знаете, как разрушать объект, позвольте мне показать вам, как извлечь свойства непосредственно в определении параметра функции.
Если вы знаете, отреагируете, вы, вероятно, уже знакомы с ним.
function getUserFirstName({ firstName }) {
return firstName;
}
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
console.log(getUserFirstName(user));
// Output: 'John'
В приведенном выше примере у нас есть GetUserFirstname Функция, и мы знаем, что это будет использовать только одно свойство нашего объекта, Имя Отказ
Вместо того, чтобы пройти весь объект или создание новой переменной, мы можем разрушать параметры функции объекта.
Как объединить объекты в ES6
В программировании вам часто нужно решать проблемы с структурами данных. Благодаря Оператор распространения Введенные в ES6, объект и манипуляции массива являются более простыми.
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const userJob = {
jobName: "Developer",
jobCountry: "France",
jobTimePerWeekInHour: "35",
};
Давайте представим, что у нас есть два объекта:
- Пользователь. Объект, определяющий общую информацию о пользователе.
- 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'
//}
Используя оператор SPRECT ( ... ), мы можем извлечь все свойства одного объекта к другому.
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const myNewUserObject = {
...user,
// We extract:
// - firstName
// - lastName
// - password
// and send them to
// a new object `{}`
};
Как объединить массивы
const girlNames = ["Jessica", "Emma", "Amandine"]; const boyNames = ["John", "Terry", "Alexandre"]; const namesWithSpreadSyntax = [...girlNames, ...boyNames]; console.log(namesWithSpreadSyntax); // Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']
Как и объекты, оператор спреда ( ... ) извлекает все элементы из одного массива на другой.
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'] (animal, index, array) => array.indexOf(animal) == index ); console.log(uniqueAnimalsWithSet); // Output: ['owl', 'frog', 'canary', 'duck', 'goose']
В приведенном выше примере мы хотим очистить животные массив, удалив все дубликаты.
Мы можем сделать это, используя функцию Фильтр с Индекс внутри него.
Фильтр Функция принимает все элементы животные Массив ( Животные.filter ). Тогда для каждого вхождения он обеспечивает:
- Текущее значение ( Пример:
Утка) - Индекс ( Пример: 0)
- Начальный массив ( Пример:
ЖивотныеArray =>[«Сова», «лягушка», «Канарейка», «утка», «утка», «гусь», «сова»])
Мы будем подать заявку Индекс На оригинальном массиве для каждого вхождения и дайте в качестве параметра животное Переменная (текущее значение).
Индекс Вернется первый индекс текущего значения ( Пример: Для «Совы» индекс 0).
Тогда внутри фильтра мы сравниваем значение Индекс к текущему индексу. Если это то же самое, мы возвращаем правда в противном случае ложь Отказ
Фильтр создаст новый массив только с элементами, где возвращаемое значение было правда Отказ
Итак, в нашем случае: [«Сова», «лягушка», «канарейка», «утка», «гусь»] Отказ
Как удалить массив дубликатов «новый способ»
Ну, «старый путь» интересно понимать, но это долго и немного сильно. Итак, давайте проверим новый путь сейчас:
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']
У нас есть животные массив, и мы преобразуем его в Установить , который является специальным типом объекта в ES6.
То, что отличается от именно то, что она позволяет создавать коллекцию уникальных ценностей.
Примечание: Установить это коллекция уникальных ценностей, но это не Массив Отказ
Как только у нас есть наш Установить Объект с уникальными значениями, нам нужно преобразовать его обратно в массив.
Для этого мы используем операторы спреда, чтобы разрушить его и отправлять все свойства для нового Массив Отказ
Потому что Установить Объект имеет уникальные свойства, наш новый массив также будет иметь только уникальные значения.
Как использовать Ternary Operators
Вы уже слышали о способе написать небольшие условия только в одной строке?
Если нет, пришло время удалить много вашего Если и еще блокирует и преобразуют их в небольшие тройные операции.
Давайте посмотрим на пример с 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]
Тровые операторы заменяют Если и еще для небольших условий.
Примечание: Не рекомендуется создавать сложные условия с тройными операторами, потому что он может снизить читаемость.
Ниже приведен еще один пример, который использует Ternary Operators, но на этот раз в Возвращение функции.
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!"
Хотите внести свой вклад? Вот как.
Вы можете внести свой вклад в этот репозиторий GitHUB. Любой вклад ценится, и оно поможет каждому из нас улучшит навыки наших JavaScript. Github: JavaScript Удивительные советы
Заключение
Я надеюсь, что вы узнали некоторые новые вещи о JavaScript, читая этот пост.
Вы можете остаться на связи со мной по После моей учетной записи Twitter здесь. Я публикую твиты о моем новом контент, программировании в целом, и мое путешествие как веб-разработчик.
Вы также можете проверить Настоящий код в Instagram.
Я люблю делиться контентом на разных платформах. Интересно варьировать типы публикаций и адаптироваться к каждой платформе.
Если вы хотите изучить JavaScript с Chavy Visuals, я публикую учебные пособия по программированию на Мой Instagram Отказ