10. 파괴

BY admin
|

10. 파괴#

  • 10.1. 개요
    • 10.1.1. 개체 소멸
    • 10.1.2. 배열 소멸
    • 10.1.3. 파괴는 어디에서 사용할 수 있습니까?
  • 10.2. 배경:데이터 생성 대 데이터 추출
  • 10.3. 소멸 패턴
    • 10.3.1. 당신이 필요로 선택
  • 10.4. 패턴은 값의 내장에 어떻게 접근합니까?
    • 10.4.1. 개체 패턴 개체
    • 에 값을 강제 10.4.2. 배열 패턴은 반복 가능과 함께 작동합니다
  • 10.5. 기본값
    • 10.5.1. undefined트리거 기본값
    • 10.5.2. 기본값은 요청 시
    • 10.5.3 으로 계산됩니다. 기본값은 패턴
    • 10.5.4 의 다른 변수를 참조할 수 있습니다. 패턴
    • 의 기본값 10.5.5. 더 복잡한 기본값
  • 10.6. 더 많은 객체 소멸 기능
    • 10.6.1. 속성 값 속기
    • 10.6.2. 계산된 속성 키
  • 10.7. 더 많은 배열 소멸 기능
    • 10.7.1. 제거
    • 10.7.2. 나머지 연산자(...)
  • 10.8. 변수
  • 10.9 이상으로 할당 할 수 있습니다. 파괴의 함정
    • 10.9.1. 중괄호로 문을 시작하지 마십시오
  • 10.10. 소멸의 예
    • 10.10.1. 반환된 배열 소멸
    • 10.10.2. 소멸 객체를 반환
    • 10.10.3. 배열 소멸 반복 가능한 값
    • 10.10.4. 다중 반환 값
  • 10.11. 소멸 알고리즘
    • 10.11.1. 알고리즘
    • 10.11.2. 알고리즘 적용

10.1 개요#

소멸은(아마도 중첩 된)객체와 배열에 저장된 데이터에서 여러 값을 추출하는 편리한 방법입니다. 데이터를 수신하는 위치(예:할당의 왼쪽)에서 사용할 수 있습니다. 값을 추출하는 방법은 패턴을 통해 지정됩니다(예제는 읽어보기).

10.1.1 객체 소멸#

객체 소멸:

const obj = { first: 'Jane', last: 'Doe' };const {first: f, last: l} = obj; // f = 'Jane'; l = 'Doe'// {prop} is short for {prop: prop}const {first, last} = obj; // first = 'Jane'; last = 'Doe'

소멸은 반환 값을 처리하는 데 도움이됩니다:

const obj = { foo: 123 };const {writable, configurable} = Object.getOwnPropertyDescriptor(obj, 'foo');console.log(writable, configurable); // true true

10.1.2 배열 소멸#

배열 소멸(모든 반복 가능한 값에 대해 작동):

const iterable = ;const  = iterable; // x = 'a'; y = 'b'

소멸은 반환 값을 처리하는 데 도움이됩니다:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

10.1.3 파괴는 어디에서 사용할 수 있습니까? #

