9 полезных приёмов для тех, кто программирует на JavaScript

Original author: Alcides Queiroz
  • Translation
Автор материала, перевод которого мы сегодня публикуем, рассказывает о девяти полезных приёмах работы, которые могут пригодиться JavaScript-программисту. Он говорит о том, что эти приёмы позволяют экономить время, и о том, что ими пользуются профессионалы.



1. Очистка или усечение массива


Для того чтобы очистить массив или уменьшить его длину, можно изменить его свойство length. При этом, например, нет необходимости в том, чтобы, для очистки массива, записывать в переменную, хранящую ссылку на него, ссылку на новый массив.

const arr = [11, 22, 33, 44, 55, 66];
// усечение массива
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// очистка массива
arr.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


Вот простой приём, демонстрирующий использование диапазонов значений в операторе 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


Благодаря следующему приёму, в котором используется Promise.all, можно организовать ожидание выполнения нескольких асинхронных функций:

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

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


При необходимости можно создать абсолютно пустой, чистый объект, который не наследует никаких свойств и методов от 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

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


Метод 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"
// =>        }
// =>    }
// =>}"

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


Использование объекта типа Set из ES2015 с оператором расширения позволяет легко и удобно удалять из массивов дублирующиеся элементы:

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

9. Линеаризация многомерных массивов


Линеаризация массивов с использованием оператора расширения — это предельно простая задача:

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 и сэкономить немного времени.

Уважаемые читатели! Знаете какие-нибудь неочевидные вещи, которые могут пригодиться JS-разработчикам? Если так — просим о них рассказать.

RUVDS.com
1,490.42
RUVDS – хостинг VDS/VPS серверов
Share post

