ES6 기본 매개 변수 및 속성 속성이있는 클린 코드

코어 포인트

es6 기본 매개 변수는 함수에 대해 기본값을 초기화 할 수 있으며 매개 변수가 생략되거나 정의되지 않은 경우 사용됩니다. 이 기능은 코드를 단순화하고 IF 문 및 기타 점검의 필요성을 줄이기 때문에 더 간결하고 읽기 쉽습니다.

ES6 속성 약어는 특히 큰 구성 객체를 처리 할 때 코드를보다 간결하고 쉽게 읽을 수있는 방법을 제공합니다. 완전한 속성 할당을 작성하지 않으면 약어를 사용하여 변수와 동일한 이름의 속성에 값을 할당 할 수 있습니다.

ES6의 기본 매개 변수 및 속성 약어는 방법을보다 순서대로, 경우에 따라 더 짧게 만들 수 있습니다. 개발자가 많은 기본 준비에 의해 산만 해지지 않고이 방법의 실제 사용에 더 집중할 수 있도록 도와줍니다.
• 속성 약어는 외관 기능이지만 변수 작성, 개체 구성 및 기능 키워드를 작성하여 생산성을 높일 수 있습니다. 또한 클리너 코드를 얻기 위해 객체 내의 사용법 정의에 적용될 수 있습니다.
• 방법 생성은 또한 자신을 위해, 팀의 다른 개발자 또는 프로젝트를 사용하는 다른 개발자를 위해 API를 작성하는 것을 의미합니다. 함수의 크기, 복잡성 및 목적에 따라 기본 설정 및 입력/출력 API를 고려해야합니다. 기본 함수 매개 변수 및 속성 약어는 API를 작성하는 데 도움이되는 ES6의 두 가지 편리한 기능입니다.
ES6 기본 매개 변수
• 지식을 신속하게 검토 한 다음 문법을 살펴 보겠습니다. 기본 매개 변수를 사용하면 함수의 기본값을 초기화 할 수 있습니다. 매개 변수가 생략되거나 정의되지 않은 경우 기본값을 사용하십시오. 이는 NULL이 유효한 값임을 의미합니다. 기본 인수는 숫자에서 다른 함수에 이르기까지 무엇이든 할 수 있습니다.
• 실용적인 예 기본 기능을 살펴보고 기본 매개 변수가 개발 속도를 높이고 코드를 더 잘 구성 할 수있는 방법을 보여 주겠습니다. 이 예제 메소드는 createElement ()라고합니다. 일부 구성 매개 변수를 허용하고 HTML 요소를 반환합니다. API는 다음과 같이 보입니다
이 방법의 구현에는 많은 논리가 없지만 기본 범위로 인해 상당히 커질 수 있습니다.

지금까지 모든 것이 잘되었습니다. 여기서 무슨 일이야? 우리는 다음을 수행하고 있습니다 :

가 전달되지 않은 경우 매개 변수 태그 및 구성에 대한 기본값 설정 ( 일부 코드 검사관은 매개 변수 재 할당 )을 좋아하지 않습니다. 실제 컨텐츠 (및 기본값)를 사용하여 상수를 만듭니다 클래스 이름이 정의되었는지 확인하고 그렇지 않은 경우 기본 배열 를 지정하십시오. 요소를 반환하기 전에 요소를 생성하고 수정하십시오

이제이 기능을 사용하여 최적화하여 더 간단하고, 글을 더 빠르게 작성하고, 그 목적을보다 명확하게 보여주기 위해 최적화합시다.

// 基本语法
function multiply(a, b = 2) {
  return a * b;
}
multiply(5); // 10

// 默认参数也适用于后面的默认参数
function foo(num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]

함수의 논리를 터치하는 대신 기능 본문에서 모든 기본 처리를 삭제했습니다. 기능 서명에는 이제 모든 기본값이 포함되어 있습니다. 조금 더 혼란 스러울 수 있습니다 :

우리는 기본 객체 매개 변수를 선언 할뿐만 아니라 기본 객체 속성

