JavaScript 함수의 매개변수를 자세히 설명하는 기사

함수 foo(a, b) {
    console.log([a, b]);
}

foo(1, 2); //

함수 foo(a, b) {
    let a = 1; // 오류, a가 선언되었습니다. const b = 1; // 오류, b가 선언되었습니다.}

function add(num) {
    숫자 + 1을 반환합니다.
}

개수 = 5로 둡니다.
let result = add(count); // 여기에 전달되는 매개변수의 과정은 num = count로 간주될 수 있습니다.

console.log(수); // 5
console.log(result); // 6

function setName(obj) {
    obj.name = "샤오밍";
}

사람 = {}를 보자;

setName(person); // 여기에 매개변수를 전달하는 과정은 obj = person;
console.log(person); // {name: "Xiao Ming"}

function foo(a, b) {
	console.log(인수[0]);
    console.log(인수[1]);
    console.log(arguments.length);
}

foo(10, 20); // 10, 20, 2를 순차적으로 출력합니다.

함수 foo() {
	console.log(인수[0]);
    console.log(인수[1]);
}

foo(10, 20); // 10과 20이 차례로 출력되는 것을

function foo(a) {
	인수[0]++;
    console.log(a);
}

foo(10); // 출력 11
//---------------
함수 foo2(a) {
	++;
    console.log(인수[0]);
}

foo2(10); // 출력 11

function foo(a,b) {
    인수[1] = 2;
    console.log(b);
}

foo(1); // 정의되지 않은 출력

foo(1, undefine); //

foo = () => {
    console.log(인수[0]);
}foo(); // 오류, 인수가 정의되지 않은

function fn1(){
    fn2 = () => {
    	console.log(인수[0]);
    }
    
    fn2();
}fn1(5);

함수 foo(obj) {
    console.log(obj.name, obj.sex, obj.age);
}

foo({ sex: 'Male', age: 18, name: 'Xiao Ming' }); // Xiao Ming은 남자입니다. 18

function sayHi(name) {
    이름 = 이름 || '모두';
    
	console.log( '안녕하세요' + 이름 + '!');
}

sayHi(); // '안녕하세요 여러분!'을 출력

// if 문이 함수 sayHi(name) {를 결정합니다

	if (이름 === 정의되지 않음) {
		이름 = '모두';
	}
    
	console.log( '안녕하세요' + 이름 + '!');
}

//삼진식 판단 함수 sayHi(name) {
	이름 = (이름 !== 정의되지 않음) ? 이름 : '모두';
	
    console.log( '안녕하세요' + 이름 + '!');
}

function sayHi(name = 'everyone') { // 함수를 정의할 때 형식 매개변수에 직접 값을 할당하세요. console.log( '안녕하세요' + 이름 + '!');
}

sayHi(); // '안녕하세요 여러분!'을 출력합니다. 
sayHi('Tony'); // '안녕하세요 Tony!'를 출력합니다. 
sayHi(undefine); // 'Hello everything!' 출력

function sayHi(name = 'every'+'one') {
	console.log( '안녕하세요' + 이름 + '!');
}

sayHi(); // '안녕하세요 여러분!'을 출력합니다. 
//----------------------------
함수 foo() {
    console.log('foo 호출 중');
    '토니'를 반환합니다.
}

함수 sayHi(이름 = foo()) {
	console.log( '안녕하세요' + 이름 + '!');
}
		  
sayHi(); // 'foo 호출' 출력
         // '안녕 토니!'를 출력합니다. 

sayHi(undefine); // 'call foo' 출력
                  // '안녕 토니!'를 출력합니다. 

sayHi('John'); // 'Hello John!' 출력

보통 함수를 호출할 때 매개변수를 적절하게 생략할 수 있도록 매개변수에 기본값을 설정하는데, 여기서 주의해야 할 점은 매개변수가 여러 개인 경우 기본값이 있는 매개변수가 마지막에 위치하지 않으면 실제로 생략이 불가능합니다.

 함수 fn(x = 1, y) {
	console.log([x, y]);
}