Comments 20

    0
    > 2. Имитация именованных параметров при деструктурировании объекта
    Это уже перебор.

    // Pure
    options = Object.assign({}, default_options, options);
    // jQuery
    options = $.extend(true, {}, default_options, options);
    
      0
      Просто неудачный пример. На практике обычно нужно задать дефолтные значение паре критичных параметров, и не трогать остальные. Причём, очень часто, диапазон ожидаемых значений позволяет использовать операцию ||.
      0

      Исходя из поста, знание основ любого языка — признак профессионализма.


      1. Очистка или усечение массива

      А за такое можно сразу гнать из профессии. Мало того, что это, мягко скажем, необычное применение для length, это, предполагаю, может подгадить в плане оптимизации кода JS движком. Не говоря уж о том, что JS не требует ручного управления памятью.


      4. Использование диапазонов значений в операторе switch

      А почему нельзя было через if/else?

        0
        А почему нельзя было через if/else?


        На ум только такой сценарий приходит. Вообще для меня этот пункт единственной новостью был…
        switch () {
          case (something < 10):
            ...
          case (something < 20):
            ...
            break;
          ...
        }
        
          +1

          Не новость, а хак. Обычный свитч же.

          0
          Как же необычное? Вполне себе рутинное использование length, это один из лучших способов очистить массив, не создавая новых объектов. Это, кстати, один из популярных вопросов на собеседованиях.

          Про усечение массива — вот тут я согласен, что необычно, не уверен, что спецификация однозначно предписывает усекать массив справа.
            0
            не уверен, что спецификация однозначно предписывает усекать массив справа.
            А с какой стороны его ещё усекать, чтобы нумерация оставшихся элементов сохранялась?
            Array.length:
            You can set the length property to truncate an array at any time.
              0
              правда, логично
            0
            Упралвение длинной массива через установку length прописано в спецификации. Все законно и на мой (испорченый) вкус — красиво: )
              0

              Заметьте, я и не говорил про спецификацию, я сказал про JS движки (V8 / Spider Monkey / etc.) и их оптимизацию такого поведения, что я не уверен, что подобное использование length не деоптимизирует байт код.


              Касаемо спеки, да, данное поведение в ней явно прописано.

            –1
            5. Организация ожидания выполнения нескольких асинхронных функций в конструкции async/await

            Promise.all(iterable) в случае исключения в каком-либо одном из переданных обещаний отклонится сразу, при этом не будет остановлено выполнение других обещаний. Это обстоятельство не делает код
            await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
            

            аналогичным коду
            await anAsyncCall();
            await thisIsAlsoAsync();
            await oneMore();
            

            т.к. во втором случае, если из какого-то метода (допустим thisIsAlsoAsync) вылетит ошибка, то можно гарантированно утверждать, что другие методы из цепочки не выполняются (anAsyncCall уже выполнился, oneMore — не будет вызван)
              +1
              Это обстоятельство не делает код
              await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])


              аналогичным коду
              await anAsyncCall();
              await thisIsAlsoAsync();
              await oneMore();


              А разве, кто-то утверждал, что делает?
                –1
                Да, я не правильно выразил мысль.
                Имел так же в виду, что такая конструкция не ожидает выполнения всех трех функций, в случае, если одна из них выбросила ошибку.
                  0
                  Однако, второй вариант ждёт пока завершится предыдущий промис, прежде чем вызвать следующий метод, даже если в этом нет необходимости.
                  Я к тому, что у этих двух вариантов кода — разная область применения.
              –2
              1. Припоминаю, что у меня был практический случай, заставляющий относиться к такому приёму с недоверием. Не помню уже детали, то ли это был массив объектов, который криво обрезался, то ли что…
              3. Я ведь правильно понимаю, что это работает только при инициализации переменной, а значит — не всегда дружит с let?
              4. Вот это для меня новость, хоть и не могу с ходу придумать вменяемый случай, где это уместно.
              7. Интересно, есть ли хоть один человек, который работал с JSON.stringify и не знает этой возможности?..

              В общем, статья, конечно, интересная, и мне, как разработчику, прямо скажем, не слишком ещё пока высокого уровня, даже полезная, но — именно с поправкой на уровень. Так-то конечно, спасибо, и автору, и переводчику.
                –2
                1. У Мутулз так реализована очистка массива. Сомневаюсь, что они бы использовали этот трюк, если бы он имел какое-то неожиданное поведение
                3. Почему нет? Какие проблемы вы ожидаете?
                4. Да потому что таких случаев и нет. Тот же if всегда будет значительно более читаемым:
                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;
                }
                
                /////////// vs ///////////
                
                function getWaterState (tempInCelsius) {
                  if (tempInCelsius <= 0) {
                    return 'Solid';
                  }
                  if (tempInCelsius < 100) {
                    return 'Liquid';
                  }
                  return 'Gas';
                }


                7. Ага. Я узнал буквально пару недель назад
                  –1
                  3. Банально: ситуации, когда присваивание переменной должно происходить в блоке (try, например), а чтение — после него (допустим, что в catch мы всегда выходим из функции, соответственно, после try/catch значение в переменную записано успешно). Примерно так:
                  function () {
                    let variable
                    try {
                       variable = someFunc()
                    } catch(e) {
                      throw new Error('someFunc errored: ' + e.message)
                    }
                    return someLongProcedure(variable)
                  }
                  
                  В этом случае, если переместить let variable внутрь блока try, переменная будет недоступна для someLongProcedure.

                  4. Конкретно в Вашем примере есть одно возражение — общая vs множественная точка выхода. Неоднократно встречал утверждение, что второе — антипаттерн, поскольку усложняет, к примеру, добавление операций перед выходом (скажем, если требуется логировать возвращаемое значение). Хотя с общим посылом, пожалуй, согласен.
                +1
                Благодаря следующему приёму, в котором используется Promise.all, можно организовать ожидание выполнения нескольких асинхронных функций

                Ну совершенно не очевидный приём. Кто бы мог подумать, что Promise.all может быть использован для такого?
                  +1

                  Параметры по умолчанию — это паттерн. Вот это язык, шёл 2018 год

                    0
                    Я, конечно, не сторонник ярких высказываний «за такое гнать из профессии», но в корпоративном чатике джунам порекомендовал эту статью как «прочитайте, и запомните, за что я могу вас побить».
                    По факту, почти все эти «лайфхаки» не требуют костылирования и велосипедирования при подключении одной из популярных библиотек вроде LoDash или (для консерватистов вроде меня) Underscore. Много их. И делают они всё вышеописанное явно, и джуны потом не будут хвататься за голову «я такой тупой, я не понимаю что тут написано!!!».

                    Я, разумеется, рад, что вы знаете всякие там тонкости работы языка, щёлкаете вопросы с подвохом как семечки и всё такое… Но пусть лучше это останется «академическими» знаниями, которые просто позволяют смотреть на язык, как на родную лужайку, а не как на черный ящик. Применять их я однозначно не рекомендую.

                    Only users with full accounts can post comments. Log in, please.