코드 줄을 대체하는 avaScript 원라이너

우리 모두는 더 나은 방법이 있어야 한다는 것을 잘 알고 있으면서도 우리 내부에서 조용히 저주를 퍼붓는 JavaScript 코드의 무시무시한 벽을 본 적이 있습니다.

시간을 들여 학습한 후 여러 줄의 장황한 코드를 없애줄 깔끔한 한 줄의 코드를 발견했습니다.

이것은 일반적인 문제를 해결하기 위해 최신 JavaScript 기능을 활용하는 정말 유용하고 읽기 쉬운 팁입니다.

따라서 코드를 정리하든 새로운 프로젝트를 시작하든 이러한 방법은 코드를 더욱 우아하고 유지 관리하기 쉽게 만드는 데 도움이 될 수 있습니다.

오늘 사용할 수 있는 멋진 한 줄짜리 9가지 내용은 다음과 같습니다.

중첩 배열 평면화

너무 깊은 배열을 평면화해 본 적이 있나요? 예전에는 이는 수많은 복잡한 다중 루프, 임시 배열 및 너무 많은 코드를 의미했습니다.

그러나 이제는 강력한 단일 라이너로 매우 훌륭하게 실행됩니다.

const flattenArray = arr => arr.flat(Infinity);

const nestedArray = [1, [2, 3, [4, 5, [6, 7]]], 8, [9, 10]];
const cleanArray = flattenArray(nestedArray);
// Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

이 작업을 좀 더 전통적인 방식으로 수행한다면 다음과 같을 것입니다.

function flattenTheHardWay(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenTheHardWay(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

모든 어려운 작업은 flat()에 의해 처리되며 Infinity를 추가하면 가능한 모든 수준으로 내려갈 수 있습니다. 간단하고 깔끔하며 작동합니다.

개체 변환: 종속성 없는 심층 복제

lodash를 가져오지 않고 객체의 진정한 딥 클론이 필요하다면? 중첩된 객체, 배열, 심지어 날짜까지 처리하는 종속성 없는 솔루션은 다음과 같습니다.

const deepClone = obj => JSON.parse(JSON.stringify(obj));

const complexObj = {
  user: { name: 'Alex', date: new Date() },
  scores: [1, 2, [3, 4]],
  active: true
};

const cloned = deepClone(complexObj);

옛날 방식? 다음과 같이 입력해야 합니다.

function manualDeepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);

  const clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = manualDeepClone(obj[key]);
    }
  }
  return clone;
}

빠른 알림: 이 단일 라이너에는 몇 가지 제한 사항이 있습니다. 즉, 함수, 기호 또는 순환 참조를 처리하지 않습니다. 그러나 사용 사례의 90%에서는 거의 정확합니다.

문자열 처리: CSV를 객체 배열로 변환

이것은 API 응답이나 데이터 읽기에 이상적으로 사용하기 위해 CSV 데이터를 가져와 조작 가능한 개체 배열을 생성하는 멋진 작은 한 줄입니다.

const csvToObjects = csv => csv.split('\n').map(row => Object.fromEntries(row.split(',').map((value, i, arr) => [arr[0].split(',')[i], value])));

const csvData = `name,age,city
Peboy,30,New York
Peace,25,San Francisco
Lara,35,Chicago`;

const parsed = csvToObjects(csvData);
// Result:
// [
//   { name: 'Peboy', age: '30', city: 'New York' },
//   { name: 'Peace', age: '25', city: 'San Francisco' },
//   { name: 'Lara', age: '35', city: 'Chicago' }
// ]

구식? 아, 아마 다음과 같은 글을 쓰실 겁니다:

function convertCSVTheHardWay(csv) {
  const lines = csv.split('\n');
  const headers = lines[0].split(',');
  const result = [];

  for (let i = 1; i < lines.length; i++) {
    const obj = {};
    const currentLine = lines[i].split(',');

    for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = currentLine[j];
    }
    result.push(obj);
  }
  return result;
}

