ES6 학습 변수 분해 및 할당

가끔은 너무 많은 변수를 작성하는 것이 정말 귀찮고 지루하고 거의 반복적인 작업이 많습니다. es6에서는 변수를 선언하고 변수를 할당하는 등 더욱 편리한 다양한 방법을 제공합니다. 다음 글에서는 ES6의 변수 구조해제와 할당에 관한 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

변수 구조 분해 할당

ES6에서는 특정 패턴과 변수 할당에 따라 배열과 객체에서 추출이 가능합니다.

배열의 구조 분해 할당

var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

위 코드는 배열에서 값을 추출하여 변수에 할당할 수 있음을 나타냅니다. 해당 위치.

본질적으로 이런 작성 방식은 "패턴 매칭"입니다. 등호 양쪽의 패턴이 동일한 한 왼쪽의 변수에 해당 값이 할당됩니다.

let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;

let [,,third] = ['foo','bar','baz'];
third //'baz'

let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]

구조 분해에 실패하면 변수 값은 정의되지 않은 값이 됩니다.

let [x,y,z] = ['a']
x // 'a';
y // undefined
z //[]

불완전한 분해

등호 왼쪽의 패턴이 배열의 일부에만 일치하는 경우 등호 오른쪽에 있는 구조 분해는 여전히 성공할 수 있습니다. 이 상황을 불완전 분해라고 합니다.

let [x,y] = [1,2,3]
x //1
y //2

등호 오른쪽이 배열이 아닌 경우 오류가 발생합니다. (횡단 가능한 구조가 없습니다).

특정 데이터 구조에 Iterator 인터페이스가 있는 한 배열 형태의 구조 분해 할당을 사용할 수 있습니다

function* fibs(){
 var a = 0;
 var b = 1;
 while(true){
  yield a;
  [a,b] = [b,a+b];
 }
}

var [first,second,third,fourth,fifth,sixth] = fibs();
sixth // 5

fibs는 기본적으로 Iterator 인터페이스가 있는 생성기 함수, 구조 분해 할당은 이 인터페이스에서 값을 차례로 가져옵니다.

기본값

구조 분해 할당을 사용하면 기본값을 지정할 수 있습니다.

var [foo=true] = [];
foo //true

ES6은 내부적으로 엄격한 동등 연산자(===)를 사용하여 위치에 값이 있는지 확인합니다. 따라서 배열 멤버가 정의되지 않음과 엄밀히 동일하지 않으면 기본값이 적용되지 않습니다.

var [x = 1] = [undefined]
x // 1

var [x = 1] = [null]
x // null

표현식을 기본값으로 사용할 수도 있습니다. 표현식은 지연 평가되며 다음과 같은 경우에만 사용됩니다. 그 가치는 때가 되면 평가될 것이다.

function f(){
 console.log('aaa')
}

let [x = f()] = [1]

위 코드에서는 x가 값을 얻을 수 있으므로 함수 f는 실행되지 않습니다.

기본값은 구조분해 할당의 다른 변수를 참조할 수 있으나 해당 변수가 선언되어 있어야 합니다.

객체의 구조 분해 할당

구조 분해 할당은 객체뿐만 아니라 배열에도 적용할 수 있습니다.

 var {foo,bar} = {foo:'aaa',bar:'bbb'}
 foo // 'aaa'
 bar // 'bbb'

객체와 배열의 구조 분해 할당의 한 가지 차이점은 배열의 요소가 순서대로 정렬되고 변수의 값이 해당 항목에 따라 결정된다는 것입니다. 위치 개체의 속성은 순서가 없으며 올바른 값을 얻으려면 변수의 이름이 속성과 동일해야 합니다.

var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'


var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined

변수 이름이 속성 이름과 일치하지 않는 경우 다음과 같이 작성해야 합니다.

var {foo:baz} = {foo:'aaa'}
baz //'aaa'

사실 객체의 구조 분해 할당은 다음 형식의 약어입니다.

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

객체의 구조 분해 할당의 내부 메커니즘 객체는 먼저 동일한 이름을 가진 속성을 찾은 다음 해당 변수에 할당하는 것입니다. 해당 변수의 경우 실제로 값이 할당되는 것은 전자가 아니라 후자입니다.

단, 위 작성방법을 사용하는 경우 변수의 선언과 할당이 함께 이루어집니다. let과 const의 경우 변수를 다시 선언할 수 없으므로 이전에 할당된 변수를 한 번 선언하면 오류가 발생합니다.

객체 해체는 중첩된 객체에도 사용할 수 있습니다.

var obj = {
 p: [
  'hello' ,
  {
   y : 'world'
  }
 ]
}

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

이때 p는 변수가 아닌 패턴이므로 값이 할당되지 않습니다.

객체의 구조 분해 할당은 기본값을 지정할 수도 있습니다. 기본값의 유효 조건은 객체의 속성 값이 정의되지 않음과 동일하다는 것입니다.

var {x=3} = {x:undefined}
x //3

var {x=3} = {x:null}
x //null

구조 분해 모드가 중첩 객체이고 하위 객체가 위치한 상위 속성이 없으면 오류가 보고됩니다.

var {foo:{bar}} = {baz:'baz'}

ES6 학습의 변수 구조 분해 및 할당과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!