// 我们想要一个 <p> 元素，带有一些文本内容和两个附加的类。
// 返回 <p>Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// 为了使此方法更有用，它应该在任何参数被省略或根本没有传递参数时始终返回默认元素。
createElement(); // <div>Very default</div>

도 선언합니다. 이렇게하면 기본 객체 (예 : config = {})를 선언 한 다음 나중에 기본 속성을 설정하는 것보다 기본 구성이 더 명확 해 보입니다. 익숙해지는 데 약간의 시간이 걸릴 수 있지만 궁극적으로 워크 플로를 향상시킵니다. 물론 더 큰 구성의 경우 여전히 더 많은 오버 헤드를 생성 할 수 있다고 주장 할 수 있으며 기능 본문에서 기본 처리를 유지하는 것이 더 쉬울 것입니다.

<🎜 🎜> <<> ES6 속성 약어 <🎜 🎜> 메소드가 큰 구성 객체를 매개 변수로 받아들이면 코드가 상당히 커질 수 있습니다. 일반적인 관행은 일부 변수를 준비하고 객체에 추가하는 것입니다. 속성 약어는 구문 설탕

로서이 단계를 더 짧고 읽기 쉽게 만들 수 있습니다.

api 를 단순화하십시오 <'s> 좋아, 또 다른 일반적인 예로 돌아가 봅시다. 다음 함수는 일부 데이터를 가져와 수정하고 다른 방법을 호출합니다.

우리는 종종 변수 이름과 객체 속성 이름을 동일하게 지정합니다. 분해와 결합 된 속성 약어를 사용하여 실제로 코드를 많이 단축 할 수 있습니다.

다시, 이것은 익숙해지는 데 시간이 걸릴 수 있습니다. 궁극적으로 JavaScript의 새로운 기능 중 하나이며 코드를 더 빨리 작성하고 깨끗한 기능을 사용하는 데 도움이됩니다. 그러나 잠깐, 더 많은 것이 있습니다! 속성 약어는 객체 내의 사용 정의에도 적용될 수 있습니다. <🎜 🎜> <<> 결론

기본 매개 변수 및 속성 약어는 방법을보다 구성하고 경우에 따라 짧게 만드는 좋은 방법입니다. 전반적으로, 기본 함수 매개 변수는 많은 기본 준비에 의해 산만 해지지 않고 방법의 실제 사용에 더 집중하는 데 도움이되었습니다. 속성 약어는 실제로 외관 기능이지만 생산성이 높고 모든 변수, 구성 객체 및 기능 키워드를 작성하는 데 더 적은 시간을 소비합니다. 이미 기본 매개 변수와 속성 약어를 사용하고 있습니까? 이 기사는 Sebastian Seitz가 동료 검토했습니다. itepoint 컨텐츠를 완벽하게 만드는 모든 Sitepoint Peer Reviewer에게 감사드립니다!

// 没有默认参数，它看起来相当臃肿且不必要地庞大。
function createElement(tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}

ES6 기본 매개 변수에 대한 FAQ (FAQ)

ES6 기본 매개 변수를 사용하는 장점은 무엇입니까?

ES6 기본 매개 변수는 여러 장점을 제공합니다. 먼저 코드를보다 간결하고 읽기 쉽게 만드는 데 도움이됩니다. 매개 변수가 정의되지 않은지 확인한 다음 기본값을 할당하지 않으면 한 줄로 모든 것을 수행 할 수 있습니다. 이렇게하면 작성해야 할 코드의 양이 줄어들고 다른 사람들이 코드를 더 쉽게 이해할 수 있습니다. 둘째, 오류를 방지하는 데 도움이됩니다. 함수가 특정 매개 변수를 기대하지만 제공되지 않으면 예상치 못한 결과 또는 오류가 발생할 수 있습니다. 기본 매개 변수를 설정하면 기능에 제대로 작동하는 데 필요한 모든 매개 변수가 있는지 확인할 수 있습니다.

Deconstructed 할당이있는 ES6 기본 매개 변수를 사용할 수 있습니까?