fn(); // 출력[1, 정의되지 않음]
fn(2); //출력[2, 정의되지 않음]
fn(, 2); // 오류, 구문 오류(배열과 같은 빈 슬롯은 여기서 지원되지 않음)
fn(undefine, 2); // 출력 [1, 2] (편의상 1을 전달하는 것이 좋습니다!)

위의 예에서 형식 매개변수 x에 설정된 기본값은 의미가 없어 보입니다. 따라서 마지막에 기본값이 있는 매개변수를 넣는 것이 가장 좋습니다.

 함수 fn(x, y = 2) {
	console.log([x, y]);
}

fn(); // 출력[정의되지 않음, 2]
fn(1); //출력[1, 2]
fn(1, 1) //출력[1, 1]

여러 매개변수에 기본값이 설정되어 있으면 이전 매개변수를 생략할 수 없고 마지막 매개변수에 실제 매개변수만 전달하면 문제가 다시 발생합니다.

 함수 fn(x, y = 2, z = 3) {
	console.log([x, y, z]);
}

fn(1, , 10) // 오류 보고

우리는 객체를 전달함으로써 매개변수 순서의 제한을 피할 수 있다는 것을 앞서 알고 있었습니다. 매개변수 기본값을 구현하는 방법은 무엇입니까? || 사용하여 if 문이나 삼항 표현식을 판단하는 것도 해결책이지만 이는 약간 뒤쳐진 것 같습니다. 다음은 ES6의 두 가지 새로운 방법입니다.

매개변수 기본값은 Object.ass()와 함께 사용됩니다.

 함수 fn(obj = {}) {
    defaultObj = {
        x: 정의되지 않음,
        예: 2,
        z: 3
    }
    
    결과 = Object.할당(defaultObj, obj);
    
	console.log([result.x, result.y, result.z]);
}

fn(); // 출력 [정의되지 않음, 2, 3]
fn({ x: 1, z: 10 }); // 출력 [1, 2, 10]

위의 예에서는 객체 defaultObj 함수에 정의되고 그 안의 속성이 매개변수의 기본값으로 사용됩니다. 그런 다음 들어오는 객체와 기본 객체를 병합하는 데 Object.assagin()이 사용됩니다. defaultObj의 속성은 obj의 동일한 속성이 재정의됩니다. obj에 다른 속성이 있으면 defaultObj에 할당됩니다. 여기서는 반환된 병합 개체를 수신하는 데 변수가 사용됩니다.

동시에, 형식 매개변수 obj 의 기본값도 빈 객체로 설정되어 함수가 호출될 때 매개변수가 전달되지 않도록 합니다. 이렇게 하면 Object.sign()이 수신한 두 번째 매개변수가 undefined 되기 때문입니다. , 오류가 발생했습니다.

매개변수 기본값과 구조화 할당이 함께 사용됩니다.

함수가 호출될 때 실제 매개변수와 형식 매개변수의 일치는 실제로 암시적 할당 프로세스입니다. 따라서 매개변수 전달도 분해되어 할당될 수 있습니다.

 함수 fn({ x, y = 2, z = 3 }) {
    console.log([x, y, z]);
}

fn({}); // 출력 [정의되지 않음, 2, 3]
fn({ x: 1, z: 10 }); // 출력 [1, 2, 10]

이 예제에서는 객체의 구조 분해 할당의 기본값만 사용되며 함수 매개변수의 기본값은 사용되지 않습니다. 함수가 호출될 때 매개 변수가 전달되지 않으면 오류도 보고됩니다. 이로 인해 매개 변수 초기화 중에 구조 분해 할당이 실패하게 되므로 {x, y = 2, z = 3} = undefined 과 같은 코드를 실행하는 것과 같습니다. {x, y = 2, z = 3} = undefined .

