웹 프론트엔드 JS 튜토리얼 ECMAScript6 함수 나머지 매개변수(RestParameters)_javascript 기술

ECMAScript6 함수 나머지 매개변수(RestParameters)_javascript 기술

May 16, 2016 pm 03:55 PM

JS 함수 내부에는 실제 매개변수를 모두 가져올 수 있는 인수 개체가 있다는 것을 알고 있습니다. 이제 ES6에서는 시작 매개변수를 제외한 매개변수, 즉 나머지 매개변수(말도 안 되는 O(∩_∩)O~)를 제외한 매개변수를 얻을 수 있는 새로운 객체를 가져왔습니다.

이 새 객체는 인수와 다릅니다. 프로그래머가 사용자 정의한 공통 식별자입니다. 앞에 점 세 개만 있으면 됩니다....

function func(a, ...rest) {
 console.log(a)
 console.log(rest)
}
func(1)
func(1, 2, 3, 4)
로그인 후 복사

Func의 두 번째 매개변수인 나머지 부분에 점 세 개가 앞에 있다는 점에 주목하세요. 정의한 후 두 번 호출했는데 결과는 다음과 같습니다

첫 번째 호출, 나머지는 빈 배열이고 두 번째 호출은 [2, 3, 4]임을 알 수 있습니다.

또 다른 예, 앞에 매개변수 2개를 정의합니다

function func(a, b, ...rest) {
 console.log(a, b)
 console.log(rest)
}
func(1, 2)
func(1, 2, 3, 4)
로그인 후 복사

출력 결과는 다음과 같습니다

위의 두 가지 예를 통해 나머지 매개변수의 의미를 이해하셨을 것입니다.

남은 매개변수가 있으므로 나중에 다른 매개변수를 따르지 마세요. 그렇지 않으면 오류가 보고됩니다

function func(a, ...rest, b) {
 
}
로그인 후 복사

나머지 후에 매개변수 b가 추가되고 Firefox는 오류를 보고합니다

나머지 매개변수를 사용하면 함수의 길이 속성이 일부 변경됩니다

function func(a, b, ...rest) {
}
func.length // 2
로그인 후 복사

즉, 길이는 나머지를 포함하지 않고 2입니다.

나머지 매개변수 앞에 매개변수가 없을 수 있는지 궁금해하는 학생들도 있습니다. 대답은 그렇습니다

function func(...rest) {
 console.log(rest)
}
func(1) // [1]
func(1, 2, 3, 4) // [1,2,3,4]
로그인 후 복사

여기의 나머지 부분은 실제로 인수와 유사한 기능을 가지고 있습니다. 일부 학생들은 이것이 인수를 대체할 수 있다고 생각합니까? ECMAScript에는 이러한 의도가 있습니다. Rest 매개변수는 이미 버려진 ES4에 포함되어 있습니다(AS3에 익숙한 학생들은 이것을 알아야 합니다). Rest 매개변수는 ES6에 유지되었습니다.

나머지는 인수와 함께 사용할 수 없으며 오류가 보고된다는 점에 유의하세요

function func(...rest) {
 console.log(rest)
 console.log(arguments)
}
로그인 후 복사

Firefox 콘솔은 다음과 같습니다

인수와 나머지 매개변수의 차이점

인수는 의사 배열입니다(배열과 유사)
나머지 매개변수는 Array.prototype
의 모든 메소드를 포함하는 실제 배열(Array)입니다. 인수에는 호출자가 있고 호출자에는 호출자
가 있습니다.

function func(a, ...rest) {
  console.log(rest instanceof Array)
}
func(1, 2) // true

로그인 후 복사

마지막으로 나머지 매개변수의 실제 적용으로 마무리합니다

/*
 * 任意个数相加
 *
 * **示例**
 * sum(1)
 * sum(1, 2)
 * sum(1, 2, 3)
 */
function sum(first, ...rest) {
  var result = first
  var i = 0
  var len = rest.length
  while (i < len) {
    result += rest[i]
    i++
  }
  return result
}
로그인 후 복사

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

예제 색상 JSON 파일 예제 색상 JSON 파일 Mar 03, 2025 am 12:35 AM

예제 색상 JSON 파일

10 JQuery Syntax Highlighter 10 JQuery Syntax Highlighter Mar 02, 2025 am 12:32 AM

10 JQuery Syntax Highlighter

8 멋진 jQuery 페이지 레이아웃 플러그인 8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

8 멋진 jQuery 페이지 레이아웃 플러그인

자신의 Ajax 웹 응용 프로그램을 구축하십시오 자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

자신의 Ajax 웹 응용 프로그램을 구축하십시오

' this ' 자바 스크립트로? ' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

' this ' 자바 스크립트로?

10 JavaScript & JQuery MVC 자습서 10 JavaScript & JQuery MVC 자습서 Mar 02, 2025 am 01:16 AM

10 JavaScript & JQuery MVC 자습서

See all articles