자 바스 크 립 트 ES6 문법 전개 및 할당 해제 문법

전개 문법
문법 (Spread syntax) 을 펼 치면 함수 호출 이나 배열 구 조 를 구성 할 때 배열 식 이나 string 을 문법 적 으로 펼 칠 수 있 습 니 다.또한 글자 의 대상 을 구성 할 때 대상 표현 식 버튼 값 을 펼 칠 수 있 습 니 다.
함수 매개 변수 전개

function fun(a, b, c) {
    console.log(a, b, c)
}
let args = [1, 2, 3]
fun(...args)
// 1 2 3

function fun1(a, b, c, d) {
    console.log(a, b, c, d)
}
let args = [2, 3]
fun1(1, ...args, 4)
// 1 2 3 4

배열 사용 전개 문법

let array1 = [1, 2, 3]
let array2 = ['hello', ...array1]
console.log(array2) // ["hello", 1, 2, 3]

배열 의 깊 은 복사

let array1 = [1, 2, 3]
let array2 = array1 
let array3 = [...array1]
array2.push(4);
array3.push(5)
console.log(array1) // [1, 2, 3, 4]
console.log(array2) // [1, 2, 3, 4]
console.log(array3) // [1, 2, 3, 5]

대상 전개 문법

let obj1 = { foo: 'bar', x: 42 }
let obj2 = { foo: 'baz', y: 13 }

let clonedObj = { ...obj1 } //       : { foo: "bar", x: 42 }

let mergedObj = { ...obj1, ...obj2 } //       : { foo: "baz", x: 42, y: 13 }

넓히다
남 은 문법 (남 은 매개 변수):
나머지 문법 (Rest syntax) 은 전개 문법 과 똑 같 아 보 입 니 다. 다른 점 은 나머지 매개 변 수 는 배열 과 대상 을 재 구성 하 는 데 사 용 됩 니 다.특정한 의미 에서 볼 때 잉여 문법 은 전개 문법 과 반대 된다. 전개 문법 은 배열 을 그 중의 각 요소 로 전개 하고 나머지 문법 은 여러 요 소 를 수집 하여 '응집' 을 하나의 요소 로 한다.

function fun(a, b, ...theArgs) {
  console.log(a, b, theArgs)
}
fun(1, 2, 3, 4, 5) // 1 2 [3, 4, 5]

나머지 매개 변수 와 arguments 대상 간 의 차 이 는 주로 세 가지 가 있다.

나머지 매개 변 수 는 대응 하 는 형 삼 이 없 는 실 삼 만 포함 하고 arguments 대상 은 함수 에 전 달 된 모든 실 삼 을 포함한다.

arguments 대상 은 진정한 배열 이 아니 라 나머지 매개 변 수 는 진정한 Array 사례 이다. 즉, 그 위 에 모든 배열 방법 을 직접 사용 할 수 있다 는 것 이다. 예 를 들 어 sort, map, forEach 또는 pop.