예, 해체 된 할당이있는 ES6 기본 매개 변수를 사용할 수 있습니다. 이것은 ES6의 강력한 기능으로, 다른 변수로 객체의 배열 또는 속성에서 값을 풀 수 있습니다. 기본 매개 변수와 함께 사용되면 추출 된 값이 정의되지 않으면 객체 또는 배열에서 값을 추출하고 기본값을 지정할 수 있습니다.

ES6의 기본 매개 변수는 JavaScript의 인수 객체와 어떻게 다릅니 까?

인수 객체는 함수에 전달 된 모든 매개 변수를 포함하는 배열 모양의 객체입니다. 그러나 배열이있는 모든 방법이 없으며 ES6 기본 매개 변수만큼 유연하지는 않습니다. 기본 매개 변수를 사용하면 인수 객체에서는 불가능한 정의되지 않은 매개 변수의 기본값을 설정할 수 있습니다.

생성자에서 ES6 기본 매개 변수를 사용할 수 있습니까?

예, 생성자에서 ES6 기본 매개 변수를 사용할 수 있습니다. 이것은 클래스의 새로운 인스턴스를 만들 때 특히 유용합니다. 새 인스턴스를 만들 때 특정 매개 변수가 제공되지 않으면 기본 매개 변수는 새 개체에 필요한 모든 속성을 갖도록하는 데 사용됩니다.

ES6 기본 매개 변수 사용에 성능이 영향을 미칩니 까?

일반적으로 말하면, ES6 기본 매개 변수를 사용하는 성능 영향은 작고 문제가되지 않아야합니다. 그러나 다른 기능과 마찬가지로주의해서 사용해야합니다. 기본 매개 변수, 특히 성능 크리티컬 코드에서 과도한 사용하면 실행 시간이 느려질 수 있습니다. 항상 그렇듯이 코드를 테스트하고 성능을 모니터링하십시오.

화살표 함수와 함께 ES6 기본 매개 변수를 사용할 수 있습니까?

예, 화살표 함수와 함께 ES6 기본 매개 변수를 사용할 수 있습니다. ES6에 도입 된 화살표 함수는 기능 표현을 작성하기위한 간결한 구문을 제공합니다. 다른 기능을 인수로 취하는 고차 기능을 사용할 때 특히 유용합니다.

ES6의 기본 매개 변수 함수에 의해 NULL 값을 어떻게 처리합니까?

매개 변수가 널 값을 전달하면 es6 기본 매개 변수 함수는 기본값을 지정하지 않습니다. NULL은 정의되지 않은 것과는 달리 JavaScript의 값으로 간주되기 때문입니다. 매개 변수가 null 일 때 기본값을 할당하려면 코드 에서이 케이스를 별도로 처리해야합니다.

재귀 함수에서 ES6 기본 매개 변수를 사용할 수 있습니까?

예, 재귀 함수에서 ES6 기본 매개 변수를 사용할 수 있습니다. 이것은 재귀 기능에 대한 기본 케이스를 제공하려는 경우 특히 유용하지만 발신자에게 항상 제공하도록 요청하고 싶지 않습니다.

나머지 매개 변수와 함께 ES6 기본 매개 변수를 사용할 수 있습니까?

예, 나머지 매개 변수와 함께 ES6 기본 매개 변수를 사용할 수 있습니다. 그러나 나머지 매개 변수는 함수 정의의 마지막 매개 변수 여야합니다. 또한 기본 값을 나머지 매개 변수 자체에 할당 할 수는 없지만 나머지 매개 변수의 일부에 대해 기본값을 개별 매개 변수에 할당 할 수 있습니다.

확장 연산자와 함께 ES6 기본 매개 변수를 사용할 수 있습니까?

예, 확장 연산자와 함께 ES6 기본 매개 변수를 사용할 수 있습니다. 확장 연산자를 사용하면 배열과 같은 반복 가능한 객체를 개별 요소로 확장 할 수 있습니다. 기본 매개 변수와 함께 사용하면 값 세트를 함수로 전달하고 정의되지 않은 매개 변수에 기본값을 할당 할 수 있습니다.

위 내용은 ES6 기본 매개 변수 및 속성 속성이있는 클린 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!