ES6 범위 및 구조화를 기반으로 한 할당에 대한 자세한 설명

이 글에서는 ES6 기반의 범위와 구조화 할당에 대해 자세히 설명합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

ES6에서는 엄격 모드를 강제로 활성화합니다.

Scope

•var는 지역 변수를 선언합니다. for/if 중괄호에 정의된 변수는 중괄호 외부에서도 액세스 가능합니다.

•let은 블록 범위에서 변수를 선언하지만 변수는 선언할 수 없습니다. 반복되는 정의

•const는 상수, 블록 범위를 선언하며 선언 시 할당해야 하며 수정할 수 없습니다.

// const声明的k指向一个对象，k本身不可变，但对象可变

function test() {
 const k={
  a:1
 }
 k.b=3;
 
 console.log(k);
}

test() 구조 분해 할당

{
 let a, b, 3, rest;
 [a, b, c=3]=[1, 2];

 console.log(a, b);
}
//output: 1 2 3

{
 let a, b, 3, rest;
 [a, b, c]=[1, 2];

 console.log(a, b);
}
//output: 1 2 undefined

{
 let a, b, rest;
 [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
 console.log(a, b, rest);
}
//output:1 2 [3, 4, 5, 6]

{
 let a, b;
 ({a, b} = {a:1, b:2})

 console.log(a ,b);
}
//output: 1 2

사용 시나리오

변수 교환

{
 let a = 1;
 let b = 2;
 [a, b] = [b, a];
 console.log(a, b);
}

여러 함수 값 가져오기

{
 function f(){
  return [1, 2]
 }
 let a, b;
 [a, b] = f();
 console.log(a, b);
}

다중 함수 반환 값 가져오기

{
 function f(){
  return [1, 2, 3, 4, 5]
 }
 let a, b, c;
 [a,,,b] = f();
 console.log(a, b);
}
//output: 1 4

{
 function f(){
  return [1, 2, 3, 4, 5]
 }
 let a, b, c;
 [a, ...b] = f();
 console.log(a, b);
}
//output: 1 [2, 3, 4, 5]

객체 분해 및 할당

{
 let o={p:42, q:true};
 let {p, q, c=5} = o;

 console.log(p ,q);
}
//output: 42 true 5

json 값 가져오기

{
 let metaData={
  title: 'abc',
  test: [{
   title: 'test',
   desc: 'description'
  }]
 }
 let {title:esTitle, test:[{title:cnTitle}]} = metaData;
 console.log(esTitle, cnTitle);
}
//Output: abc test

관련 권장 사항:

ES6의 새로운 배열 배열 방법에 대한 자세한 예

es6의 적용에 대한 자세한 예 React

ES6의 JavaScript 함수 바인딩과 클래스 이벤트 바인딩 기능에 대한 자세한 설명

위 내용은 ES6 범위 및 구조화를 기반으로 한 할당에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!