ES6에서 구조 분해 할당 기능을 사용하는 방법

이번에는 ES6에서 Destructuring 할당 기능을 사용하는 방법을 보여 드리겠습니다.

변수 값 교환

[x, y] = [y, x];

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

함수에서 여러 값 반환

함수는 하나의 값만 반환할 수 있습니다. 여러 값을 반환하려면 배열이나 객체로만 반환할 수 있습니다. 구조 분해 할당을 사용하면 이러한 값을 검색하는 것이 매우 편리합니다.

// 返回一个数组
function example() {
 return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一个对象
function example() {
 return {
  foo: 1,
  bar: 2
 };
}
var { foo, bar } = example();

함수 매개변수 정의

구조 분해 할당은 매개변수 세트를 변수 이름에 쉽게 연결할 수 있습니다.

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

구조 분해 할당은 JSON 개체에서 데이터를 추출하는 데 특히 유용합니다.

var jsonData = {
 id: 42,
 status: "OK",
 data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

위 코드는 JSON 데이터의 값을 빠르게 추출할 수 있습니다.

jQuery.ajax = function (url, {
 async = true,
 beforeSend = function () {},
 cache = true,
 complete = function () {},
 crossDomain = false,
 global = true,
 // ... more config
}) {
 // ... do stuff
};

위의 소개를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

Max-width 및 min-height는 IE6에서 지원되지 않습니다.

PHP 캐시 최적화를 위해 memcached 및 xcache를 사용하는 구현 단계

AJAX의 비동기 동기 요청 사용 방법 달성

위 내용은 ES6에서 구조 분해 할당 기능을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!