집 > 기사 > 웹 프론트엔드 > ES6 데이터 분해에 대한 심층적인 이해

ES6 데이터 분해에 대한 심층적인 이해

小云云원래의: 2018-01-15 09:08:201235검색

ES6 데이터 분해에 대해 다들 들어보셨을 거라 생각합니다. 이 글은 주로 ES6 데이터 분해의 사용법을 이해하는 데 도움이 될 것 같아서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

객체 해체

객체 해체 구문은 할당 문의 왼쪽에 있는 객체 리터럴을 사용합니다

let node = {
  type: true,
  name: false
}

//既声明又赋值
let {
  type,
  name
} = node;

//或者先声明再赋值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false

유형 및 이름 식별자는 지역 변수를 선언할 뿐만 아니라 해당 속성 값도 읽습니다. 객체의 .

구조 분해 할당 표현식의 값은 표현식 오른쪽의 값입니다. 구조 분해 표현식의 오른쪽이 null 또는 정의되지 않은 것으로 평가되면 오류가 발생합니다.

기본값

구조 분해 할당문을 사용할 때 지정된 로컬 변수가 객체에서 동일한 이름을 가진 속성을 찾지 못하면 해당 변수에 정의되지 않은 값이 할당됩니다

let node = {
  type: true,
  name: false
},
  type, name, value;
({type,value,name} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//undefined

다음을 수행할 수 있습니다. 선택적으로 정의합니다. 지정된 속성이 존재하지 않는 경우 사용할 기본값입니다.

let node = {
    type: true,
    name: false
  },
  type, name, value;
({
  type,
  value = true,
  name
} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//true

다른 지역 변수 이름에 값 할당

let node = {
  type: true,
  name: false,
  value: "dd"
}
let {
  type: localType,
  name: localName,
  value: localValue = "cc"
} = node;
console.log(localType);
console.log(localName);
console.log(localValue);

type:localType 이 구문은 type이라는 속성을 읽고 해당 값을 localType 변수에 저장한다는 의미입니다. 이 구문은 기존 객체 리터럴의 구문과 반대입니다

중첩 객체 구조

let node = {
type: "Identifier",
name: "foo",
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
}
}

let {
loc: localL,
loc: {
  start: localS,
  end: localE
}
} = node;

console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}

콜론 오른쪽에 중괄호가 있으면 대상이 객체의 더 깊은 곳에 중첩되어 있음을 의미합니다(loc: { start: localS, end: localE})

두 번째 데이터 구조 분해

배열 구조 분해의 구문은 객체 리터럴이 배열 리터럴로 대체된다는 점을 제외하면 객체 구조 분해와 매우 유사합니다.

let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow

또한 구조 분해 모드에서 일부 항목을 무시하고 관심 있는 항목에만 변수 이름을 제공할 수도 있습니다.

let colors = ["red","green","blue"];

let [,,thirdC] = colors;
console.log(thirdC);//blue

thirdC 앞의 쉼표는 배열의 이전 항목에 제공된 자리 표시자입니다. 이 방법을 사용하면 다른 항목 이름을 지정하지 않고도 배열의 어느 위치에서나 값을 쉽게 검색할 수 있습니다.

구조 분해 할당

let colors = ["red","green","blue"],
  firstColor = "black",
  secondColor = "purple";
[firstColor,secondColor] = colors;
console.log(firstColor);//red
console.log(secondColor);//green

배열 분해는 두 변수의 값을 쉽게 교환할 수 있는 매우 독특한 사용 사례를 가지고 있습니다.

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

중첩 해체

let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue

남은 항목

let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue

나머지 항목을 활용하면 배열 복제에 활용 가능

let colors = ["red", "green", "blue"];
let [...restC] = colors;
console.log(restC);//["red", "green","blue"]

트리플 믹스 해체

let node = {
type: "Identifier",
name: &#39;foo&#39;,
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
},
range: [0, 3]
}

let {
type,
name: localName,
loc: {
  start: {
    line: ll
  },
  end: {
    column: col
  }
},
range: [, second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

ES6 데이터 분해에 대한 심층적인 이해

관련 기사