JavaScript – это язык веб-программирования, разработанный и используемый для создания интерактивных веб-страниц. Интерактивный — это красивое слово, которое можно свести к взаимодействию между пользователем и веб-страницей. Это взаимодействие основано на функциональности веб-страниц, а не на ручном вмешательстве.
Благодаря множеству фреймворков JavaScript, выпущенных в последние годы, он явно стал лучшим выбором для разработки веб-приложений. Вот некоторые из самых популярных фреймворков JavaScript:
1. Время выполнения вашего кода
console.time('Execution Time');
await functionToBeMeasured();
console.timeEnd('Execution Time');
Метод время — бесценный инструмент для разработчиков, которые хотят создавать высокопроизводительный код. Он принимает имя таймера в качестве параметра и ожидает получить вызов timeEnd, в котором указано то же имя таймера.
Метод timeEnd возвращает время, прошедшее в миллисекундах между вызовами двух функций, что позволяет программистам быстро выявлять узкие места в своем коде и легко проводить их рефакторинг.
Этот подход намного лучше, чем вычисление истекшего времени выполнения вручную, поскольку он встроен и широко поддерживается современными браузерами.
Обязательно к прочтению: Зарплата разработчика JavaScript
2. Приведение значений в массивы с использованием карты
const numbers = ["65", "12", "4", "-0.23", "6.543"]; const newArr = numbers.map(Number) console.log(newArr) //Array(5)[ 65,12,4,-0.23,6.543 ]
Вероятно, это один из самых простых трюков в этой статье, но он обеспечивает очень элегантное решение для преобразования массива числовых значений, представленных в виде строк, в числа JavaScript (все числа JavaScript являются 64-битными числами с плавающей запятой).
map метода Array и передачи Number в качестве параметра для каждого значения массива вызывает конструктор Number и возвращает этот результат.
3. Подождите, пока несколько обещаний не будут выполнены
const promises = [
Promise.resolve(100),
fetch("http://localhost/"),
fetch("http://localhost/api/v1l/books"),
];
const statusPromises = await Promise.all(promises);
console.log(statusPromises); // ©: 100, 1: Request response, 2: Request response
console.log("Promises finished execution");
Этот трюк удобен, когда вам нужно запустить несколько задач и дождаться их завершения. Поскольку каждая задача выполняется асинхронно, их можно обрабатывать параллельно, а возвращенные данные можно использовать после того, как все промисы будут разрешены.
Помните, что если одно обещание отклонено, Promise.all также немедленно вернет отклоненное обещание.
Вы можете использовать этот трюк, если вы разрабатываете архитектуру микросервисов и вам нужны большие непоследовательные данные как можно быстрее из нескольких точек, заканчивающихся на.
O Как только все промисы разрешены, Promise.all возвращает промис, который разрешается в массив результатов изначально предоставленных промисов.
Как и в случае с любым промисом, вы также можете указать обратный вызов для обработки результатов.
4. Удалите дубликаты из массивов с помощью Set
const numbers = [1, 2, 3, 4, 4, 4, 4, 5, 6, 6, 7]; const fruits = ["apple”, "pear", "banana", “apple”, "apple", “cherry"]; const uniqueNumbers ..new Set(numbers)]; const uniqueFruits = [...new Set(fruits)]; console. log(uniqueNumbers); // [ 1, 2, 3, 4, 5, 6, 7 ] console. log(uniqueFruits); // ["apple”, "pear", “banana”, "cherry"
Простой, но очень эффективный способ удалить повторяющиеся массивы одной строкой.
В этом примере мы также использовали недавно показанный оператор распространения для расширения массива и создания массива.
Этот трюк отлично работает со значениями всех типов и даже исправляет некоторые странные особенности равенства в JavaScript.
Вы также можете использовать массивы для удаления повторяющихся массивов сложных объектов.
5. Используйте оператор распространения для поверхностного копирования объектов (и массивов!)
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const person = {
name: "Lewis",
active: false,
}
console. log([...numbers, 9, 10]); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log({ ...person, active: true }); // { name: "Lewis", active: true }
console.log({ ...person, age: 25 }); // { name: "Lewis", active: false, age: 25 }
С введением расширенного синтаксиса в JavaScript стало проще, чем когда-либо, расширять объекты или массивы и создавать копии.
Это особенно полезно, когда вам нужно управлять состоянием в React или React Native, поскольку все, что вам нужно сделать, это скопировать текущее состояние с литералом объекта, изменить выбранные свойства и изменить состояние с помощью привязки состояния, предоставляемой useState.
Это также отличный способ конкатенировать массивы или объединять объекты в одну строку вместо того, чтобы перебирать каждый экземпляр и объединять их вручную.
6. Параметры функции по умолчанию
let greetings = (name, message='Hello,') => {
return `${message} ${name}`;
}
console.log(greetings('Jack'));
console.log(greetings('Jack', 'Hola!'));
В JavaScript аргументы функции (или параметры) похожи на переменные, локальные для этой функции. Вы можете или не можете передавать ему значения при вызове функции. Если вы не передаете значение параметра, параметр становится неопределенным и может привести к нежелательным побочным эффектам.
Существует простой способ передать значение по умолчанию при настройке параметров функции. Вот пример, когда мы передаем значение по умолчанию Hello в параметр message функции Greetings.
7. Используйте синтаксис деструктурирующего присваивания
const company = {
employees: 10,
founder: "John Doe",
products: ["Phones”, "Hardware", “Laptops"],
};
const { employees, founder } = company;
const { @: phones, 2: laptops } = company.products;
console.log(employees); // 10
console.log(founder); // John Doe
console.log(phones); // Phones
console.log(laptops); // Laptops
Еще один быстрый и простой прием, который вы можете использовать для извлечения наиболее важной для вас информации из объекта JavaScript.
Синтаксис Destruct позволяет разработчикам быстро распаковывать значения из массивов или свойств объектов в именованные переменные.
Этот синтаксис позволяет использовать несколько трюков, например. Например, замена однострочных переменных или анализ только значения свойств возвращаемого объекта.
8. Значение по умолчанию с ИЛИ
Если вы когда-нибудь захотите установить значение по умолчанию для переменной, вы можете легко сделать это с помощью оператора OR(||).
let person = {name: 'Emma'};
let age = person.age || 35; // sets the value 35 if age is undefined
console.log(`Age of ${person.name} is ${age}`);
Но подождите, у него проблемы. Что делать, если человеку 0 лет (может быть, новорожденному)? Возраст рассчитывается как 35 (0 || 35 = 35). Это неожиданное поведение.
Введите nullish coalescing operator (??). Это логический оператор, который возвращает свой правый операнд, если его левый операнд равен nullили undefined, и возвращает свой левый операнд в противном случае.
Чтобы завершить приведенный выше код с помощью оператора ??rewrite,
let person = {name: 'Jack'};
let age = person.age ?? 35; // sets the value 0 if age 0, 35 in case of undefined and null
console.log(`Age of ${person.name} is ${age}`);
9. Отформатируйте вывод JSON с пробелами
Простой, но очень эффективный инструмент для экспорта читаемого JSON, указав в третьем параметре количество пробелов для использования для отступа.
Второй параметр является заменой и может быть функцией, управляющей процессом построения строки, или массивом. В этом случае он указывает имя свойств, которые необходимо включить в вывод строки.
const profile = {
name: "Emma",
age: 23,
dateJoined: "11-01-2019",
};
JSON.stringify(profile, null, 2);
//{
// "name": "Emma",
// Tage": 23,
// “"dateJoined": "11-01-2019"
//}
10. целое число
let mynum = 123;
let mynumStr = "123";
console.log(`${mynum} is a number?`, Number.isInteger(mynum));
console.log(`${mynumStr} is a number?`, Number.isInteger(mynumStr));
//123 is a number?
//true
//123 is a number?
//false
Существует гораздо более простой способ определить, является ли значение целым числом. API JavaScript Numbers предоставляет для этой цели метод isInteger(). Это очень полезно, и об этом лучше знать.
Хотите больше технических статей?
Оставайтесь с нами, в ближайшие недели я опубликую больше статей о JavaScript и веб-разработке.
Вы также можете ознакомиться с другими моими статьями, если вам интересно то, что я пишу.
