7가지 필수 자바스크립트 최적화 기술, CodeGeeX 5초면 끝!

JavaScript는 현재 가장 널리 사용되는 프로그래밍 언어입니다. 이 문서에서는 개발자가 더 나은 코드를 작성하는 데 도움이 되는 몇 가지 JavaScript 최적화 팁을 제공합니다. 이 코드 세그먼트를 작성한 후, 나는 이 모든 코드 세그먼트가 공통적인 용도로 인해 AI 지원 프로그래밍 도구 CodeGeeX를 사용한 자동 생성에 매우 적합하다는 것을 갑자기 깨달았습니다.

다운로드 및 사용 - VSCode 및 JetBrains IDE에서 무료로 직접 다운로드하여 사용할 수 있는 CodeGeeX 플러그인입니다. CodeGeeX 플러그인은 코드 생성을 자동으로 실현하고 코드에 한 줄씩 주석을 추가할 수 있으며 다른 프로그래밍 언어 간에 코드 번역을 수행할 수도 있습니다. 특히 칭찬할 만한 기능인 " Ask CodeGeeX "는 chatGPT와 유사한 지능형 질문 및 답변 기능을 개발자 프로그래밍 환경 IDE와 깊이 통합합니다. 개발자는 IDE에서 질의응답 대화를 통해 기술적 문제를 해결할 수 있습니다.

IDE에서 Ask CodeGeeX 기능을 사용하면 코드 문제에 대한 답을 찾기 위해 개발 환경을 벗어나지 않고 개발 과정에서 발생하는 문제를 IDE에서 몰입적으로 해결할 수 있으므로 코드 개발의 효율성이 향상됩니다. 동시에 이 새로운 버전에서는 대화 상자 영역의 "코드 설명/설명", "코멘트/코멘트 생성", "버그 수정/버그 확인" 공통 명령의 바로 가기를 통해 코드를 직접 조작할 수 있습니다. 코드 설명, 줄 단위 추가 코드 주석, 코드 스니펫 및 기타 기능의 잠재적인 버그 수정을 시도합니다.

"explain/explain code" 버튼을 누르면 전체 코드에 대한 설명을 볼 수 있습니다.

코드를 작성할 때 생성된 코드의 특정 부분이 어떻게 해석되는지 알고 싶습니까? 그러면 CodeGeeX 플러그인의 코드 생성 영역 에서 코드를 선택하면 왼쪽 사이드바의 대화 영역에 플로팅 레이어가 나타나며 선택한 코드가 동시에 표시됩니다. 대화 상자 영역에서 "코드 설명" 바로가기 버튼을 누르면 대화 상자 인터페이스에서 전체 코드 설명에 응답할 수 있습니다.

"주석/주석 생성" 버튼은 코드에 한 줄씩 주석을 추가합니다.

마찬가지로 생성된 코드 조각에 한 줄씩 주석을 추가하려는 경우 CodeGeeX 코드 생성 영역에서 코드를 선택하면 사이드바의 대화 상자 영역에 플로팅 레이어가 나타나고 선택한 코드가 동시에 표시됩니다. 대화 영역에서 "주석 생성" 바로가기 버튼을 통해 대화 인터페이스에서 한 줄씩 이 코드에 주석을 직접 추가할 수 있습니다.

코드의 잠재적인 버그를 수정하기 위한 "fixbug/check bug"

코드 작성 중 오류가 발생했을 때 CodeGeeX 플러그인의 코드 생성 영역 에서 코드를 선택하면 왼쪽 사이드바의 대화 영역에 부동 레이어가 나타나 선택한 코드를 동시에 표시합니다. 단축 버튼: 대화 상자 영역의 "버그 확인"을 통해 코드 편집 영역은 이 코드에서 문제를 찾고 오류를 수정하고 코드가 수정된 영역을 강조 표시하여 코드 비교에 편리합니다.

폴백 값: 폴백 값

// Lengthy
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// Shortly
const name = user?.name ?? "Anonymous";

이 코드 스니펫은 CodeGeeX 플러그인 도구를 사용하여 코드 컨텍스트에서 자동으로 생성될 수 있습니다.

Shortly For Switching 일반적으로 긴 스위치는 개체를 사용하여 최대화합니다. 여기서 Key는 스위치이고 Value는 반환 값입니다.

const dayNumber = new Date().getDay();

// Lengthy
let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

// Shortly
const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];

// Or
const days = `Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday`.split(
    ","
);

const day = days[dateNumber];

이 코드 스니펫은 CodeGeeX 플러그인 도구를 사용하여 코드 컨텍스트에서 자동으로 생성될 수 있습니다.

함수 호출

함수 호출

// Lengthy
function f1() {
  // ...
}
function f2() {
  // ...
}

// Shorter
condition ? f1() : f2();

이 코드 스니펫은 CodeGeeX 플러그인 도구를 사용하여 코드 컨텍스트에서 자동으로 생성될 수 있습니다.

여러 문자열 검사

문자열이 여러 값 중 하나와 같은지 확인해야 하는 경우가 많습니다. 어렵지는 않지만 지루합니다. 이 코드를 생성하기 위해 CodeGeeX 에 넘겨줄 수 있습니다 .

// Lenghty
const isVowel = (letter) => {
  return (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  );
};

// Shortly
const isVowel = letter => /[aeiou]/i.test(letter);

For-of 및 For-in 루프는 개체 키의 인덱스를 수동으로 추적하지 않고 배열 또는 개체를 반복하는 데 적합합니다.

For-of

const arr = [1, 2, 3, 4, 5];

// Lengthy
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  // ...
}

// Shortly
for (const element of arr) {
  // ...
}

포인

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// Lengthy
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  // ...
}

// Shortly
for (const key in obj) {
  const value = obj[key];
  // ...
}

이 코드 스니펫은 CodeGeeX 플러그인 도구를 사용하여 코드 컨텍스트에서 자동으로 생성될 수 있습니다.

허위 확인

변수가 비어 있는지, 정의되지 않았는지, 0, false 또는 빈 문자열인지 확인하려면 논리 NOT을 사용하여 작업을 수행할 수 있습니다. 변수에 유효한 데이터가 포함되어 있는지 쉽게 확인할 수 있습니다.

// Lengthy
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};

// Shortly
const isFalsey = (value) => !value;

이 코드 스니펫은 CodeGeeX 플러그인 도구를 사용하여 코드 컨텍스트에서 자동으로 생성될 수 있습니다.

보조 연산자

JavaScript 개발은 삼항 연산자를 만났을 것입니다. 이것은 if-else 문의 간결한 버전을 작성하는 좋은 방법입니다. 이를 사용하여 간결한 코드를 작성하고 여러 조건을 확인하기 위해 연결할 수도 있습니다.

// Lengthy
let info;

if (value < minValue) {
  info = "Value is too small";
} else if (value > maxValue) {
  info = "Value is too large";
} else {
  info = "Value is in range";
}

// Shortly
const info =
  value < minValue
    ? "Value is too small"
    : value > maxValue ? "Value is too large" : "Value is in range";

이 기사는 블로깅을 위한 다중 게시물 플랫폼 인 OpenWrite 에서 게시합니다 !