JavaScript 위치 매개 변수 구현 원리 및 프로세스 해석

1. 위치 매개 변수는 무엇입니까?
JavaScript: 위치 매개변수보다 매개변수 이름이 더 좋은 이유
너는 이 이름을 처음 들어도 위치 파라미터에 익숙할 것이다.

function greet(firstName, lastName) { 
 console.log(`Hello ${firstName} ${lastName}`); 
} 

//   

greet('Michael', 'Scott'); 

const fName = 'Harry'; 
const lName = 'Potter'; 
greet(fName, lName); 

//   

const firstName = 'Erlich'; 
const lastName = 'Bachman'; 
greet(lastName, firstName); 

greet 함수는 firstName과lastName 두 개의 인자를 받아들입니다.호출자는firstName이 첫 번째 인자이고lastName이 두 번째 인자인지 확인해야 합니다.여기서 중요한 것은 매개 변수의 이름은 아무런 의미가 없고 유일하게 중요한 것은 매개 변수가 전달하는 순서이다.
이런 익숙한 방법을 위치 매개 변수라고 부른다.통상적으로, 당신이 매개 변수를 하나 또는 두 개 전달하는 상황에서, 이것은 매우 좋다. 왜냐하면 매개 변수의 순서를 흐트러뜨리기 어렵기 때문이다.그러나 6개의 매개 변수가 필요한 함수를 호출해야 한다면 매개 변수를 전달하는 순서를 기억하기 어렵다.사용자 이름 매개 변수 대신 비밀번호를 전달하고 싶지 않습니다.
2. 위치 매개변수 문제
위치 파라미터는 매우 간단하지만, 당신은 약간의 도전에 직면하게 될 것이다.
(1) 중간 매개변수를 건너뛸 수 없음/
greet 함수를 변경했다면firstName,middleName,lastName 세 개의 인자가 필요합니다.많은 사람들이 중간 이름이 없기 때문에, MiddleName을 선택할 수 있는 매개 변수로 설정하고 싶습니다.firstName과lastName만 사용하여greet 함수를 호출하는 유일한 방법은 이 방법입니다.

greet('Aditya', null, 'Agarwal'); 
// Correct 
greet('Aditya', 'Agarwal'); 
// Incorrect 

firstName과lastName만 제공할 수 없습니다.선택할 수 있는 매개 변수의 수가 5개로 늘어나면 이 문제는 더욱 뚜렷해진다.현재, 당신은 5개의null을 제공해야만 이 매개 변수 다음에 매개 변수를 제공할 수 있습니다.
(2) 위치 매개 변수에 유형을 추가하는 것은 그다지 깨끗하지 않다
현재, 당신의 실용 프로그램에 유형을 추가하는 것은 매우 보편화되었다.위치 파라미터를 사용하면 선택의 여지가 없습니다. 형식을 함수 정의와 함께 연결할 수 있습니다.이것은 코드를 약간 모호하게 할 수 있습니다. 만약에 우리가 블록에 모든 매개 변수의 유형 정의를 설명할 수 있다면 더욱 좋습니다.
(3) 사소한 실수를 일으키다
위치 파라미터가 많은 은밀한 행위를 포장하였는데, 이것은 미묘한 버그를 일으키는 원인일 수 있다.우리 흔히 볼 수 있는 JS 기교 문제 하나 봅시다.
const numbers = ['1', '4', '8', '10'];
console.log(numbers.map(parseInt));
//당신은 결과가 다음과 같을 것이라고 생각할 수 있습니다.
[1, 4, 8, 10]
//실제 출력:
[ 1, NaN, NaN, 3 ]
놀라셨어요?이런 이상한 출력의 원인은 위치 파라미터의 숨은 뒤에 숨겨져 있다.맵과parseInt 함수가 뻔한 상황에서 그들의 비밀을 숨긴 것을 볼 수 있을 것이다.
코드 번호를 다시 봅시다.map(parseInt).
여기서 도대체 무슨 일이 일어난 거야?

우리는numbers 수조에서 맵 함수를 실행합니다.

맵은 수조의 첫 번째 항목을 가져와parseInt에 전달합니다.

현재 그룹의 첫 번째 항목(즉 1)에 대해parseInt(1)를 실행합니다.네...?오류!!!

