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

이 글은 javascript에 대한 관련 지식을 제공합니다. 배열 분해, 객체 구조 및 분해 사용 등 구조 분해 할당과 관련된 문제를 주로 소개합니다. 모든 사람에게 도움이 되기를 바랍니다. Related Related 권장 사항 : JavaScript Learning Tutorial Tutorial

Concepts

es6은 배열 및 객체에서 값을 추출 할 수있는보다 간결한 할당 모드를 제공합니다. 배열 분해는 매우 간단하고 간결합니다. 할당 표현식의 왼쪽에 배열 리터럴을 사용합니다. 배열 리터럴의 각 변수 이름은 구조 분해된 배열의 동일한 인덱스 항목에 매핑됩니다. 다음 예시와 같이 왼쪽 배열의 항목은 각각 오른쪽의 구조해제된 배열의 해당 인덱스 값을 가져옵니다

[a, b] = [50, 100];
console.log(a);
// expected output: 50
console.log(b);
// expected output: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: [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

위의 예에서는 a와 b 모두에 대해 기본값을 설정했습니다 이런 식으로 a 또는 b의 값이 정의되지 않음이면 설정된 기본값을 해당하는 값에 할당합니다. 변수 (a에는 5, b에는 7이 할당됨)

변수 값 교환

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

let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

또는 XOR

을 사용했습니다. 그러나 구조 분해 할당에서는 구조 분해 표현식에서 두 개의 변수 값을 교환할 수 있습니다

//交换abc = a;a = b;b = c;

undefined，可以设置默认值：

let a = 1;let b = 3;//交换a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1

在上面的例子中，我们给a和b均设置了默认值
这种情况下，如果a或b的值是undefined，它将把设置的默认值赋给相应变量（5赋给a，7赋给b）

交换变量值

以往我们进行两个变量的交换，都是使用

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

或者异或的方法

然而在解构赋值中，我们可以在一个解构表达式中交换两个变量值

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

解构函数返回的数组

我们可以直接解构一个返回值为数组的函数

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

在上面的例子中，**c()**的返回值[10，20]可以在单独的同一行代码中使用解构

忽略返回值（或跳过某一项）

你可以有选择性的跳过一些不想得到的返回值

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma

赋值数组剩余值给一个变量

当你使用数组解构时，你可以把赋值数组剩余的部分全部赋给一个变量

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

这样的话b也会变成一个数组了，数组中的项是剩余的所有项

注意：
这里要小心结尾是不能再写逗号的，如果多了一个逗号将会报错

let [a, b, c, d, e] = 'hello';/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

嵌套数组解构

像对象一样，数组也可以进行嵌套解构

示例：

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写

console.log(y); // 22
console.log(z); // true

字符串解构

在数组解构中，解构的目标若为可遍历对象，皆可进行解构赋值，可遍历对象即实现Iterator接口的数据

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

console.log(foo); // 22
console.log(bar); // true

对象解构

基础对象解构

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

如上代码var {p: foo} = o 获取对象 o 的属性名 p，然后赋值给一个名称为 foo 的变量

解构默认值

如果解构取出的对象值是undefined，我们可以设置默认值

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];

const [, , { name }] = props;
console.log(name); // "FizzBuzz"

赋值给新对象名的同时提供默认值

前面提到过我们赋值给新的对象名，这里我们可以给这个新的对象名提供一个默认值，如果没有解构它，就会自动使用默认值

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x

// x = undefined
// y = 'world'

同时使用数组和对象解构

在结构中数组和对象可以一起使用

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

不完全解构

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;//忽略y
// x = 'hello'

赋值剩余值给一个对象

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

嵌套对象解构（可忽略解构）

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

注意事项

小心使用已声明变量进行解构

错误示范：

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

JavaScript引擎会将{x}
구조 분해 함수는 배열을 반환합니다.

반환 값이 배열인 함수를 직접 분해할 수 있습니다

let x = 1;
let y = 2;
[x, y] = [y, x];

위의 예에서 반환 값은 **c()**의 [10, 20]은 별도의 코드 줄에서 구조 해제될 수 있습니다.

