집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 이해, 함수의 나머지 매개변수

JavaScript 이해, 함수의 나머지 매개변수

php中世界最好的语言원래의: 2017-11-18 09:55:372252검색

JavaScript는 우리의 연구나 작업에 관여하므로 JavaScript도 이해해야 합니다. 나머지 매개변수는 함수의 큰 부분을 차지합니다. 그리고 함수는 끊임없이 변화하고 있습니다. 이 글은 JavaScript를 이해하고 익히는 데 도움이 될 것입니다.

JavaScript 함수는 원하는 수의 매개변수를 사용할 수 있습니다. C#, Java 등 다른 언어와 달리 JavaScript 함수를 호출할 때 원하는 수의 매개변수를 전달할 수 있습니다. JavaScript 함수는 알 수 없는 수의 함수 인수를 허용합니다. ECMAScript 6 이전에는 JavaScript에 알 수 없거나 가변 개수의 매개변수에 액세스하기 위한 변수가 있었는데, 이는 배열이 아닌 배열과 유사한 객체였습니다. 인수 변수를 이해하려면 다음 코드를 고려하세요.

function add(){
    var result = 0;
    for(let i=0;i<arguments.length;i++){
        result = result + arguments[i];
    }
    return result;
}
var r = add(6,9,3,2);
console.log(r);
var t = add(7,56,9);
console.log(t);

보시다시피 인수 개체는 알 수 없거나 가변 함수 매개변수에 액세스하는 데 사용됩니다. 인수가 길이 속성과 대괄호를 사용하더라도 이는 진정한 JavaScript 배열이 아닙니다. 인수 객체에는 팝, 푸시, 슬라이스 등과 같은 다른 JavaScript 배열 메서드를 사용할 수 없습니다. 인수 사용 시 몇 가지 문제는 다음과 같습니다.

JavaScript 함수 인수 개체는 실제 JavaScript 배열이 아니므로 팝, 푸시, 슬라이스 등과 같은 다른 배열 방법을 사용할 수 없습니다.

내부 함수에서는 외부 함수의 인수 객체에 접근하기 어렵습니다. 이에 접근하려면 외부 함수의 인수 함수를 변수에 할당한 다음 이를 내부 함수에서 사용해야 합니다.

인수 객체를 배열로 사용하려면 Aarry.prototype.slice를 통해 수동으로 변환해야 합니다.

ECMAScript 6에는 알 수 없는 개수의 매개변수를 함수의 배열로 나타내는 Rest 매개변수라는 새로운 기능이 도입되었습니다. 추가 매개변수를 배열로 나타낼 뿐만 아니라 인수 객체와 관련된 많은 문제도 해결합니다. 나머지 매개변수를 사용하여 위의 추가 함수를 다시 작성하세요.

function add(...theArgs){
    var result = 0;
    for(let i=0;i<theArgs.length;i++){
        result = result + theArgs[i];
    }
    return result;
}
var r = add(6,9,3,2);
console.log(r);
var t = add(7,56,9);
console.log(t);

나머지 매개변수를...theArgs 또는...args로 정의할 수 있습니다. 마지막으로 명명된 함수 매개변수에 ...(점 3개) 접두사가 붙으면 이는 함수의 나머지 매개변수가 됩니다. JavaScript 함수의 나머지 매개변수는 순수한 JavaScript 배열입니다. 위 코드에서 ...theArgs는 이름이 지정된 유일한 매개변수이고 ...(점 3개)라는 접두사가 붙기 때문에 add 함수의 나머지 매개변수입니다. 나머지 매개변수는 JavaScript 배열이므로 다음 코드와 같이 나머지 매개변수 theArgs에 대해 push, pop 등의 작업을 수행할 수 있습니다.

function add(...theArgs){
    theArgs.push(10);
    var result = 0;
    for(let i=0;i<theArgs.length;i++){
        result = result + theArgs[i];
    }
    var lastItem  = theArgs.pop();
    console.log(lastItem);
    return result;
}

JavaScript 함수의 나머지 매개변수는 다른 매개변수와도 작동할 수 있습니다. 나머지 매개변수 배열에 특정 매개변수를 포함하지 않으려면 함수에 다른 명명된 매개변수를 사용해야 할 수도 있습니다. 다음 코드 블록을 고려하세요.

function add(num1, num2, ...theArgs){
    console.log(num1);
    console.log(num2);
    console.log(theArgs.length);
}
var r = add(6,9,3,2);
var t = add(7,56,9);

첫 번째 함수 호출에서는 6과 9가 각각 num1과 num2에 할당됩니다. 두 번째 함수 호출에서는 7과 56이 num1과 num2에 할당됩니다. 세 번째 매개변수를 시작하는 매개변수는 나머지 매개변수 배열에 할당됩니다. 처음 두 매개변수는 나머지 매개변수 배열의 일부가 아니라는 점을 명심하세요. 따라서 나머지 매개변수에 모든 값을 포함시키려면 처음부터 쉼표로 구분된 명명된 매개변수로 정의해야 합니다. 아래에 제공된 코드는 오류를 발생시킵니다:

function add(num1, ...theArgs,num2){
    console.log(num1);
    console.log(num2);
    console.log(theArgs.length);
}

위 코드에서 나머지 매개변수는 마지막 매개변수가 아니므로 JavaScript에서 오류가 발생합니다. 나머지 매개변수는 마지막 형식 매개변수여야 합니다.

JavaScript를 사용하면 나머지 매개변수를 삭제할 수 있습니다. 즉, 나머지 변수 데이터를 다른 변수 이름 이름으로 압축을 풀 수 있다는 뜻입니다. 아래 코드를 살펴보세요.

function add(...[a,b,c]){
    return a+b+c;
}
var r = add(6);
console.log(r);
var t = add(7,56,9);
console.log(t);

첫 번째 함수 호출에서는 a = 6, b = undefine, c = undefine이 할당되고, 두 번째 함수 호출에서는 a = 7, b = 56, c = 9가 할당됩니다. 이 예에서 함수는 전달된 추가 인수를 무시합니다.

JavaScript 함수의 나머지 매개변수는 함수 사용 알 수 없는 매개변수인 인수 객체에 비해 크게 개선되었습니다. 이는 순수한 JavaScript 배열이므로 모든 배열 메소드를 사용할 수 있습니다. 나머지 변수 데이터를 명명된 변수로 압축을 풀 수 있습니다. 나머지 매개변수에 임의의 이름을 지정할 수 있는데, 이는 인수 키워드를 사용하는 것보다 또 다른 주요 개선 사항입니다.

"JavaScript 이해" 시리즈의 다음 기사에서는 JavaScript 함수의 기본 매개변수를 소개할 예정이니 계속 지켜봐 주시기 바랍니다.

함수의 Rest 매개변수인 JavaScript에 대한 이해는 여기서 끝납니다. 함께 공부하고 토론하는 모든 분들을 환영합니다:

JavaScript 이해, 함수의 나머지 매개변수

관련 기사