한 줄로 데이터 변환을 수행하는 효과적인 방법이지만 프로덕션에 투입하기 전에 오류 처리를 추가하세요.

배열 작업: 중복 제거 및 정렬

다음은 중복 항목을 제거하고 동시에 배열을 정렬하는 단축된 한 줄로, 데이터 세트 정리에 적합합니다.

const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b);

// Example of its use:
const messyArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const cleaned = uniqueSorted(messyArray);
// Result: [1, 2, 3, 4, 5, 6, 9]

// For string sorting

const messyStrings = ['banana', 'apple', 'apple', 'cherry', 'banana'];
const cleanedStrings = [...new Set(messyStrings)].sort();
// Result: ['apple', 'banana', 'cherry']

이전 방식은 다음과 같습니다.

function cleanArrayManually(arr) {
  const unique = [];
  for (let i = 0; i < arr.length; i++) {
    if (unique.indexOf(arr[i]) === -1) {
      unique.push(arr[i]);
    }
  }
  return unique.sort((a, b) => a - b);
}

Set은 중복 항목을 완벽하게 처리한 다음 스프레드 연산자를 통해 이를 다시 배열로 변환합니다. 그런 다음 sort()를 호출하면 됩니다!

DOM 조작: 여러 요소 쿼리 및 변환

여러 DOM 요소를 한 번에 쿼리하고 변환할 수 있는 강력한 단일 라이너는 다음과 같습니다.

const flattenArray = arr => arr.flat(Infinity);

const nestedArray = [1, [2, 3, [4, 5, [6, 7]]], 8, [9, 10]];
const cleanArray = flattenArray(nestedArray);
// Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

전통적인 접근 방식은 다음과 같습니다.

function flattenTheHardWay(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenTheHardWay(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

이 기능은 모든 최신 브라우저에서 작동하며 반복적인 DOM 조작 코드를 작성하지 않아도 됩니다.

깔끔한 오류 처리 기능을 갖춘 병렬 API 호출

이것은 API에 대한 병렬 호출을 수행하고 매우 깔끔한 오류 처리를 수행하는 또 하나의 깔끔한 라인입니다.

const deepClone = obj => JSON.parse(JSON.stringify(obj));

const complexObj = {
  user: { name: 'Alex', date: new Date() },
  scores: [1, 2, [3, 4]],
  active: true
};

const cloned = deepClone(complexObj);

더 자세한 내용은 다음과 같습니다.

function manualDeepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);

  const clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = manualDeepClone(obj[key]);
    }
  }
  return clone;
}

Promise.allSettled가 여기의 영웅입니다. 하나의 요청이 실패하더라도 실패하지 않으며 각 호출에 대한 깨끗한 상태 정보를 다시 제공합니다.

날짜/시간 형식 지정: 라이브러리 없이 날짜 문자열 정리

외부 종속성 없이 날짜를 깨끗하고 읽기 쉬운 문자열로 바꾸는 멋진 한 줄은 다음과 같습니다.

const csvToObjects = csv => csv.split('\n').map(row => Object.fromEntries(row.split(',').map((value, i, arr) => [arr[0].split(',')[i], value])));

const csvData = `name,age,city
Peboy,30,New York
Peace,25,San Francisco
Lara,35,Chicago`;

const parsed = csvToObjects(csvData);
// Result:
// [
//   { name: 'Peboy', age: '30', city: 'New York' },
//   { name: 'Peace', age: '25', city: 'San Francisco' },
//   { name: 'Lara', age: '35', city: 'Chicago' }
// ]

기존 방식은 다음과 같습니다.

function convertCSVTheHardWay(csv) {
  const lines = csv.split('\n');
  const headers = lines[0].split(',');
  const result = [];

  for (let i = 1; i < lines.length; i++) {
    const obj = {};
    const currentLine = lines[i].split(',');

    for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = currentLine[j];
    }
    result.push(obj);
  }
  return result;
}