소멸은 다음 위치에서 사용할 수 있습니다(설명하기 위해 배열 패턴을 보여주고 있습니다.:

// Variable declarations:const  = ;let  = ;var  = ;// Assignments: = ;// Parameter definitions:function f() { ··· }f();

당신은 또한for-of루프에서 파괴 할 수 있습니다:

const arr = ;for (const  of arr.entries()) { console.log(index, element);}// Output:// 0 a// 1 b

10.2 배경:데이터 생성 대 데이터 추출#

파괴가 무엇인지 완전히 이해하려면 먼저 더 넓은 컨텍스트를 살펴 보겠습니다.

자바스크립트는 한 번에 하나의 속성인 데이터를 생성하는 작업을 수행합니다:

const obj = {};obj.first = 'Jane';obj.last = 'Doe';

동일한 구문을 사용하여 데이터를 추출 할 수 있습니다. 다시 한 번에 하나의 속성:

const f = obj.first;const l = obj.last;

또한 개체 리터럴을 통해 여러 속성을 동시에 생성하는 구문이 있습니다:

const obj = { first: 'Jane', last: 'Doe' };

이전에는 데이터를 추출하는 해당 메커니즘이 없었습니다. 즉,소멸 무엇-그것은 당신이 객체 패턴을 통해 객체에서 여러 속성을 추출 할 수 있습니다. 예를 들어,할당의 왼쪽에 있습니다:

const { first: f, last: l } = obj;

패턴을 통해 배열을 파괴 할 수도 있습니다:

const  = ; // x = 'a'; y = 'b'

10.3 파괴 패턴#

다음 두 당사자가 파괴에 관여합니다:

  • 소멸 소스:파괴 할 데이터. 예를 들어,소멸 할당의 오른쪽입니다.
  • 소멸 대상:소멸에 사용되는 패턴. 예를 들어,소멸 할당의 왼쪽입니다.

소멸 대상은 세 가지 패턴 중 하나입니다:

  • 할당 대상. 예를 들어: x
    • 할당 대상은 일반적으로 변수입니다. 그러나 구조화 할당에서는 나중에 설명 할 것이므로 더 많은 옵션이 있습니다.
  • 개체 패턴. 예를 들어: { first: "pattern", last: "pattern" }
    • 객체 패턴의 부분은 속성이며,속성 값은 다시 패턴(재귀 적으로)입니다.
  • 배열 패턴. 예를 들어:
    • 배열 패턴의 부분은 요소이며 요소는 다시 패턴입니다(재귀 적으로).

즉,패턴을 임의로 깊게 중첩 할 수 있습니다:

const obj = { a: , b: true };const { a:  } = obj; // f = 123

10.3.1 필요한 것을 선택하십시오#

객체를 파괴하면 관심있는 속성 만 언급합니다.:

const { x: x } = { x: 7, y: 3 }; // x = 7

배열을 파괴하는 경우 접두사만 추출하도록 선택할 수 있습니다:

const  = ; // x='a'; y='b';

10.4 패턴은 값의 내장에 어떻게 접근합니까? #

할당pattern = someValue에서pattern은someValue내부의 내용에 어떻게 액세스합니까?

10.4.1 객체 패턴은 객체에 값을 강제 적용#

객체 패턴은 속성에 액세스하기 전에 소멸 소스를 객체에 강제 적용합니다. 즉,원시 값과 함께 작동한다는 것을 의미합니다:

const {length : len} = 'abc'; // len = 3const {toString: s} = 123; // s = Number.prototype.toString
10.4.1.1 개체 파괴에 실패 값#

개체에 대한 강제 변환은Object()를 통해 수행되지 않고 내부 작업ToObject()을 통해 수행됩니다. 두 작업은undefined와null을 다르게 처리합니다.

Object()기본 값을 래퍼 객체로 변환하고 객체를 그대로 둡니다.:

> typeof Object('abc')'object'> var obj = {};> Object(obj) === objtrue

It also converts undefined and null to empty objects:

> Object(undefined){}> Object(null){}

In contrast, ToObject() throws a TypeError if it encounters undefined or null. Therefore, the following destructurings fail, even before destructuring accesses any properties:

const { prop: x } = undefined; // TypeErrorconst { prop: y } = null; // TypeError

따라서 빈 개체 패턴{}을 사용하여 값을 개체에 강제 적용할 수 있는지 확인할 수 있습니다. 우리가 보았 듯이undefined와null만:

({} = ); // OK, Arrays are coercible to objects({} = 'abc'); // OK, strings are coercible to objects({} = undefined); // TypeError({} = null); // TypeError

명령문은 자바스크립트에서 중괄호로 시작해서는 안 되기 때문에 표현식 주위의 괄호가 필요합니다(자세한 내용은 나중에 설명합니다).

10.4.2 배열 패턴 반복 가능 작업#

배열 소멸은 반복기를 사용하여 소스의 요소를 가져옵니다. 따라서 반복 가능한 모든 값을 배열 파괴 할 수 있습니다. 반복 가능한 값의 예를 살펴 보겠습니다.

문자열 반복 가능:

const  = 'abc'; // x='a'; y=

문자열 반복자는 코드 단위(“자바 스크립트 문자”,16 비트)가 아닌 코드 포인트(“유니 코드 문자”,21 비트)를 반환한다는 것을 잊지 마십시오. 유니코드에 대한 자세한 내용은”24 장”장을 참조하십시오. 유니 코드 및 자바 스크립트”에서”말하기 자바 스크립트”.)예를 들어:

const  = 'a\uD83D\uDCA9c'; // x='a'; y='\uD83D\uDCA9'; z='c'

인덱스를 통해 세트의 요소에 액세스 할 수는 없지만 반복자를 통해 그렇게 할 수 있습니다. 따라서 배열 소멸은 집합에 대해 작동합니다:

const  = new Set(); // x='a'; y='b';

Set반복기는 항상 삽입된 순서대로 요소를 반환하므로 이전 소멸 결과는 항상 동일합니다.

10.4.2.1 배열 파괴 실패 값#

값이 개체를 반환하는 키가Symbol.iterator인 메서드가 있으면 반복 가능합니다. 배열 소멸은 파괴 될 값이 반복 가능하지 않은 경우TypeError를 발생시킵니다:

let x; = ; // OK, Arrays are iterable = 'abc'; // OK, strings are iterable = { * () { yield 1 } }; // OK, iterable = {}; // TypeError, empty objects are not iterable = undefined; // TypeError, not iterable = null; // TypeError, not iterable

즉,빈 배열 패턴을 사용하여 값이 반복 가능한지 여부를 확인할 수 있습니다:

 = {}; // TypeError, empty objects are not iterable = undefined; // TypeError, not iterable = null; // TypeError, not iterable

10.5 기본값#

기본값은 패턴의 선택적 기능입니다. 원본에 아무 것도 발견되지 않으면 대체를 제공합니다. 파트(개체 속성 또는 배열 요소)가 소스에서 일치하지 않는 경우 다음과 같이 일치합니다:

  • 기본값(지정된 경우; 그것은 선택적입니다)
  • undefined (그렇지 않으면)

의 예를 살펴 보자. 다음 소멸에서 인덱스 0 의 요소는 오른쪽에 일치하지 않습니다. 따라서 소멸은x와 3 을 일치시켜 계속되며,이는x가 3 으로 설정되도록합니다.

const  = ; // x = 3; y = undefined

개체 패턴에서 기본값을 사용할 수도 있습니다:

const {foo: x=3, bar: y} = {}; // x = 3; y = undefined

10.5.1 undefined 트리거 기본값#

파트에 일치 항목이 있고 해당 일치 항목이undefined인 경우에도 기본값이 사용됩니다.:

const  = ; // x = 1const {prop: y=2} = {prop: undefined}; // y = 2

이 동작의 근거는 다음 장의 매개 변수 기본값 섹션에 설명되어 있습니다.#

기본값 자체는 필요할 때만 계산됩니다. 즉,이 파괴:

const {prop: y=someFunc()} = someValue;

다음과 같습니다:

let y;if (someValue.prop === undefined) { y = someFunc();} else { y = someValue.prop;}

당신은 당신이 사용하는 경우 것을 관찰 할 수있다console.log():

> function log(x) { console.log(x); return 'YES' }> const = ;> a'YES'> const = ;> b123

In the second destructuring, the default value is not triggered and log() is not called.

10.5.3 Default values can refer to other variables in the pattern #

A default value can refer to any variable, including other variables in the same pattern:

const  = ; // x=3; y=3const  = ; // x=7; y=7const  = ; // x=7; y=2

그러나 주문이 중요합니다: 변수x및y은 왼쪽에서 오른쪽으로 선언되며 선언 앞에 액세스하면ReferenceError가 생성됩니다:

const  = ; // ReferenceError

10.5.4 패턴의 기본값#

지금까지 변수의 기본값만 보았지만 패턴과 연결할 수도 있습니다:

const  = ;

이것은 무엇을 의미 하는가? 기본값에 대한 규칙 리콜:파트가 원본에서 일치하지 않는 경우 소멸은 기본값으로 계속됩니다.

인덱스 0 의 요소가 일치하지 않기 때문에 소멸이 계속됩니다:

const { prop: x } = {}; // x = undefined

패턴{ prop: x }을 변수로 바꾸면 왜 이런 식으로 작동하는지 더 쉽게 알 수 있습니다pattern:

const  = ;

10.5.5 더 복잡한 기본값#

패턴의 기본값을 자세히 살펴 보겠습니다. 다음 예제에서는 기본값{ prop: 123 }을 통해x에 값을 할당합니다:

const  = ;

인덱스 0 의 배열 요소가 오른쪽에 일치하지 않기 때문에 소멸은 다음과 같이 계속되고x는 123 으로 설정됩니다.

const { prop: x } = { prop: 123 }; // x = 123

그러나x는 기본값이 트리거되지 않기 때문에 오른쪽에 인덱스 0 에 요소가 있는 경우 이러한 방식으로 값이 할당되지 않습니다.

const  = ;

이 경우 소멸은 다음과 같이 계속됩니다:

const { prop: x } = {}; // x = undefined

따라서 개체 또는 속성이 없는 경우x가 123 이 되도록 하려면x자체에 대한 기본값을 지정해야 합니다:

const  = ;

여기서,소멸은 우변이인지인지 독립적으로 다음과 같이 계속된다.

const { prop: x=123 } = {}; // x = 123

10.6 더 많은 객체 소멸 기능#

10.6.1 속성 값 속기#

속성 값 속기는 객체 리터럴의 특징입니다: 속성 값이 속성 키와 이름이 같은 변수인 경우 키를 생략할 수 있습니다. 이 파괴에 대 한 작동,너무:

const { x, y } = { x: 11, y: 8 }; // x = 11; y = 8// Same as:const { x: x, y: y } = { x: 11, y: 8 };

속성 값 약식을 기본값과 결합할 수도 있습니다:

const { x, y = 1 } = {}; // x = undefined; y = 1

10.6.2 계산된 속성 키#

계산된 속성 키는 소멸에 사용할 수 있는 또 다른 개체 리터럴 기능입니다. 속성 키를 대괄호 안에 넣으면 식을 통해 지정할 수 있습니다:

const FOO = 'foo';const { : f } = { foo: 123 }; // f = 123

계산 된 속성 키를 사용하면 키가 기호 인 속성을 파괴 할 수 있습니다:

// Create and destructure a property whose key is a symbolconst KEY = Symbol();const obj = { : 'abc' };const { : x } = obj; // x = 'abc'// Extract Array.prototypeconst { : func } = ;console.log(typeof func); // function

10.7 더 많은 배열 소멸 기능#

10.7.1 제거#

제거 하면 배열”구멍”의 구문을 사용 하 여 소멸 하는 동안 요소를 건너뛸 수 있습니다:

const  = ; // x = 'c'; y = 'd'

10.7.2 나머지 연산자(...) #

나머지 연산자를 사용하면 반복 가능 요소의 나머지 요소를 배열로 추출 할 수 있습니다. 이 연산자가 배열 패턴 내에서 사용되는 경우 마지막에 와야합니다:

const  = ; // x='a'; y=

연산자가 요소를 찾을 수 없으면 해당 피연산자가 빈 배열과 일치합니다. 즉,undefined또는null을 생성하지 않습니다. 예를 들어:

const  = ; // x='a'; y=undefined; z=

나머지 연산자의 피연산자는 변수일 필요는 없으며 패턴도 사용할 수 있습니다:

