Изучите эти трюки JavaScript менее чем за 5 минут

1656633008 izuchite eti tryuki javascript menee chem za 5 minut

Альсидес Кейрос

Методы экономии времени, которые используют профессионалы

QuQa8vSRsqE3AzHx-lx1Sdxf4jKSObxgHKqd

1. Очистка или сокращение массива

Простой способ очистить или сократить массив без его повторного назначения – это изменить его length стоимость имущества:

const arr = [11, 22, 33, 44, 55, 66];
// truncantingarr.length = 3;console.log(arr); //=> [11, 22, 33]
// clearingarr.length = 0;console.log(arr); //=> []console.log(arr[2]); //=> undefined

2. Моделирование именуемых параметров с деструктуризацией объектов

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

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 }) {  // ...}

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

function doSomething({ foo = 'Hi', bar="Yo!", baz = 13 } = {}) {  // ...}

3. Деструктуризация объектов для элементов массива

Назначить элементы массива отдельным переменным посредством деструктуризации объектов:

const csvFileLine="1997,John Doe,US,john@doe.com,New York";
const { 2: country, 4: state } = csvFileLine.split(',');

4. Переключатель с диапазонами

ПРИМЕЧАНИЕ: Подумав немного, я решил отличить этот трюк от других в этой статье. Это есть НЕТ техника экономии времени, НЕТ подходит ли он для кода реальной жизни. Помни: «Если» всегда лучше в таких ситуациях.
В отличие от других советов в этом сообщении, это скорее любопытство, чем то, что нужно использовать.
во всяком случае, Я оставлю его в этой статье по историческим причинам.

Вот простой трюк для использования диапазонов в операторах 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;}

5. Ожидайте несколько асинхронных функций с помощью async/await

Это возможно await несколько асинхронных функций для завершения использования Promise.all:

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Создание чистых объектов

Вы можете создать 100% чистый объект, который не наследует никаких свойств или методов Object (например, constructor, toString() и так дальше).

const pureObject = Object.create(null);
console.log(pureObject); //=> {}console.log(pureObject.constructor); //=> undefinedconsole.log(pureObject.toString); //=> undefinedconsole.log(pureObject.hasOwnProperty); //=> undefined

7. Форматирование кода JSON

JSON.stringify может сделать больше, чем просто стринговать объект. Вы также можете украсить свой выход JSON с помощью этого:

const obj = {   foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } };
// The third parameter is the number of spaces used to // beautify the JSON output.JSON.stringify(obj, null, 4); // =>"{// =>    "foo": {// =>        "bar": [// =>            11,// =>            22,// =>            33,// =>            44// =>        ],// =>        "baz": {// =>            "bing": true,// =>            "boom": "Hello"// =>        }// =>    }// =>}"

8. Удаление повторяющихся элементов из массива

Используя ES2015 Sets вместе с оператором Spread, вы можете легко удалить повторяющиеся элементы из массива:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);//=> [42, "foo", true]

9. Возведение многомерных массивов

Возведение массивов является тривиальным с помощью оператора Spread:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

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

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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *