Всем привет

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

Это второй пост с 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' }
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • Сначала используйте Данные формы конструктор для преобразования HTML-формы в FormData.
  • Преобразование FormData в массив с помощью Массив.от.
  • Использовать 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.
  • Использовать Число.прототип.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 метод.
  • Если строка в недопустимом формате JSON, блок catch вернет false, иначе — true.


9. Массив в CSV




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

Что ж, 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"'
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • Метод карты массива используется для перебора каждого уровня массива и объединения каждого значения с определенным разделителем.

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

Я также веду еженедельный информационный бюллетень, так что вы тоже можете присоединиться ко мне:

Спасибо!