const ] = ; // x = 'a'; y = 'b'; z = 'c'

나머지 연산자는 다음과 같은 소멸을 트리거합니다:

 =

10.8 변수 이상의 변수에 할당할 수 있습니다#

소멸을 통해 할당하는 경우 각 할당 대상은 일반 할당의 왼쪽에 허용되는 모든 것일 수 있습니다.

예를 들어 속성에 대한 참조(obj.prop):

const obj = {};({ foo: obj.prop } = { foo: 123 });console.log(obj); // {prop:123}

또는 배열 요소에 대한 참조(arr):

const arr = ;({ bar: arr } = { bar: true });console.log(arr); //

나머지 연산자(...)를 통해 개체 속성 및 배열 요소에 할당할 수도 있습니다.:

const obj = {}; = ; // first = 'a'; obj.prop =

소멸을 통해 변수를 선언하거나 매개 변수를 정의하는 경우 간단한 식별자를 사용해야하며 객체 속성 및 배열 요소를 참조 할 수 없습니다.

10.9 소멸의 함정#

소멸을 사용할 때 유의해야 할 두 가지가 있습니다:

  • 중괄호로 문을 시작할 수 없습니다.
  • 소멸하는 동안 변수를 선언하거나 변수를 할당 할 수 있지만 둘 다 할당 할 수는 없습니다.

다음 두 섹션에는 세부 정보가 포함됩니다.

10.9.1 중괄호로 문을 시작하지 마십시오#

코드 블록은 중괄호로 시작하므로 문은 중괄호로 시작해서는 안됩니다. 할당에서 객체 소멸을 사용할 때 이는 불행한 일입니다:

{ a, b } = someObject; // SyntaxError

해결 방법은 전체 식을 괄호 안에 넣는 것입니다:

({ a, b } = someObject); // OK

다음 구문은 작동하지 않습니다:

({ a, b }) = someObject; // SyntaxError

let,var및const를 사용하면 중괄호로 인해 문제가 발생하지 않습니다:

const { a, b } = someObject; // OK

10.소멸의 10 예#

의 몇 가지 작은 예제로 시작하자.

for-of루프는 소멸을 지원합니다:

const map = new Map().set(false, 'no').set(true, 'yes');for (const  of map) { console.log(key + ' is ' + value);}

소멸을 사용하여 값을 바꿀 수 있습니다. 즉 어떤 배열을 만들 수 없습니다 있도록 엔진이 최적화 할 수있는 무언가이다.

 = ;

소멸을 사용하여 배열을 분할 할 수 있습니다:

const  = ; // first = 'a'; rest =

10.10.1 소멸 반환 배열#

일부 내장 자바 스크립트 작업은 배열을 반환합니다. 파괴는 그들을 처리하는 데 도움이됩니다:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

전체 일치all이 아닌 그룹에만 관심이 있는 경우 제거 기능을 사용하여 인덱스에서 배열 요소를 건너뛸 수 있습니다 0:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

exec() 정규식이 일치하지 않으면null을 반환합니다. 불행히도 기본값을 통해null을 처리 할 수 없으므로 이 경우 연산자(||)를 사용해야합니다:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec(someStr) || ;

Array.prototype.split() 배열을 반환합니다. 따라서 배열이 아닌 요소에 관심이 있는 경우 소멸이 유용합니다:

const cells = 'Jane\tDoe\tCTO'const  = cells.split('\t');console.log(firstName, lastName, title);

10.10.2 소멸 반환 된 개체#

소멸 함수 또는 메서드에 의해 반환 되는 개체에서 데이터를 추출 하는 데 유용 합니다. 예를 들어 반복자 메서드next()은done와value의 두 속성을 가진 개체를 반환합니다. 다음 코드는 반복자iter을 통해 배열arr의 모든 요소를 기록합니다. 파괴는 라인에 사용.

