언어 업데이트 중에 추가된 모든 새로운 기능은 수백만 명의 개발자의 요구에서 추출되었습니다. 표준 채택은 프로그래머의 고통을 줄이고 편리함을 가져올 수 있습니다.
저희는 이런 글을 자주 씁니다
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: 少传了参数
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.