JavaScript 분해 할당을 이해하도록 안내합니다.

관련 권장 사항: JavaScript 학습 튜토리얼

개념

ES6은 배열 및 객체에서 값을 추출하기 위한 보다 간결한 할당 모드를 제공합니다. 이를 구조 분해라고 합니다.

예:

[a, b] = [50, 100];
console.log(a);
// 예상 출력: 50
console.log(b);
// 예상 출력: 100

[a, b, ...휴식] = [10, 20, 30, 40, 50];
console.log(휴식);
// 예상 출력: [30, 40, 50]

배열 해체 배열

해체는 할당 표현식의 왼쪽에 배열 리터럴을 사용합니다. 배열 리터럴의 각 변수 이름은 구조 해제된 항목의 동일한 인덱스에 매핑됩니다. 항목은 무엇을

의미하나요? 아래 예시처럼 왼쪽 배열의 항목은 오른쪽 배열의 해당 인덱스 값을 가져옵니다.

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

별도의 할당을 선언합니다.

변수 선언을 통해 할당을 별도로 분해할 수 있습니다.

예: 변수 선언, 값을 별도로 할당

// 변수 선언 let a, b;
// 그런 다음 값을 할당합니다. [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Destructuring 기본값

Destructuring에 의해 꺼낸 값이 undefined 경우 기본값을 설정할 수 있습니다:

let a, b;
// 기본값 설정 [a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

위의 예에서는 a와 b 모두에 대해 기본값을 설정했습니다. 이 경우 a 또는 b의 값이 undefined 되지 않으면 설정된 기본값이 해당에 할당됩니다. 변수(5는 a에 할당, 7은 b에 할당)

변수 값 교환

이전에는 두 변수를 교환할 때 항상

//exchange abc = a;a = b;b = c

;

그러나 분해 할당에서는 분해 표현식에서 두 변수의 값을 교환할 수 있습니다

let a = 1; let b = 3;//a와 b의 값을 교환합니다 [a, b] = [b, a]; console.log( a); // 3console.log(b); // 1

배열을

반환하는 함수를 직접 분해할 수 있습니다

.

  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b) // 20

위의 예에서는 **

반환 값을 무시하거나 특정 항목을 건너뛰기 위해

별도의 코드 줄에서 사용할 수 있습니다

원하지 않는 일부 반환 값을 선택적으로 건너뛸 수 있습니다

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

배열의 나머지 값을 a에 할당합니다.

분해

를 사용할 때 할당된 배열의 나머지 부분을 모두 변수에 할당할 수 있습니다.

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

이 경우 b도 배열이 되며 배열의 항목은 모두 나머지 항목입니다

.
여기서는 끝에 쉼표를 쓸 수 없으므로 주의하세요. 추가로 쉼표가 있으면 오류가 보고됩니다.

let [a, ...b,] = [1, 2, 3];// SyntaxError: Rest element 뒤에 쉼표가 없어야 함 중첩된

배열 구조 분해

객체처럼 배열도 중첩될 수 있습니다.

예:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// 중첩된 구조분해를 사용하여 빨간색, 녹색, 파란색을 할당합니다.
// 중첩된 구조 분해를 사용하여 빨간색, 녹색, 파란색을 할당합니다.
const [16진수, [빨간색, 녹색, 파란색]] = 색상;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

문자열 분해

배열 분해에서 분해 대상이 순회 가능한 객체인 경우 분해 및 할당이 수행될 수 있습니다. 데이터

let [a, b, c, d, e] = 'hello';/*
a = 'h'
b = 'e'
c = '엘'
d = '엘'
전자 = '오'
*/

객체 해체

기본 객체 해체

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x의 약어 console.log(y);
console.log(z); //

새로운 변수 이름에 true가 할당됩니다.

객체 구조 분해를 사용하면 변수 이름이 변경될 수 있습니다.

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

console.log(foo); // 22
console.log(bar); // 위와 같은 실제

코드 var {p: foo} = o 객체 o의 속성 이름 p를 가져온 다음 foo라는 변수에 할당

합니다

.

구조 분해에 의한 출력은 undefined . 기본값을 설정할 수 있습니다.

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

새 객체 이름에 값을 할당하고 기본값을 제공합니다.

앞서 언급한 것처럼 새 객체 이름에 값을 할당할 수 있습니다. , 분해되지 않으면 기본값이 자동으로 사용됩니다.

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

배열과 객체 분해를 동시에 사용합니다.

배열과 객체는 구조에서 함께 사용할 수 있습니다

const props = [
  { ID: 1, 이름: '피즈' },
  { ID: 2, 이름: '버즈' },
  { ID: 3, 이름: 'FizzBuzz' },
];

const [, , { 이름 }] = 소품;
console.log(name); // "FizzBuzz"는

완전히 분해되지 않았습니다.

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//x를 분해하지 않음

// x = 정의되지 않음
// y = 'world'는

남은 값을 객체에 할당합니다.

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// 나머지 = {c: 30, d: 40}

중첩된 객체 구조 분해(구조 분해는 무시 가능)

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = '안녕하세요'
// y = '세계'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj;//y 무시
// x = 'hello'

참고:

오류 데모를

위해 선언된 변수를 사용할 때 주의하세요

let x;{x} = {x: 1};

JavaScript 엔진은 {x} 코드 블록으로 이해하여 구문을 생성합니다. 오류가 발생했습니다. JavaScript가 코드 블록으로 해석하지 못하도록 줄 시작 부분에 중괄호를 쓰지 않으려고 합니다.

올바른

작성

방법

:

let

function add([x, y]) {
	return x + y;}add([1, 2]);

위 코드에서 함수 add의 매개변수는 표면적으로는 배열이지만, 매개변수를 전달하면 배열 매개변수가 변수 x와 y로 분해됩니다. 함수 내부적으로는 x와 y를 직접 전달하는 것과 같습니다.

변수의 값을 교환하는

방법

이 많이 있습니다

.
y=2라고 하자;
[x, y] = [y, x];

위 코드는 x와 y의 값을 교환합니다. 이 작성 방법은 간결할 뿐만 아니라 읽기 쉬우며

여러 값을 반환하는

함수에서

하나의 값만 반환할 수 있습니다. 여러 값을 반환하려면 이러한 값을 배열이나 객체에 넣고 반환하면 됩니다. 객체나 배열에서 무언가를 검색하는 것과 같습니다.

// 배열 반환 함수 example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // 객체 함수를 반환합니다. example() {
  반품 {
    foo: 1,
    바: 2
  };
  }let { foo, bar } = example();

JSON

데이터 구조 분해 할당 추출

JSON

개체에서 데이터를 추출하는 데 특히 유용합니다.

  아이디: 42,
  상태: "확인",
  데이터: [867, 5309]
};

let { id, status, data: 숫자 } = jsonData;

console.log(id, 상태, 번호);
// 42, "OK", [867, 5309]

위의 코드를 사용하면 JSON 데이터의 값을 빠르게 검색할 수 있습니다.

관련 권장 사항: JavaScript 튜토리얼

위의 내용은 JavaScript 분해 할당의 세부 사항을 이해하도록 안내합니다. 더 많은 정보는 중국 웹사이트의 PHP 기타 관련 기사를 주목해주세요!