const arr = ;const iter = arr();while (true) { const {done,value} = iter.next(); // (A) if (done) break; console.log(value);}

10.10.3 배열 소멸 반복 가능한 값#

배열 소멸 반복 가능한 값과 함께 작동합니다. 그것은 때때로 유용합니다:

const  = new Set().add('a').add('b'); // x = 'a'; y = 'b'const  = 'foo'; // a = 'f'; b = 'o'

10.10.4 다중 리턴 값#

다중 리턴 값의 유용성을 확인하려면p이true를 반환하는a배열의 첫 번째 요소를 검색하는findElement(a, p)함수를 구현해 보겠습니다. 질문:findElement()는 무엇을 반환해야합니까? 때로는 요소 자체,때로는 인덱스,때로는 둘 다에 관심이 있습니다. 다음 구현은 둘 다 반환합니다.

function findElement(array, predicate) { for (const  of array.entries()) { // (A) if (predicate(element, index, array)) { // We found an element: return { element, index }; // Same as (property value shorthands): // { element: element, index: index } } } // We couldn't find anything; return failure values: return { element: undefined, index: -1 };}

이 함수는 배열 메서드entries()을 통해array의 모든 요소를 반복합니다. 쌍의 부분은 파괴를 통해 액세스 할 수 있습니다.

사용하자findElement():

const arr = ;const {element, index} = findElement(arr, x => x % 2 === 0); // element = 8, index = 1

콜백은 화살표 함수이며,반환 값은 속성 값 속기와 객체 패턴을 통해 파괴된다.

index및element으로 인해 속성 키를 언급하는 순서는 중요하지 않습니다. 우리는 그들을 바꿀 수 있고 아무것도 변하지 않습니다:

const {index, element} = findElement(···);

우리는 인덱스와 요소를 모두 필요로하는 경우를 성공적으로 처리했습니다. 우리가 그들 중 하나에만 관심이 있다면 어떨까요? 그 결과,우리의 구현도 그 문제를 해결할 수 있습니다. 그리고 단일 반환 값을 가진 함수에 비해 구문 오버 헤드가 최소화됩니다.

const a = ;const {element} = findElement(a, x => x % 2 === 0); // element = 8const {index} = findElement(a, x => x % 2 === 0); // index = 1

매번,우리는 단지 우리가 필요로 하는 1 개의 재산의 가치를 추출한다.

10.11 소멸 알고리즘#

이 섹션에서는 재귀 패턴 일치 알고리즘으로 다른 각도에서 소멸 알고리즘을 살펴 봅니다.

마지막에 알고리즘을 사용하여 다음 두 함수 선언의 차이를 설명하겠습니다.

function move({x=0, y=0} = {}) { ··· }function move({x, y} = { x: 0, y: 0 }) { ··· }

10.11.1 알고리즘#

소멸 할당은 다음과 같습니다:

"pattern" = "value"

pattern을 사용하여value에서 데이터를 추출하려고합니다. 이제 함수형 프로그래밍에서 패턴 일치(짧은:일치)로 알려진 알고리즘을 설명하겠습니다. 알고리즘은pattern과value과 일치하고 변수에 할당하는 소멸 할당에 대한 연산자←(“일치”)를 지정합니다:

"pattern" ← "value"

알고리즘은←연산자의 두 피연산자를 구분하는 재귀 규칙을 통해 지정됩니다. 선언적 표기법은 익숙해지는 데 다소 걸릴 수 있지만 알고리즘의 사양을 더 간결하게 만듭니다. 각 규칙에는 두 부분이 있습니다:

  • 머리(첫 번째 줄)는 규칙을 트리거하는 조건을 설명합니다.
  • 본문(나머지 줄)은 규칙이 트리거되면 어떻게 되는지 설명합니다.

예를 살펴 보겠습니다.:

  • (2) {key: "pattern", "properties"} ← obj
     "pattern" ← obj.key {"properties"} ← obj
  • (2 이자형){} ← obj(왼쪽 속성 없음)
     // Nothing to do

에 규칙(2 기음),헤드는 하나 이상의 속성과 0 개 이상의 나머지 속성을 가진 객체 패턴이있는 경우이 규칙이 실행됨을 의미합니다. 이 패턴은obj값과 일치합니다. 이 규칙의 효과는 속성 값 패턴이obj.key에 대해 일치되고 나머지 속성이obj에 대해 일치되는 상태에서 실행이 계속된다는 것입니다.헤드는 빈 객체 패턴{}이obj값과 일치하는 경우 이 규칙이 실행됨을 의미합니다. 그런 다음 할 일이 없습니다.

알고리즘이 호출될 때마다 규칙은 위에서 아래로 체크되고 적용되는 첫 번째 규칙만 실행됩니다.

소멸 할당 알고리즘 만 표시합니다. 변수 선언 소멸과 매개 변수 정의 소멸도 비슷하게 작동합니다.

고급 기능(계산 된 속성 키,속성 값 속기)은 다루지 않습니다; 객체 속성 및 배열 요소를 할당 대상으로 함). 만 기본.

10.11.1.1 패턴#

패턴은 다음 중 하나입니다:

  • 변수: x
  • 개체 패턴: {"properties"}
  • 배열 패턴:

다음 각 절에서는 이 세 가지 사례 중 하나를 설명합니다.

다음 세 섹션에서는 이러한 세 가지 경우를 처리하는 방법을 지정합니다. 각 섹션에는 하나 이상의 번호가 매겨진 규칙이 포함되어 있습니다.

10.11.1.2 변수#
  • (1) x ← value (포함undefined및null)
     x = value
10.11.1.3 개체 패턴#
  • (2) {"properties"} ← undefined
     throw new TypeError();
  • (2) {"properties"} ← null
     throw new TypeError();
  • (2) {key: "pattern", "properties"} ← obj
     "pattern" ← obj.key {"properties"} ← obj
  • (2 차원) {key: "pattern" = default_value, "properties"} ← obj
     const tmp = obj.key; if (tmp !== undefined) { "pattern" ← tmp } else { "pattern" ← default_value } {"properties"} ← obj
  • (2 이자형){} ← obj(왼쪽 속성 없음)
     // Nothing to do
10.11.1.4 배열 패턴#

배열 패턴 및 반복 가능. 배열 소멸에 대한 알고리즘은 배열 패턴과 반복 가능한 배열로 시작합니다.:

  • (3) ← non_iterable
    assert(!isIterable(non_iterable))
     throw new TypeError();
  • (3) ← iterable
    assert(isIterable(iterable))
     const iterator = iterable(); "elements" ← iterator

도우미 기능:

function isIterable(value) { return (value !== null && typeof value === 'object' && typeof value === 'function');}

배열 요소와 반복자. 알고리즘은 패턴의 요소(화살표의 왼쪽)와 반복 가능 요소(화살표의 오른쪽)에서 얻은 반복기로 계속됩니다.

  • (3) "pattern", "elements" ← iterator
     "pattern" ← getNext(iterator) // undefined after last item "elements" ← iterator
  • (3 차원) "pattern" = default_value, "elements" ← iterator
     const tmp = getNext(iterator); // undefined after last item if (tmp !== undefined) { "pattern" ← tmp } else { "pattern" ← default_value } "elements" ← iterator
  • (3), "elements" ← iterator(홀,제거)
     getNext(iterator); // skip "elements" ← iterator
  • (3 층)..."pattern" ← iterator(항상 마지막 부분!)
     const tmp = ; for (const elem of iterator) { tmp.push(elem); } "pattern" ← tmp
  • (3 그램)← iterator(요소 왼쪽)
     // Nothing to do

도우미 기능:

function getNext(iterator) { const {done,value} = iterator.next(); return (done ? undefined : value);}

10.11.2 호출자가 개체 리터럴을 사용하고 호출 수신자가 소멸을 사용하는 경우 명명된 매개 변수를 시뮬레이션할 수 있습니다. 이 시뮬레이션은 매개 변수 처리 장에서 자세히 설명합니다. 함수move1()에는x와y: 

function move1({x=0, y=0} = {}) { // (A) return ;}move1({x: 3, y: 8}); // move1({x: 3}); // move1({}); // move1(); //

다음 세 가지 기본값은 다음과 같습니다:

  • 처음 두 기본값을 사용하면x및y을 생략할 수 있습니다.
  • 세 번째 기본값은(마지막 줄에서와 같이)매개 변수없이move1()를 호출 할 수 있습니다.

하지만 왜 이전 코드 조각에서와 같이 매개 변수를 정의합니까? 왜 다음과 같이-또한 완전히 합법적 인 코드입니까?

function move2({x, y} = { x: 0, y: 0 }) { return ;}

move1()가 올바른 이유를 확인하려면 두 가지 예제에 두 함수를 모두 사용합시다. 우리가 그렇게하기 전에,의 매개 변수의 전달이 일치를 통해 설명 할 수있는 방법을 살펴 보자.

10.11.2.1 배경:#

일치를 통해 매개 변수 전달 함수 호출의 경우 형식 매개 변수(함수 정의 내부)가 실제 매개 변수(함수 호출 내부)와 일치합니다. 예를 들어 다음 함수 정의 및 함수 호출을 수행합니다.

function func(a=0, b=0) { ··· }func(1, 2);

매개 변수a및b는 다음 소멸과 유사하게 설정됩니다.

 ←
10.11.2.2 사용move2() #

move2()에 대해 소멸이 어떻게 작동하는지 살펴 보겠습니다.

실시예 1. move2()이 파괴로 이어집니다.:

 ←

왼쪽의 단일 배열 요소는 오른쪽에 일치 항목이 없습니다.:

{x, y} ← { x: 0, y: 0 }

왼쪽에는 속성 값 약어가 포함되어 있습니다.:

{x: x, y: y} ← { x: 0, y: 0 }

이 소멸은 다음 두 가지 할당으로 이어집니다., 1):

x = 0;y = 0;

예 2. 다음 소멸로 이어지는 함수 호출move2({z:3})을 살펴보겠습니다:

 ←

오른쪽에 인덱스 0 에 배열 요소가 있습니다. 따라서 기본값은 무시되고 다음 단계는(규칙 3 차원):

{x, y} ← { z: 3 }

그러면x와y이 모두undefined로 설정되며 이는 우리가 원하는 것이 아닙니다.

10.11.2.3 사용move1() #

move1()를 시도해 봅시다.

예 1: move1()

 ←

우리는 오른쪽 인덱스 0 에 배열 요소를 가지고 있지 않으며 기본값(규칙 3 차원)을 사용합니다):

{x=0, y=0} ← {}

왼쪽에는 속성 값 약식이 포함되어 있습니다.:

{x: x=0, y: y=0} ← {}

속성x도 속성y도 오른쪽에 일치 항목이 없습니다. 따라서 기본값이 사용되며 다음에 다음 소멸이 수행됩니다(규칙 2 차원):

x ← 0y ← 0

이는 다음 할당(규칙)으로 이어집니다 1):

x = 0y = 0

예시 2: move1({z:3})

 ←

배열 패턴의 첫 번째 요소는 오른쪽에 일치 항목이 있으며 이 일치 항목은 계속 소멸하는 데 사용됩니다(규칙 3 차원).:

{x=0, y=0} ← {z:3}

예제 1 과 마찬가지로 오른쪽에는 속성x및y이 없으며 기본값이 사용됩니다:

x = 0y = 0
10.11.2.4 결론#

이 예는 기본값이 패턴 부분(객체 속성 또는 배열 요소)의 특징임을 보여줍니다. 파트가 일치하지 않거나undefined와 일치하는 경우 기본값이 사용됩니다. 즉,패턴이 대신 기본값과 일치합니다.