집 > 기사 > 웹 프론트엔드 > ES6 데이터 분해에 대한 자세한 해석

ES6 데이터 분해에 대한 자세한 해석

亚连원래의: 2018-06-12 11:38:011934검색

이 기사에서는 ES6 데이터 분해 사용법에 대한 심층적인 이해를 소개하고 이를 참고할 수 있습니다.

1 객체 구조 분해

객체 분해 구문은 대입문 왼쪽의 객체 리터럴을 사용합니다

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 또는 정의되지 않은 것으로 평가되면 오류가 발생합니다.

기본값

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

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"]

3가지 혼합 해체

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 데이터 분해에 대한 자세한 해석

관련 기사