ES6 - 함수 디폴트 기본값에 대한 흥미로운 사례

ES6 - 함수 디폴트 기본값에 대한 흥미로운 사례

이 작은 사례를 말하기 전에 먼저 ES6의 해체와 기본값 부여 PS를 간단하게 정리한다. 이미 알고 있는 동지의 동지는 밤을 직접 볼 수 있다.

1. ES6의 해체

ES6에서 구성 값을 이해하는 조작을 도입했는데 그 역할은 값을 수조 Array 또는 속성을 대상 Object에서 서로 다른 변수로 추출하는 것이다.
즉 두 가지 상황으로 나뉜다. 수조 Array에서 해체하고 대상 Object에서 해체한다.

①.수조에서 해체하다

const [a, b] = [1, 2]
//a = 1, b = 2

물론 이것들은 기본적인 수조 해체 부수값입니다. 당신은 쉼표 ,으로 크로스 해체를 할 수 있고 확장 연산자 ...으로 여분의 항목의 해체를 할 수 있습니다.

②.객체 구조에서

const {a, b} = {a: 1, a: 2}
//a = 1, b = 2

이것도 기본적인 대상 구조의 값이다. 그러나 여기서 말하자면 당신은 확장 연산자 ...으로 여분의 항목을 해체할 수 있다.

const {a, ...b} = {a: 1, b: 2, c: 3, d: 4}
//a = 1
//b = {b: 2, c: 3, d: 4}

③. 기타 유형

다른 유형을 해체할 때도 먼저 다른 유형의 값을 Array 또는 Object으로 변환한다

const [a, b, c] = 'hello'
// a = 'h', b = 'e', c = 'l'

const {toString: a} = true
toString === Boolean.prototype.toString // true 

2. ES6에 대한 함수 기본 매개 변수

①정의

함수 기본 매개 변수는 값이 없거나 undefined이 전송될 때 기본 참조를 사용할 수 있습니다.밤:

function foo (a = 1, b = 2) {
    console.log(a, b)
} 
foo ()// 1 2

Note: 인삼의 기본값은 undefiend이다. 즉, 기본값이 없을 때 a = undefiend, b = undefined이다.그러나 위의 예는 값이 전달되지 않은 경우 undefiend이 전달된 경우 다음과 같다.

function foo (a = 1, b = 2) {
    console.log(a, b)
} 
foo (undefined, window.valueIsNotDefined)// 1 2

② 기본값은 함수 매개 변수만 사용할 수 있는 것이 아닙니다

아니면 직접 예를 들면:

var {a = 1, b = 2} = {}
// a = 1, b = 2

var {a = 1, b = 2} = {a: 'hello'}
// a = 'hello', b = 2

사실 부수값을 해체하는 것도 기본값을 부여할 수 있다.이로써 알 수 있다: 함수 매개 변수 기본값의 본질, 또는 해체 할당값

3. 재미있는 밤톨 하나

그렇게 쓸데없는 말을 많이 했는데, 드디어 이 밤송이에 대해 이야기하게 되었다.

Step 1

이것은 매우 흔히 볼 수 있는 상황이다. 어떤 때는 우리가 함수 파라미터를 정의할 때 현재의 파라미터를 해체할 수 있다. 예를 들어 다음과 같다.

function foo ({ a, b }) {
    console.log(a, b)
}
foo({ a: 1, b: 2 })// 1 2

Note: 다음을 수행한 것으로 볼 수 있습니다.

const { a, b } = { a: 1, b: 2 };
console.log(a, b)

Step 2

더 많은 경우, 우리는 이것에 만족하지 않을 것이다. 우리는 기본값을 원한다

function foo ({a = 1, b = 2}) {
    console.log(a, b)
}
foo({})// 1 2

Note: 다음을 수행한 것으로 볼 수 있습니다.

const { a = 1, b = 2 } = {};
console.log(a, b)

질문 1

그러나 우리가 실제적으로 사용할 때 foo({})이라는 문법으로 매개 변수의 부족함을 표시하지 않는다. 우리 대다수 사람들은 foo()이라는 뚜렷한 문법을 사용하기 때문에 문제가 생겼다.

function foo ({a = 1, b = 2}) {
    console.log(a, b)
}
foo()
Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.
    at foo (:1:14)
    at :4:1

쓰기 방식을 바꾸면 오류 원인을 발견하기 어렵지 않다.

const {a = 1, b = 2} = undefined // Error

해결 방법:

사실, function foo ({a = 1, b = 2}) {}은 첫 번째 매개 변수에 대한 해구이다. 그러면 우리는 문장 앞의 함수 기본 매개 변수에 따라 undefined 또는 을 정의할 때 미리 정의한다.

function foo ({a, b} = {a: 1, b: 2}) {
    console.log(a, b)
}
foo()// 1 2

분석: 다음과 같은 문법으로 볼 수 있다

function foo (temp = {a: 1, b: 2}) {
    var {a, b} = temp
    console.log(a, b)
}
foo()// 1 2

질문 2

위의 방법은 문제가 해결된 것처럼 보이지만 다시 foo({})을 실행하면 오류가 발생합니다.

function foo ({a, b} = {a: 1, b: 2}) {
    console.log(a, b)
}
foo({}) // undefined undefined

앞의 상황을 분석한 후에 현재는 알 수 있다. 이때의 함수 매개 변수는 유효한 값을 전달했기 때문에 temp은 기본값을 채택하지 않고 유효한 값을 채택한다. {};var { a, b } = {}의 해체는 자연스럽게 a과 b을 undefined으로 변화시킨다

해결 방법:

우리는 자연스럽게 var { a = 1, b = 2 } = {}의 형식으로 이런 상황을 해결할 수 있다고 생각했다. 그래서 원함수는 다음과 같이 썼다.

function foo ({ a = 1, b = 2 } = {}) {
    console.log(a, b)
}
foo()// 1 2
foo({})//1 2