JS 구조 분해 할당의 5가지 일반적인 시나리오와 예에 대해 이야기해 보겠습니다.

이 글은 JavaScript의 5가지 일반적인 시나리오와 할당에 대한 관련 지식을 제공합니다. 관심 있는 친구는 아래를 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

구조 분해 할당 구문은 구조 분해 할당을 통해 속성/값을 객체/배열에서 꺼내어 다른 변수에 할당할 수 있는 JavaScript 표현식입니다. 이 구문은 배열과 객체에서 값을 더 쉽게 가져올 수 있도록 ECMAscript 6 사양에 도입된 새로운 구문입니다.

1. 데이터 추출

먼저 JavaScript에서 객체를 분해하는 방법을 살펴보겠습니다. 이 간단한 제품 객체 예부터 시작해 보세요.

const product = {
    id: 1,
    title: "Nike Air Zoom Pegasus 38",
    product_image: "/resources/products/01.jpeg",
    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
    price: 120,
};
const { id, price, title } = product;

이렇게 하면 다음과 같은 방법으로 해당 속성에 액세스할 수 있습니다.

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38

디스트럭처링을 사용하면 코드를 더 명확하고 간결하게 만들 수 있습니다. 더 복잡한 객체를 분해해야 한다면 어떻게 될까요? 즉, 객체 내의 객체입니다.

이제 다음과 같이 제품 목록 데이터에서 제품 중 하나의 속성을 가져와야 한다고 가정합니다.

const products = [
    {
        id: 1,
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    {
        id: 2,
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    {
        id: 3,
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
];

여기서 제품 목록은 여러 레이어에 중첩되어 있으며 제품 정보에 액세스해야 합니다. 제품 개체 속성을 얻기 위해 가능한 한 많은 수준을 분해할 수 있습니다.

const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

위 코드는 사용법을 보여주기 위한 용도로만 사용되었습니다. 프로젝트 개발 중에 이러한 방식으로 배열의 개체 정보를 얻는 것은 권장되지 않습니다.

일반적으로 데이터 목록이 반드시 배열일 필요는 없습니다. 획득 효율성 측면에서 맵 객체 액세스는 배열 액세스보다 효율적입니다. 위의 데이터를 다음과 같이 맵 객체로 변경할 수 있습니다.

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

자바스크립트에서는 데이터가 변수와 메소드가 될 수 있으므로 다음과 같이 구조 분해 할당을 함수 매개변수 정의에 사용하기에 적합합니다.

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript 解构赋值",
    remark: "解构赋值的实用场景介绍",
});

사용할 때 React나 Vue 등의 프레임워크를 만들다 보면 메소드 도입 등 구조 분해 할당이 일어나는 곳이 많습니다.

2. Alias ​​​​값

속성과는 다른 이름으로 변수를 생성하고 싶다면 객체 구조분해의 alias 기능을 이용하면 됩니다.

const { identifier: aliasIdentifier } = expression;

identifier는 액세스할 속성의 이름이고 aliasIdentifier는 변수 이름입니다. 구체적인 사용법은 다음과 같습니다. identifier 是要访问的属性的名称，aliasIdentifier 是变量名称。具体用法如下：

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { price: productPrice },
} = products;

console.log(productPrice); // 275

3. 动态属性

可以使用动态名称提取到变量属性（属性名称在运行时已知）：

const { [propName]: identifier } = expression;

propName 表达式应计算为属性名称（通常是字符串），标识符应指示解构后创建的变量名称，用法如下：

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

上面代码中，可以通过更新 productKey 的值进而使得 product 的值也跟随变化。

4. 对象解构中的 Rest

将 rest 语法添加到解构中，Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。

const { identifier, ...rest } = expression;

解构后，变量标识符包含属性值。 rest 变量是一个具有其余属性的普通对象。

const product = {
    title: "Nike Air Zoom Pegasus 38",
    price: 120,
    quantity: 5,
    category_id: 1,
    reviews: 9830,
    total: 45,
};
const { title, ...others } = product;
console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }

对于数组，可以通过 Rest 的实现首尾值的获取：

const numbers = [1, 2, 3];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [ 2, 3 ]

5. 默认值

正如前面介绍的那样可以在解构数组时为其分配默认值：

const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1

这样，可以将确保在 B、A 未定义的情况下有一个默认值。

总结

解构是一个非常实用的特性，它被添加到了 JavaScript 的 ES6 版本中了。通过解构，可以快速方便地从对象和数组中提取属性或数据到单独的变量中。它适用于嵌套对象，可以使用 ...rrreee

3. 동적 속성

은 동적 이름을 사용하여 변수 속성으로 추출할 수 있습니다(속성 이름은 런타임에 알려짐). rrreeepropName 표현식은 속성 이름(일반적으로 문자열)으로 평가되어야 하며 식별자는 구조 분해 후 생성된 변수 이름을 나타내야 합니다. 사용법은 다음과 같습니다.
rrreee

위 코드에서 업데이트할 수 있습니다. productKey 값을 업데이트하면 product 값이 그에 따라 변경됩니다. 🎜

4. 객체 Destructuring의 나머지🎜🎜 Destructuring에 Rest 구문을 추가하면 Rest 속성은 Destructuring 모드에서 선택되지 않은 나머지 열거 가능한 속성 키를 수집합니다. 🎜rrreee🎜구조화 후 변수 식별자에는 속성 값이 포함됩니다. 나머지 변수는 속성이 남아 있는 일반 객체입니다. 🎜rrreee🎜배열의 경우 Rest를 통해 ​​​​첫 번째 값과 마지막 값을 얻을 수 있습니다: 🎜rrreee

5. 기본값🎜🎜앞서 언급한 것처럼 기본값을 할당할 수 있습니다. 배열을 분해할 때의 값 값: 🎜rrreee🎜 이렇게 하면 B 또는 A가 정의되지 않은 경우 기본값이 있는지 확인할 수 있습니다. 🎜

요약🎜🎜Destructuring은 ES6 버전의 JavaScript에 추가된 매우 유용한 기능입니다. 구조 분해를 사용하면 객체와 배열의 속성이나 데이터를 별도의 변수로 빠르고 쉽게 추출할 수 있습니다. 중첩된 개체와 함께 작동하며 ... 연산자를 사용하여 배열 할당을 할당할 수 있습니다. 🎜🎜추천 학습: "🎜JavaScript 비디오 튜토리얼🎜"🎜🎜

위 내용은 JS 구조 분해 할당의 5가지 일반적인 시나리오와 예에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!