arguments 대상 은 추가 적 인 속성 (예 를 들 어 callee 속성 도 있다.

할당 해제
할당 을 해제 하면 속성 이나 값 을 대상 이나 배열 에서 꺼 내 다른 변수 에 할당 할 수 있 습 니 다.
재 구성 배열 은 수치 배열 의 요 소 를 변수 데이터 와 대응 시 키 고 배열 의 위치 가 일치 하 는 값 을 등호 왼쪽 위치 와 같은 변수 에 할당 하 는 것 입 니 다.
재 구성 대상 은 같은 키 의 대상 을 상대 적 으로 재 구성 할당 하 는 것 이다.

let a, b, c
//       (    ) ↓
let [a, b] = [1, 2] //            
[a, b] = [1, 2] //             
console.log(a, b) // 1 2
[a, b] = [1, 2, 3, 4]
console.log(a, b) // 1 2

[a, b, ...c] = [1, 2, 3, 4, 5]
console.log(a, b, c); // 1 2 [1, 2, 3, 4, 5]

//       (    ) ↓
let {a, b} = {a: 10, b: 20} //       
console.log(a, b); // 10 20
({a, b} = {a: 10, b: 20}) //        
console.log(a, b); // 10 20
({a, b, ...c} = {a: 10, b: 20, c: 30, d: 40, e: 50}) // Rest      (    )
console.log(a, b, c) // 10 20 {c: 30, d: 40, e: 50}

주의:
할당 문 주위 의 괄호 ( ... ) 는 대상 이 할당 을 설명 하지 않 을 때 필수 입 니 다.{a, b} = {a: 10, b: 20} 효과 적 인 독립 문법 이 아니 라 왼쪽 {a, b} 은 대상 글자 의 양 이 아니 라 하나의 조각 으로 여 겨 지기 때문이다.
그러나 ({a, b} = {a: 1, b: 2}) 는 유효 하 다. 마치 var {a, b} = {a: 1, b: 2} 와 같다.
주의해 야 할 것 은 ( ... ) 표현 식 전에 분점 이 있어 야 합 니 다. 그렇지 않 으 면 이전 줄 의 함수 로 실 행 될 수 있 습 니 다.

let a, b
console.log('hello')
({a, b} = {a:1, b:2})
console.log(a, b)

// Uncaught TypeError: console.log(...) is not a function

다음은 부정 확 한 할당 방법 입 니 다.

//         ↓
let c = {a: 1, b: true}
let a, b
{a, b} = c

// Uncaught SyntaxError: Unexpected token '='

//         ↓
let c = {a: 1, b: true}
let {a, b} = c
//  
let c = {a: 1, b: true}
let a, b
({a, b} = c)

( ... ) 표현 식 이 성명 이 없 을 때 값 을 부여 하면 분점 이 있 든 없 든 영향 을 주지 않 습 니 다.
재 구성 할당 에서 배열 에서 값 을 undefined 로 추출 하 는 것 을 방지 하기 위해 기본 값 을 제공 합 니 다. 다시 말 하면 변수 수량 이 배열 수량 보다 적 을 때 불필요 한 변수 에 기본 값 을 부여 하 는 것 을 방지 하기 위해 서 입 니 다.

let a, b

[a, b] = [1]
console.log(a, b) // 1 undefined

[a, b=2] = [1]
console.log(a, b) // 1 2

let {a, b = 5} = {a: 1};
console.log(a, b); // 1 5

그 밖 에 구조 할당 문법 을 이용 하여 변 수 를 더욱 간편 하 게 교환 할 수 있 습 니 다.

let a=1, b=2
console.log(a, b) // 1 2
[a, b] = [b, a]
console.log(a, b) // 2 1

부분 값 무시

let a, b
[a,, b] = [1, 2, 3]
console.log(a, b) // 1 3

물론 모든 값 을 무시 해도 되 지만 의미 가 없 는 것 같 습 니 다.

[,,] = [1, 2, 3]

재 구성 대상 이 새로운 변수 이름 에 값 을 부여 합 니 다.

let c = {a: 1, b: true};
let {a: foo, b: bar} = c;
 
console.log(foo, bar); // 1 true

재 구성 대상 은 새로운 변수 이름 에 값 을 부여 하고 기본 값 을 제공 합 니 다.

var {a:foo, b:bar = 5} = {a: 3};
console.log(foo, bar); // 3 5

넓히다
포 함 된 대상 과 배열 을 재 구성 합 니 다.

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung'
    }
  ],
  url: '/en-US/docs/Tools/Scratchpad'
};

let {
  title: englishTitle, // rename
  translations: [
    {
       title: localeTitle, // rename
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

For of 교체 와 재 구성

let people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (var {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

함수 실 삼 대상 에서 데 이 터 를 추출 하 다.

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

ECMAScript 2015 부터 대상 초기 화 문법 부터 속성 명 계산 을 지원 합 니 다.[] 에 표현 식 을 넣 을 수 있 습 니 다. 결 과 를 속성 명 으로 계산 할 수 있 습 니 다.속성 명 을 계산 하면 재 구성 할 수 있 습 니 다.

let key = "z";
let {[key]: foo} = {z: "bar"};

console.log(foo); // "bar"