ECMAScript6 함수 기본 매개변수_javascript 팁

언어 업데이트 중에 추가된 모든 새로운 기능은 수백만 명의 개발자의 요구에서 추출되었습니다. 표준 채택은 프로그래머의 고통을 줄이고 편리함을 가져올 수 있습니다.

저희는 이런 글을 자주 씁니다

function calc(x, y) {
  x = x || 0;
  y = y || 0;
  // to do with x, y
  // return x/y
}

간단히 말하면 x와 y는 기본값 0을 제공합니다. 전달되지 않으면 x와 y는 0 값으로 계산됩니다. 통과되면 실제 값이 계산에 사용됩니다.

또 다른 예는 ajax를 정의하는 것입니다

function ajax(url, async, dataType) {
  async = async !== false
  dataType = dataType || 'JSON'
  // ...
}

네이티브 JS로 캡슐화된 간단한 ajax 함수입니다. url은 필수이고 async 및 dataType은 선택 사항입니다. 채워지지 않은 경우 기본값은 JSON 형식 데이터를 동기적으로 요청하고 반환하는 것입니다.

또 다른 예는 직사각형 클래스를 정의하는 것입니다

function Rectangle(width, height) {
  this.width = width || 200;
  this.height = height || 300;
}

새로 생성할 때 매개변수를 전달하지 않으면 기본 너비와 높이가 200*300인 직사각형이 생성됩니다.

calc든, ajax 함수든, Rectangle 클래스든 우리 모두는 함수 본문의 기본값을 처리해야 합니다. 언어가 자체적으로 처리하면 좋지 않을까요? ES6에서는 이 기능(기본 매개변수)을 제공합니다. 다음은 ES6의 새로운 기능으로 다시 작성된 calc, ajax 및 Rectangle입니다.

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
calc(); // 0 0
calc(1, 4); // 1 4
 
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
ajax('../user.action'); // ../user.action true JSON
ajax('../user.action', false); // ../user.action false JSON
ajax('../user.action', false, 'XML'); // ../user.action false XML
 
function Rectangle(width=200, height=300) {
  this.width = width;
  this.height = height;
}
var r1 = new Rectangle(); // 200*300的矩形
var r2 = new Rectangle(100); // 100*300的矩形
var r3 = new Rectangle(100, 500); // 100*500矩形

보시다시피 ES6에서는 기본값 부분을 중괄호에서 괄호로 옮겼고, "||" 연산도 줄었으며, 그 이후로 함수 본문도 얇아졌습니다. 매개변수의 기본값은 매개변수가 정의된 위치에 있어야 하는데 훨씬 간단해 보입니다. 오(∩_∩)오

기본 매개변수는 중간에

을 정의하는 등 임의의 위치에서 정의할 수 있습니다.

function ajax(url, async=true, success) {
  // ...
  console.log(url, async, success)
}

은 기본 매개변수인 async를 정의하며, url과 성공이 필요합니다. 이 경우 중간 매개변수를 정의되지 않음으로 설정해야 합니다

ajax('../user.action', undefined, function() {
   
})

이를 당연한 것으로 여기지 말고 정의되지 않음을 null로 변경하세요. null == undefed인 경우에도 null을 전달한 후 함수 본문의 비동기는 null이 되며 true가 아닙니다.

다음 사항에 유의해야 합니다.

1. 기본 매개변수를 정의한 후에는 함수의 길이 속성이 감소합니다. 즉, 여러 기본 매개변수가 길이 계산에 포함되지 않습니다.

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
console.log(calc.length); // 0
console.log(ajax.length); // 1

2. Let과 const는 기본값을 다시 선언하는 데 사용할 수 없습니다. var는

function ajax(url="../user.action", async=true, success) {
  var url = ''; // 允许
  let async = 3; // 报错
  const success = function(){}; // 报错
}

또 다른 흥미로운 점은 기본 매개변수가 값 유형이 될 수 없고 함수 호출이 될 수 있다는 점입니다

function getCallback() {
  return function() {
    // return code
  }
}
 
function ajax(url, async, success=getCallback()) {
  // ...
  console.log(url, async, success)
}

여기서 매개변수인 Success가 함수 호출임을 알 수 있습니다. ajax 호출 시 세 번째 매개변수가 전달되지 않으면 getCallback 함수가 실행되어 성공에 할당된 새 함수를 반환합니다. 이는 프로그래머에게 상상력의 여지를 많이 주는 매우 강력한 기능입니다.

예를 들어 이 기능을 사용하여 특정 매개변수를 강제로 전달할 수 있습니다. 그렇지 않으면 오류가 보고됩니다.

function throwIf() {
  throw new Error('少传了参数');
}
 
function ajax(url=throwIf(), async=true, success) {
  return url;
}
ajax(); // Error: 少传了参数

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.