일상적인 JavaScript 개발을 위한 9가지 유용한 코드 스니펫 || 2 부

여러분, 안녕하세요

이 JS 코드 스니펫 시리즈에 오신 것을 환영합니다. 이 게시물의 첫 번째 부분에 대한 모든 사랑에 감사드립니다.

일상적인 JavaScript 개발에 사용할 수 있는 4개의 JS 코드 스니펫이 포함된 두 번째 게시물입니다.

처음 5개의 코드 스니펫을 읽으십시오.

6. 데이터를 개체로 형성합니다.

이 스니펫은 양식 데이터를 페이로드로 직접 사용할 수 있는 객체로 변환하여 삶을 훨씬 쉽게 만들어줍니다.

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

formToObject(document.querySelector('#form'));
// { email: '[email protected]', name: 'Test Name' }

먼저 FormData 생성자를 사용하여 HTML 양식을 FormData로 변환합니다.

Array.from을 사용하여 FormData를 배열로 변환합니다.

Array.prototype.reduce를 사용하여 배열에서 원하는 객체를 얻습니다.

7. 브라우저에서 UUID 생성

목록의 모든 항목에 대해 고유한 ID/키가 필요하다고 가정해 보겠습니다. 이 스니펫을 사용하면 브라우저에서 바로 고유 ID/키를 생성할 수 있습니다.

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(16진수 문자열)로 변환합니다.

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로

데이터 배열이 있고 Excel 또는 Google 시트에서 열 수 있도록 CSV로 변환하려고 합니다.

글쎄, 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"'

배열 맵 방법은 배열의 각 수준을 반복하고 정의된 구분 기호로 각 값을 결합하는 데 사용됩니다.

그래서 이번 포스팅은 여기까지입니다. 어쨌든 이 게시물이 마음에 든다면 지원을 보여주세요.

저는 또한 주간 뉴스레터를 운영하고 있으므로 여기에서도 저와 함께 할 수 있습니다: https://www.getrevue.co/profile/8020lessons

감사합니다!