마찬가지로 매개변수 기본값 구문을 사용하여 {x, y = 2, z = 3} 에 대한 기본 구조 분해 객체를 설정할 수 있으므로 매개변수 전달 없이 함수가 원활하게 실행될 수 있습니다.

 함수 fn({ x, y = 2, z = 3 } = {}) {
    console.log([x, y, z]);
}

fn(); // 출력 [정의되지 않음, 2, 3]

여기에는 이중 기본값이 있어 다소 혼란스러울 수 있습니다. 따라서 위의 매개변수 초기화 프로세스를 설명하기 위해 의사 코드를 사용하세요.

 if(실제 매개변수=== {...}) { // fn({...})일 때;     
    { x, y = 2, z = 3 } = {...};
                        
} else if (실제 매개변수 === 정의되지 않음){ // fn()일 때;
    { x, y = 2, z = 3 } = {};

}

이중 기본값에 특별한 주의가 필요한 세부 사항이 있습니다. 이는 구조 분해 할당의 기본값과 함수 매개변수의 기본값 간의 차이입니다. 다음 예를 참조하세요.

 함수 fn({ x = 1 } = {}, { y } = { y: 2 }){
    console.log(x, y);
}

fn(); // 출력 1 2
fn({ x: 10 }, { y: 20 }) // 출력 10 20
fn({},{}); // 1 정의되지 않음

이 함수에는 구조분해 할당을 사용하는 두 개의 매개변수 세트가 있는데, x와 y 모두 기본 값이 설정되어 있는 것 같습니다. 두 가지 형태는 다르지만 결과는 분명히 모든 경우에 동일하지 않습니다. 전달된 매개변수가 {} 인 경우 y는 기본값 2를 가져오지 않습니다. 이유는 무엇입니까? 이전 의사 코드 예제와 결합:

 fn({ x: 10 }, { y: 20 }); // 초기화 중: { x = 1 } = { x: 10 }, { y } = { y: 20 }

fn({},{}); // 초기화 중: { x = 1 } = {}, { y } = {}

전달된 매개변수가 {} 이면 함수 매개변수가 누락되거나 undefined 아니므로 함수 매개변수의 기본값은 아무런 영향을 미치지 않습니다. 동시에, {} 에는 x와 y에 해당하는 값이 없습니다. x에서 얻은 1은 구조 분해 할당의 기본값이고, y에는 구조 분해 할당의 기본값이 없으므로 기본값은 undefined 입니다. .

매개변수 기본값의 범위 및 임시 불감대

또 다른 작은 세부 사항이 있습니다. 매개 변수가 기본값으로 설정되면 자체 범위( (...) )로 포장됨)가 형성되므로 함수 본문의 변수를 참조할 수 없습니다.

 함수 foo(a = b) {
    b = 1이라고 하자;
}

foo(); // 오류, b는 정의되지 않았습니다.

그러나 이 범위는 일시적일 뿐입니다. 매개변수가 초기화되면 이 범위는 더 이상 존재하지 않습니다.

또한 일반적인 범위의 규칙을 따릅니다.

 b = 2라고 하자;

함수 foo(a = b) {
    b = 1이라고 하자;
    반환하다;
}

foo(); // 2

위의 예에는 전역 변수 b가 있고 형식 매개변수 a는 전역 변수 b의 값을 가져옵니다.

물론 형식 매개변수 범위에 형식 매개변수 b가 있는 경우 먼저 현재 범위를 얻습니다.

 b = 2라고 하자;

함수 foo(b = 3,a = b) {
    반환하다;
}

foo(); // 3

여러 매개변수에 대한 기본값을 설정하면 "임시 데드존" 규칙에 따라 순서대로 초기화됩니다. 즉, 이전 매개변수는 이후 매개변수를 참조할 수 없습니다.

 함수 foo(a = b, b = 2) {
    a + b를 반환합니다.
}

foo(); // 오류, 초기화 전에는 b에 접근할 수 없습니다.

6. 매개변수 수집 및 확장

나머지 매개변수