반환 값을 무시하거나 항목을 건너뛰세요.

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

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

배열의 남은 값을 변수에 할당

배열 분해를 사용할 때 더 이상 쉼표를 쓸 수 없으면 오류가 발생합니다

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

중첩 배열 분해

좋아요 객체, 배열은 중첩 분해될 수도 있습니다

예:

rrreee

🎜String destructuring🎜 🎜🎜배열 분해에서 분해 대상이 탐색 가능한 객체인 경우 탐색 가능한 객체는 데이터입니다. Iterator 인터페이스를 구현한 🎜rrreee🎜객체 분해🎜🎜🎜기본 객체 분해🎜🎜rrreee🎜🎜새 변수 이름에 할당🎜🎜🎜객체 분해를 사용할 때 변수 이름을 변경할 수 있습니다🎜rrreee🎜위 코드 var {p: foo} = o는 객체 o의 속성 이름 p를 가져온 다음 foo라는 값에 할당합니다. 변수 🎜🎜🎜디스트럭처링 기본값🎜🎜🎜디스트럭처링으로 꺼낸 객체 값이 다음과 같다면 정의되지 않음, 기본값을 🎜rrreee🎜🎜설정하고 이를 새 객체 이름에 할당하고 기본값 🎜🎜🎜을 제공할 수 있습니다. 앞서 언급했듯이 여기서는 새 객체 이름에 값을 할당합니다. 이 새 객체 이름에 기본값을 제공할 수 있습니다. 구조 해제되지 않으면 기본값이 자동으로 사용됩니다🎜rrreee🎜🎜배열과 객체 구조 해제를 모두 사용🎜🎜🎜 배열과 구조의 객체를 함께 사용할 수 있습니다🎜rrreee 🎜🎜불완전한 구조화🎜🎜rrreee🎜나머지 값을 객체에 할당🎜rrreee🎜🎜중첩된 객체 구조화(구조화는 무시 가능)🎜🎜rrreee🎜Notes🎜🎜🎜주의해서 사용하세요 구조화를 위한 변수 선언 🎜🎜🎜 🎜오류 예: 🎜🎜rrreee🎜JavaScript 엔진은 {x}를 코드 블록으로 해석하므로 구문 오류가 발생합니다. JavaScript가 이를 코드 블록으로 해석하지 않도록 줄 시작 부분에 중괄호를 쓰지 않아야 합니다. 코드 블록 🎜🎜올바른 쓰기: 🎜🎜rrreee🎜올바른 쓰기: 전체 구조 분해 대입문을 괄호 안에 넣으면 올바르게 실행할 수 있습니다🎜🎜🎜함수 매개변수의 구조 분해 할당🎜🎜🎜function 분해를 사용하여 매개 변수를 할당할 수도 있습니다🎜 rrreee🎜위 코드에서 add 함수의 매개변수는 표면적으로는 배열이지만, 매개변수를 전달하면 배열 매개변수가 변수 x, y로 구조해제되어 함수 내부에서는 Directly와 동일합니다. x와 y를 전달하는 것은 동일합니다🎜🎜구조 분해의 목적🎜🎜구조 분해 할당의 용도는 다양합니다🎜🎜🎜변수 값 교환🎜🎜rrreee🎜위 코드는 x와 y의 값을 교환합니다. 이 작성 방법은 간결할 뿐만 아니라 읽기 쉬우며 의미가 명확합니다🎜🎜🎜함수에서 여러 값 반환🎜🎜🎜함수는 하나의 값만 반환할 수 있습니다. 여러 값을 반환하려면 다음과 같이 하면 됩니다. 이 값을 배열이나 객체에 넣고 반환합니다. 구조 분해 할당이 있을 때 객체나 배열에서 이러한 값을 검색하는 것은 가방에서 무언가를 꺼내는 것과 같습니다 🎜

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

提取JSON数据

解构赋值对于提取JSON对象中的数据，尤其有用

示例：

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

使用上面的代码，我们就可以快速取出JSON数据中的值

相关推荐：javascript教程

위 내용은 JavaScript 분해 할당을 이해하도록 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!