Изучите эти аккуратные трюки JavaScript менее чем за 5 минут.
В этой статье мы рассмотрим:
Удачного кодирования!
Методы экономии времени, используемые профессионалами!
В этой статье мы рассмотрим:
- Очистка или усечение массива.
- Имитация именованных параметров с деструкцией объектов.
- Деструктуризация объектов для элементов массива.
- Переключение с диапазонами.
- await нескольких асинхронных функций с помощью async / wait
- Создание чистых объектов
- Форматирование кода JSON
- Удаление повторяющихся элементов из массива.
- Сглаживание (объединение) многомерных массивов
Все материалы по JS в этом блоге, смотрите по ссылке.
- Очистка или усечение массива. Легкий способ очистки или усечения массива без его переназначения - это изменить его значение свойства
- Имитация именованных параметров с деструкцией объектов. Скорее всего, вы уже используете объекты конфигурации, когда вам нужно передать в переменную набор параметров для некоторой функции, например:
- Деструктуризация объектов для элементов массива. Назначение элементов массива отдельным переменным с деструкцией объектов:
- Переключение с диапазонами.
-
awaitнескольких асинхронных функций с помощьюasync / wait.
Можно ожидать - - Создание чистых объектов. Вы можете создать 100% чистый объект, который не наследует какое-либо свойство или метод из
- Форматирование кода JSON.
- Удаление повторяющихся элементов из массива. Используя ES2015
- Сглаживание (объединение) многомерных массивов Сглаживание массивов тривиально с оператором Spread:
length:
const arr = [11, 22, 33, 44, 55, 66]; // truncanting arr.length = 3; console.log(arr); //=> [11, 22, 33] // clearing arr.length = 0; console.log(arr); //=> [] console.log(arr[2]); //=> undefined
doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
const foo = config.foo !== undefined ? config.foo : 'Hi';
const bar = config.bar !== undefined ? config.bar : 'Yo!';
const baz = config.baz !== undefined ? config.baz : 13;
// ...
}
Это старый, но эффективный шаблон, который пытается имитировать именованные параметры в JavaScript. Вызов функции выглядит нормально. С другой стороны, логика обработки объектов конфигурации необоснованна. С деструктуризацией объекта ES2015 вы можете обойти этот недостаток:
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
// ...
}
И если вам нужно сделать дополнительный объект config, это тоже очень просто:
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
// ...
}
const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');
ПРИМЕЧАНИЕ. После некоторого раздумья я решил выделить этот трюк от других в этой статье. Это НЕ экономия времени, НO он подходит для кода реальной жизни. Имейте в виду: IF в таких ситуациях всегда лучше.
В отличие от других советов в этом посте, это скорее любопытство, чем что-то для реального использования.
Во всяком случае, я сохраню его в этой статье по историческим причинам.
Вот простой способ использовать диапазоны в операторах
switch:
function getWaterState(tempInCelsius) {
let state;
switch (true) {
case (tempInCelsius <= 0):
state = 'Solid';
break;
case (tempInCelsius > 0 && tempInCelsius < 100):
state = 'Liquid';
break;
default:
state = 'Gas';
}
return state;
}
await завершения нескольких асинхронных функций с помощью Promise.all:
await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
Object (например, constructor, toString () и т. д.).
const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined
JSON.stringify может сделать больше, чем просто подкрепить объект. Вы также можете украсить свой JSON-вывод:
const obj = {
foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } }
};
// Третий параметр - это количество пробелов, используемых для
// украшения вывода JSON.
// JSON.stringify (obj, null, 4);
// =>"{
// => "foo": {
// => "bar": [
// => 11,
// => 22,
// => 33,
// => 44
// => ],
// => "baz": {
// => "bing": true,
// => "boom": "Hello"
// => }
// => }
// =>}"
Sets вместе с оператором Spread - (...), вы можете легко удалить повторяющиеся элементы из массива:
const removeDuplicateItems = arr => [...new Set(arr)]; removeDuplicateItems([42, 'foo', 42, 'foo', true, true]); //=> [42, "foo", true]
const arr = [11, [22, 33], [44, 55], 66]; const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]
К сожалению, вышеупомянутый трюк будет работать только с двумерными массивами. Но с рекурсивными вызовами мы можем сделать его пригодным для массивов с более чем двумя измерениями:
function flattenArray(arr) {
const flattened = [].concat(...arr);
return flattened.some(item => Array.isArray(item)) ?
flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr);
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]
И вот оно! Надеюсь, эти аккуратные маленькие трюки помогут вам писать лучше и красивее на JavaScript.
Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.
Удачного кодирования!
