9 полезных фрагментов кода для повседневной разработки на JavaScript || Часть 2

Привет всем

Добро пожаловать в эту серию статей о сниппетах кода JS. Большое спасибо за любовь к первой части этого поста.

Это второй пост с 4 сниппетами JS кода, которые вы можете использовать в повседневной разработке JavaScript.

Первые 5 фрагментов кода читайте здесь.

6. Данные формы в объект.

Этот сниппет значительно облегчит вам жизнь, преобразуя данные формы в объект, который вы можете напрямую использовать в качестве полезной нагрузки.

const formToObject = form =>
  Array.from(new FormData(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  );

formToObject(document.querySelector('#form'));
// { email: 'test@email.com', name: 'Test Name' }
Вход в полноэкранный режим Выход из полноэкранного режима
  • Сначала используйте конструктор FormData для преобразования HTML-формы в FormData.
  • Преобразуйте FormData в массив с помощью Array.from.
  • Используйте Array.prototype.reduce для получения нужного объекта из массива.

7. Генерация UUID в браузере

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

const UUIDGeneratorBrowser = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );

UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Используйте Crypto.getRandomValues() для генерации UUID.
  • Используйте Number.prototype.toString() для преобразования его в правильный UUID (шестнадцатеричную строку).

8. Проверьте, является ли строка правильным JSON.

Если вы когда-либо обращались к объекту из localStorage, вы знаете, что получаете строковую версию этого объекта.

И теперь вы хотите проверить, является ли этот строкализованный объект правильным JSON или нет.

Приведенный ниже фрагмент поможет вам в этом.

const isValidJSON = (str) => {
  try {
    JSON.parse(str);
    return true;
  } catch (err) {
    return false;
  }
};

// Example
isValidJSON('{"name":"John","age":30}');
// true
isValidJSON('{name:"John",age:30}');
// false
Вход в полноэкранный режим Выход из полноэкранного режима
  • В блоке try мы анализируем строку с помощью метода JSON Parse.
  • Если строка в недействительном JSON, блок catch вернет false, в противном случае true.

9. Массив в CSV

У вас есть массив данных, и вы хотите преобразовать его в CSV, чтобы можно было открыть его в excel или google sheet.

Vanilla JS может сделать это и для вас.

const arrayToCSV = (arr, delimiter = ",") =>
  arr.map((row) => row.map((value) => `"${value}"`).join(delimiter)).join("n");

// Example
arrayToCSV([
  ["one", "two"],
  ["three", "four"],
]);
// '"one","two"n"three","four"'
Вход в полноэкранный режим Выход из полноэкранного режима
  • Метод Array map используется для перебора каждого уровня массива и объединения каждого значения с определенным разделителем.

Итак, на этом мы закончили. Если вам понравился этот пост, обязательно поддержите меня.

Я также веду еженедельную рассылку, так что вы можете присоединиться ко мне и там: https://www.getrevue.co/profile/8020lessons.

Спасибо!

Оцените статью
devanswers.ru
Добавить комментарий