ES6에서는 함수의 중복된 실제 매개변수(즉, 형식 매개변수에 해당하지 않는 실제 매개변수)를 수집할 수 있는 **나머지 매개변수(나머지)** 구문( ...变量名)을 제공합니다. arguments 개체를 사용해야 합니다. 형식 매개변수를 ... 연산자와 함께 사용하면 배열이 되고 중복되는 실제 매개변수가 이 배열에 입력됩니다.

나머지 매개변수의 기본 사용법:

 함수 합계(a, ...값) {
 
    for (값의 값을 알려주세요) {
        += 발;
    }
    
    반환하다;
}

합계(0, 1, 2, 3); // 6

위의 예에서는 매개변수 초기화 시 매개변수 위치를 기준으로 먼저 매칭을 수행하고 a에 0을 할당한 후 나머지 매개변수 1, 2, 3을 배열 값에 넣게 됩니다.

다음은 arguments 객체와 나머지 매개변수를 사용하여 매개변수를 얻는 비교 예입니다.

 // 인수 작성 방법 function sortNumbers() {
	return Array.prototype.slice.call(arguments).sort();
}

// 나머지 매개변수를 작성하는 방법 const sortNumbers = (...numbers) => {
    숫자를 반환합니다.sort();
}

나머지 매개변수들은 좀 더 간결하게 쓰여진 것을 볼 수 있다. arguments 배열과 유사한 객체이자 반복 가능한 객체이지만 결국 배열은 아닙니다. Array 메소드를 지원하지 않습니다. Array 메소드 arguments 호출하려면 먼저 Array.prototype.slice.call 사용하여 이를 배열로 변환해야 합니다.

나머지 매개변수는 arguments 객체와 다르며 실제 Array 인스턴스이며 쉽게 배열 메서드를 사용할 수 있습니다. 그리고 화살표 기능은 나머지 매개변수도 지원합니다.

또한, 나머지 매개변수를 사용해도 arguments 객체의 기능에는 영향을 주지 않으며, 함수를 호출할 때 전달된 매개변수를 계속 반영할 수 있습니다.

• 나머지 매개변수의 위치

나머지 매개변수는 마지막 형식 매개변수여야 합니다. 그렇지 않으면 오류가 보고됩니다.

 // 오류 보고 함수 fn1(a, ...rest, b) {
	console.log([a, b, 나머지]);
} 

//fn2(a, b, ...rest) 함수를 작성하는 올바른 방법 {
    console.log([a, b, 나머지]);
}

fn2(1, 2, 3, 4) // 출력 [1, 2, [3, 4]]

구문 확장

이전에는 중복 매개변수를 배열로 수집하는 방법을 알고 있었지만 때로는 다음과 같이 배열을 전달하는 대신 배열의 요소를 함수에 별도로 전달하는 등 반대 작업을 수행해야 할 때도 있습니다.

 함수 합계(...값) {
    합계 = 0으로 둡니다.
    
    for (값의 값을 알려주세요) {
        합계 += 발;
    }
    
    반환 금액;
}

arr = [1, 2, 3, 4]로 설정합니다.

합계(arr); // "01,2,3,4"

위 예제의 함수는 전달된 모든 값을 누적합니다. 이를 배열에 직접 전달하면 원하는 결과를 얻을 수 없습니다.

예제에서 배열이 전달되면 값의 값은 [[1, 2, 3, 4]] 가 되어 배열 값에 하나의 요소만 생성되고 이 요소의 유형은 배열입니다. . 그러면 함수 반환 값은 값 0 과 배열 [1, 2, 3, 4] 를 더한 결과입니다. 두 유형이 암시적으로 문자열로 변환된 후 문자열 연결이 됩니다.

배열을 분해하여 함수에 전달하려면 먼저 매개변수를 하나씩 전달하는 것이 불가능합니다. sum(arr[0], arr[1], arr[2], arr[3]); 항상 가능한 것은 아닙니다. 배열에 요소가 몇 개 있는지 알고 있고 배열에 요소가 많을 수 있으므로 수동으로 전달하는 것은 현명하지 않습니다.