실제로 맵은 세 개의 매개 변수를 리셋 함수에 전달한다.첫 번째는 그룹의 현재 프로젝트이고, 두 번째는 프로젝트의 인덱스이며, 세 번째는 전체 그룹이다.그 자체는 문제없지만, 진정한 문제는 뒷부분에 있다.
numbers.map(parseInt) 및numbers.map((item) = > parseInt(item)가 다릅니다.리셋 함수는 item 매개 변수만 받아들여서parseInt에 전달되기 때문에 추가 절차를 건너뛸 수 있다고 가정할 수 있습니다.그러나 둘은 다르다. 전자에서 우리는 모든 데이터를 맵에서parseInt로 전달하고 후자에서 우리는 항목만 전달한다.
너는 모를 수도 있지만,parseInt의 두 번째 매개 변수를 기수라고 부른다.기본적으로 기본값은 10입니다.이 코드에 문제가 생겼습니다. 현재 프로젝트의 인덱스를parseInt에 기수 값으로 전달하는 것입니다.이것은 실제 함수 호출입니다.
parseInt('1', 0, [...]);
parseInt('4', 1, [...]);
parseInt('8', 2, [...]);
parseInt('10', 3, [...]);
이제 우리는 문제를 알게 되었는데, 우리는 어떻게 해야만 더욱 잘 할 수 있습니까?
3. 위치 매개 변수의 대체
함수가 이름을 통해 원하는 매개 변수가 무엇인지 알 수 있다면?이렇게 하면 추가 데이터를 잘못 전달해도 필요한 것만 사용할 수 있다.
ParseInt를 포장해 보겠습니다.다음은 간단한 실현이다.

//   
function myCustomParseInt(objArgs) { 
 return parseInt(objArgs.item, objArgs.radix); 
} 

//   
const num = myCustomParseInt({ item: '100', radix: 10 }); 

myCustomParseInt는 하나의 매개 변수만 받아들일 수 있으며 객체입니다.이 대상은 두 개의 키가 있을 수 있습니다: item과radix.사용자 정의 함수와 맵을 사용합니다.my Custom Parse Int에 리셋된 args를 보내는 중간 절차가 있어야 합니다.
const numbers = ['1', '4', '8', '10'];
const result = numbers.map((item, index) => myCustomParseInt({ item, index }));
console.log(result);//[ 1, 4, 8, 10 ]
색인을 myCustomParseInt에 전달해도 문제가 되지 않습니다.그것은 my Custom Parse Int가 그것만 무시할 수 있기 때문이다.대상을 함수에 전달하는 이런 모델을 명칭 매개 변수라고 하는데 위치 매개 변수보다 더욱 명확하다.
기수를 변경하려면, 우리는 반드시 현식 전달 기수 키를 사용해야 한다.즉, 2를 기반으로 하는 문자열을 해석하려면 문서로 이동하여 매개변수 (기본) 의 정확한 이름을 봐야 합니다.만약 우리가 맹목적으로 다른 키를 전달한다면, 그것은 아무 소용이 없을 것이다.이것은 의외의 행동을 피하기 때문에 우리에게 매우 좋다.
(1) 해체된 명명 매개 변수
얼마 전에 JavaScript는 my Custom Parse Int 구현에서 사용할 수 있는 해구 기능을 얻었습니다.

//   
function myCustomParseInt(item, radix) { 
 return parseInt(item, radix); 
} 

//   
function myCustomParseInt(objArgs) { 
 return parseInt(objArgs.item, objArgs.radix); 
} 

//   
function myCustomParseInt({ item, radix }) { 
 return parseInt(item, radix); 
} 

두 개의 괄호만 추가하면 args라는 이름을 얻을 수 있다는 것을 알게 될 것입니다. 해체를 const item =objArgs를 실행하는 것으로 간주할 수 있습니다.item;.
undefined를 사용하여 myCustomParseInt를 호출하면 JS에서 오류가 발생합니다.그것은 undefined를 허락하지 않기 때문이다.item.이러한 상황을 피하기 위해서, 우리는 해체가 끝날 때 = {}를 추가할 수 있다.이렇게, 우리가 undefined를 전달할 때, 그것은 {}를 실행할 것이다.item 이것은 유효한 JS입니다.이것은 최종적인 실현이다.

function myCustomParseInt({ item, radix } = {}) { 
 return parseInt(item, radix); 
} 

명명 매개 변수 모드를 통해 함수는 더 이상 매개 변수를 전달하는 순서에 의존하지 않기 때문에 우리가 제공하고 싶지 않은 매개 변수를 건너뛸 수 있습니다.
//위치 매개 변수에 대해null을 추가해야 합니다
function greetPos(firstName, middleName, lastName) {}
greetPos('Aditya', null, 'Agarwal');
//이름 인자를 사용하면firstName과lastName만 제공합니다.
function greetNamed({ firstName, middleName, lastName } = {}) {}
greetNamed({ firstName: 'Aditya', lastName 'Agarwal' });
요컨대, 내가 말하고자 하는 것은 명명 매개 변수는 강력한 모델이다. 지금은 매우 보편화되었지만, 너는 항상 그것들을 사용할 필요가 없다.때때로 너는 심지어 둘을 한데 결합시킬 수도 있다.브라우저의 fetch API 사용법은 다음과 같습니다.

//  url ， args 。 
fetch('https://google.com', { 
 method: 'POST', 
 headers: { 
  'Content-Type': 'application/json', 
 }, 
}); 

// basic GET requests with just positional args 
fetch('https://google.com'); 

여기서 강제 매개변수(API 경로)는 위치 매개변수이며 명명된 매개변수를 통해 선택적 매개변수를 수락합니다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.