집 > 기사 > 웹 프론트엔드 > ES5, ES6 환경에서 처리 기능의 기본 매개 변수를 작동하는 방법

ES5, ES6 환경에서 처리 기능의 기본 매개 변수를 작동하는 방법

php中世界最好的语言원래의: 2018-05-30 10:50:541531검색

이번에는 ES5, ES6 환경에서 처리 기능의 기본 매개 변수를 조작하는 방법을 알려드리겠습니다. ES5, ES6 환경에서 처리 기능의 기본 매개 변수를 조작할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

함수 기본값은 견고성을 크게 향상시키는 것입니다(즉, 프로그램을 더욱 강력하게 만듭니다)

MDN 함수 기본 매개변수 설명: 함수 기본 매개변수를 사용하면 값이 없거나 정의되지 않은 경우 기본 매개변수를 사용할 수 있습니다.

ES5

논리적 또는 ||를 사용하여 구현

우리 모두 알고 있듯이 ES5 버전에는 함수 기본값을 처리할 수 있는 직접적인 방법이 없습니다
함수를 직접 강화합니다. 함수는 일반적으로 다음과 같이 수행됩니다.

function doSomething (name, age) {
 name = name || 'default name'
 age = age || 18
 console.log(name, age)
}

함수의 이름과 수명이라는 두 매개변수를 기본값으로 처리합니다. 그렇지 않은 경우 기본값을 사용합니다.

함수를 실행한 후에는 아무런 문제가 없는 것 같습니다.

doSomething()    // default name, 18
doSomething('Niko') // Niko    , 18
doSomething(, 12)  // default name, 12

그러나 이러한 코드를 실행하면 예상치 못한 결과가 나타납니다.

doSomething('Niko', 0) // Niko, 18

매개변수 0에 대해 위의 기본 매개변수가 있음을 알 수 있습니다. 구현 방법의 문제

아래 네 가지 표현식 과 마찬가지로 모두 잘못된 결과를 출력합니다. 이는 분명히 함수의 기본 매개변수에 대한 위의 MDN 정의를 충족할 수 없습니다.

console.log(0     || 'wrong')
console.log(''    || 'wrong')
console.log(null   || 'wrong')
console.log(false   || 'wrong')

올바른 자세

따라서 , ES5에서 올바른 기본값 처리는 다음과 같아야 합니다:

function doSomething (name, age) {
 if (name === undefined) {
  name = 'default name'
 }
 if (age === undefined) {
  age = 18
 }
 console.log(name, age)
}

삼항 연산자 연산자를 사용하여 작업을 단순화

하거나 삼항 연산자 형식으로 단축할 수 있습니다:

function doSomething (name, age) {
 name = name === undefined ? 'default name' : name
 age = age === undefined ? 18       : age
 console.log(name, age)
}

함수를 사용하여 encapsulate

하지만 함수를 작성할 때마다 이러한 작업을 반복적으로 수행해야 한다면 너무 번거로울 수 있으므로
이 논리를 간단하게 캡슐화합니다.

function defaultValue (val, defaultVal) {
 return val === undefined ? defaultVal : val
}
function doSomething (name, age) {
 name = defaultValue(name, 'default name')
 age = defaultValue(age , 18)
 console.log(name, age)
}

이 방법을 사용하면 ES5에서 매우 간단하게 구현할 수 있습니다. 함수 기본 매개변수의 논리

one momre things

위의 defaultValue 함수 구현 방법과 관련하여 약한 유형의 언어의 장점을 합리적으로 사용한 후
이 방법을 사용하여 삼항 연산자의 연산을 저장할 수 있습니다.

function defaultValue () {
 return arguments[+(arguments[0] === undefined)]
}

우리는 인수가 함수의 모든 실제 매개변수를 나타낸다는 것을 알고 있습니다.

인수[0]을 사용하여 첫 번째 실제 매개변수를 가져온 다음 정의되지 않은 것과 합동 비교를 수행합니다.

외부 레이어에서 표현식 결과를 숫자로 변환합니다. , 그리고 이 값을 다음과 같이 사용합니다. 아래 첨자는 인수에서 해당 매개변수를 가져옵니다.

부울 값으로 변환되기 때문에 0과 1의 두 가지 옵션만 있습니다.

이것은 위의 삼항 연산자의 기능도 구현합니다.

ES6

ES6 버전의 기본 함수 값은 기본적으로 위에서 구현한 루틴입니다.

하지만 네이티브이기 때문에 더 간결하게 사용할 수 있는 해당 새 구문이 있습니다.

function doSomething (name = 'default name', age = 18) {
 console.log(name, age)
}

ES6 함수 선언 매개변수 바로 뒤에 = [defaultValue]를 작성하여 매개변수의 기본값을 설정할 수 있는 새로운 구문을 제공합니다.
이 방법을 사용하면 함수 내부의 기본값을 직접 확인할 필요가 없으므로 함수가 해야 할 일에 집중할 수 있습니다.

일부 필수 매개변수에 대해 예외를 발생시키는 방법

ES6의 이 새로운 구문을 사용하면 필수 매개변수에 대한 오류 알림을 제공할 수 있습니다.

function requireParams () {
 throw new Error('required params')
}
function doSomething (name = requireParams(), age = 18) {
 // do something
}

이름 매개변수가 정의되지 않은 경우 기본값 규칙 가 트리거

되고 나서 requireParams 함수가 호출되고 함수에서 직접 Error가 발생합니다

복잡한 구조 매개변수의 기본값 처리

위 처리는 모두 간단한 기본 유형 데이터에 대한 처리입니다. 하지만 다음과 같은 기능이 있다면:

function init ({id, value}) {}
init({
 id: 'tagId',
 value: 1
})

如果在ES5环境下，针对这种参数的默认值处理将会变得无比复杂

首先要判断这一个参数是否存在，然后在判断参数中的所有key是否存在

而在ES6中，可以这样来做：

function init ({
 id  = 'defaultId',
 value = 1
} = {}) {
 console.log(id, value)
}
init()

首先在解构函数的后边添加默认值= {}，然后针对每一项参数添加默认值，很简洁的就实现了我们的需求。

ES5版本的polyfill代码在仓库中的位置：defaultValue

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

ES5, ES6 환경에서 처리 기능의 기본 매개 변수를 작동하는 방법

관련 기사