apply() 메소드를 사용하는 것이 더 실현 가능합니다:

 sum.apply(null, arr); // 10

그러나 이것은 아직 최적의 솔루션이 아니므로 여기에 핵심 사항이 있습니다!

ES6의 새로운 **확장 구문(확산)**은 이러한 상황에 대처하는 데 도움이 될 수 있습니다. 또한 ...变量名구문을 사용합니다. 나머지 매개변수 구문과 동일하지만 그 목적은 완전히 반대입니다. 반복 가능한 객체를 쉼표로 구분된 매개변수 시퀀스로 분할할 수 있습니다.

함수가 호출되면 해당 응용 프로그램은 다음과 같습니다.

 합(...arr); // 10

// sum(1,2,3,4)과 동일합니다.

원하는 대로 일반 값과 ​​함께 사용할 수도 있고, 전면 및 후면 위치에 제한이 없으며, 여러 반복 가능한 객체를 동시에 전달할 수 있습니다.

 합계(-1, ...arr); // 9
합계(...arr, 5) // 15
합계(-1, ...arr, 5) // 14
sum(-1, ...arr, ...[5, 6, 7]) // 27

확장 연산자는 ... 매개변수를 별도로 수동으로 전달하는 작업을 완료하는 것과 같습니다. 이 함수는 수신된 실제 매개변수가 개별 값이라는 것만 알고 확장 연산자의 존재로 인해 다른 영향을 미치지 않습니다.

위의 예제는 모두 배열에 대한 것이지만 확장 구문은 그 이상을 수행할 수 있습니다. 문자열 및 리터럴 객체와 같은 다른 반복 가능한 객체를 확장할 수 있습니다. 자세한 내용은 → 확장 구문을 참조하세요.

요약

• 형식 매개변수는 함수에 선언된 지역 변수입니다. 함수에 전달되는 실제 매개변수는 형식 매개변수에 할당됩니다. 실제로는 암시적 할당 프로세스입니다.

• 형식 매개변수와 실제 매개변수의 수가 동일하지 않을 수 있습니다.

  ● 실제 매개변수가 누락된 형식 매개변수는 기본값이 정의되지 undefined .

  ● 추가 실제 매개변수는 화살표 함수를 제외하고 arguments 개체를 통해 액세스할 수 있습니다.

• 매개변수 전달 순서가 더 이상 중요하지 않도록 객체를 전달할 수 있으며, 객체의 속성을 실제 매개변수로 사용하도록 할 수 있습니다.

• ES6의 매개변수 기본값 - 함수 호출 시 매개변수 값이 없거나 undefined 경우에만 기본값을 얻습니다.

  ● 기본값을 설정하는 매개변수는 맨 마지막 위치에 있는 경우에만 생략 가능하다.

  ● 형식 매개변수 설정의 기본값은 함수 본체의 변수를 참조할 수 없지만, 이전 형식 매개변수 및 외부 변수를 참조할 수 있습니다.

  ● Object.Assign()을 통해 기본값을 구현하거나 할당을 구조화하면 매개변수 전달 방법을 보다 유연하게 만들 수 있습니다.

• 나머지 매개변수와 arguments 의 주요 차이점은 다음과 같습니다.

  ● 나머지 매개변수에는 해당 형식 매개변수가 없는 실제 매개변수만 포함되며, arguments 객체에는 함수에 전달된 모든 실제 매개변수가 포함됩니다.

  ● 나머지 매개변수는 실제 Array 인스턴스이고 arguments 는 배열과 유사한 객체입니다.

• 나머지 매개변수와 확장 구문은 모두 함수 관련 시나리오에서 ... 사용합니다.

  ● 기능 매개변수 목록의 마지막에 나타나며 나머지 매개변수입니다.

  ● 함수 호출에서 발생하며 확장 구문입니다.

위 내용은 자바스크립트 함수의 매개변수에 대해 자세히 설명한 글입니다. 자세한 내용은 PHP 중국어 홈페이지의 다른 관련 글을 참고해주세요!