Intl.DateTimeFormat은 현지화를 포함한 모든 어려운 작업을 처리합니다. 더 이상 수동으로 날짜 문자열을 작성하지 마세요!

이벤트 처리: 부풀림 없이 디바운스

다음은 모든 함수의 디바운스 버전을 생성하는 깔끔한 단일 라이너입니다. 검색 입력 또는 창 크기 조정 핸들러에 적합합니다.

const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b);

// Example of its use:
const messyArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const cleaned = uniqueSorted(messyArray);
// Result: [1, 2, 3, 4, 5, 6, 9]

// For string sorting

const messyStrings = ['banana', 'apple', 'apple', 'cherry', 'banana'];
const cleanedStrings = [...new Set(messyStrings)].sort();
// Result: ['apple', 'banana', 'cherry']

기존 방식은 다음과 같습니다.

function cleanArrayManually(arr) {
  const unique = [];
  for (let i = 0; i < arr.length; i++) {
    if (unique.indexOf(arr[i]) === -1) {
      unique.push(arr[i]);
    }
  }
  return unique.sort((a, b) => a - b);
}

이 한 줄은 모든 기본 디바운싱 사용 사례를 다루고 특히 입력이나 크기 조정과 같이 입력이 빠르게 연속적으로 생성되는 경우 불필요하게 함수를 호출하지 않도록 해줍니다.

로컬 스토리지: 검증이 포함된 개체 스토리지

다음은 내장된 유효성 검사 및 오류 처리 기능을 통해 localStorage의 개체 저장소를 처리하는 또 다른 깔끔한 단일 라이너입니다.

const modifyElements = selector => Array.from(document.querySelectorAll(selector)).forEach(el => el.style);

// Use it like this:
const updateButtons = modifyElements('.btn')
  .map(style => Object.assign(style, {
    backgroundColor: '#007bff',
    color: 'white',
    padding: '10px 20px'
}));

// Or even simpler for class updates:
const toggleAll = selector => document.querySelectorAll(selector).forEach(el => el.classList.toggle('active'));

기존 방식에는 다음과 같은 것이 필요합니다.

function updateElementsManually(selector) {
  const elements = document.querySelectorAll(selector);
  for (let i = 0; i < elements.length; i++) {
    const el = elements[i];
    el.style.backgroundColor = '#007bff';
    el.style.color = 'white';
    el.style.padding = '10px 20px';
  }
}

래퍼는 localStorage 작업을 위한 깔끔한 API를 제공하고 모든 JSON 구문 분석/문자열화를 자동으로 처리합니다.

마무리

이러한 한 줄짜리 설명은 단순히 코드를 적게 작성하는 것이 아니라 더 스마트하게 코드를 작성하는 것입니다. 각각은 깔끔하고 유지 관리가 가능한 방식으로 일반적인 JavaScript 문제를 해결합니다. 이러한 스니펫은 강력하지만 가독성이 항상 최우선이라는 점을 기억하세요. 한 줄로 코드를 이해하기 어렵게 만드는 경우 코드를 여러 줄로 나누세요.

프로젝트에서 이러한 패턴을 자유롭게 혼합하고 일치시키세요. 이전 브라우저를 지원하는 경우 flat() 또는 Intl.DateTimeFormat과 같은 최신 JavaScript 기능에 대한 브라우저 호환성을 확인하는 것을 잊지 마세요.

자신만의 강력한 JavaScript 단일 라이너가 있습니까? 나는 그들을 보고 싶습니다!

웹 개발에 대한 더 많은 JavaScript 팁, 요령 및 토론을 보려면 X에서 저를 팔로우하세요. 저는 개발자 생활을 더 쉽게 만들어주는 코드 조각과 모범 사례를 정기적으로 공유합니다.

호기심을 갖고 계속 코딩하고 기억하세요. 좋은 코드는 작성 횟수가 아니라 의도를 얼마나 명확하게 표현하는지에 달려 있습니다.

위 내용은 코드 줄을 대체하는 avaScript 원라이너의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!