Lassen Sie uns über 5 häufige Szenarien und Beispiele für JS-Destrukturierungsaufgaben sprechen

Dieser Artikel vermittelt Ihnen relevantes Wissen über JavaScript. Er befasst sich hauptsächlich mit 5 gängigen Szenarien und Beispielen für die Destrukturierung und Zuweisung von js. Ich hoffe, dass er für alle hilfreich ist.

Destrukturierende Zuweisungssyntax ist ein JavaScript-Ausdruck. Durch destrukturierende Zuweisung können Attribute/Werte aus Objekten/Arrays entnommen und anderen Variablen zugewiesen werden. Bei dieser Syntax handelt es sich um eine neue Syntax, die durch die ECMAscript 6-Spezifikation eingeführt wurde und das Abrufen von Werten aus Arrays und Objekten erleichtert.

1. Daten extrahieren

Sehen wir uns zunächst an, wie man Objekte in JavaScript dekonstruiert. Sie können mit diesem einfachen Beispiel eines Produktobjekts beginnen.

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;

Auf diese Weise können Sie auf folgende Weise auf die entsprechenden Eigenschaften zugreifen:

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

Durch Destrukturieren kann der Code klarer und prägnanter werden. Was ist, wenn Sie ein komplexeres Objekt dekonstruieren müssen? Das heißt, ein Objekt innerhalb eines Objekts.

Angenommen, Sie müssen die Attribute eines der Produkte wie folgt aus den Produktlistendaten abrufen:

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,
    },
];

Hier ist die Produktliste in mehreren Ebenen verschachtelt und Sie müssen auf die Informationen des Produkts zugreifen. Sie können so viele Ebenen wie möglich dekonstruieren, um die Produktobjekteigenschaften zu erhalten.

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

Der obige Code dient nur zur Demonstration seiner Verwendung. Es wird nicht empfohlen, Objektinformationen in einem Array auf diese Weise während der Projektentwicklung abzurufen.

Normalerweise muss die Datenliste nicht unbedingt ein Array sein. In Bezug auf die Erfassungseffizienz ist der Zugriff auf Kartenobjekte effizienter als der Array-Zugriff. Sie können die oben genannten Daten wie folgt in ein Kartenobjekt ändern:

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

In JavaScript können Daten Variablen und Methoden sein, daher eignet sich die destrukturierende Zuweisung auch für die Definition von Funktionsparametern wie folgt:

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

Bei Verwendung Frameworks wie React oder Vue Dabei kommt es an vielen Stellen zu destrukturierenden Aufgaben, etwa bei der Einführung von Methoden usw.

2. Alias-Wert

Wenn Sie eine Variable mit einem anderen Namen als der Eigenschaft erstellen möchten, können Sie die Alias-Funktion der Objektdestrukturierung verwenden.

const { identifier: aliasIdentifier } = expression;

identifier ist der Name der Eigenschaft, auf die zugegriffen werden soll, und aliasIdentifier ist der Variablenname. Die spezifische Verwendung ist wie folgt: 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. Dynamische Attribute

können mithilfe dynamischer Namen in variable Attribute extrahiert werden (die Attributnamen sind zur Laufzeit bekannt): rrreeepropName-Ausdruck sollte zum Eigenschaftsnamen (normalerweise eine Zeichenfolge) ausgewertet werden und der Bezeichner sollte den nach der Destrukturierung erstellten Variablennamen angeben. Die Verwendung ist wie folgt:
rrreee

Im obigen Code kann er durch aktualisiert werden Das Aktualisieren des productKey-Werts führt wiederum dazu, dass sich der Wert von product entsprechend ändert. 🎜

4. Rest in der Objektdestrukturierung🎜🎜 Fügen Sie der Destrukturierung die Restsyntax hinzu, und das Rest-Attribut sammelt die verbleibenden aufzählbaren Eigenschaftsschlüssel, die nicht vom Destrukturierungsmodus erfasst wurden. 🎜rrreee🎜Nach der Destrukturierung enthält der Variablenbezeichner den Attributwert. Eine rest-Variable ist ein gewöhnliches Objekt mit verbleibenden Eigenschaften. 🎜rrreee🎜Für Arrays können Sie den ersten und letzten Wert über Rest erhalten: 🎜rrreee

5. Standardwert🎜🎜Wie bereits erwähnt, können Sie einen Standardwert zuweisen Wert beim Dekonstruieren des Arrays Wert: 🎜rrreee🎜Auf diese Weise können Sie sicherstellen, dass es einen Standardwert gibt, wenn B oder A nicht definiert sind. 🎜

Zusammenfassung🎜🎜Destrukturierung ist eine sehr nützliche Funktion, die der ES6-Version von JavaScript hinzugefügt wurde. Durch die Destrukturierung können Sie schnell und einfach Eigenschaften oder Daten aus Objekten und Arrays in separate Variablen extrahieren. Es funktioniert mit verschachtelten Objekten und Array-Zuweisungen können mithilfe der Operatoren ... zugewiesen werden. 🎜🎜Empfohlenes Lernen: „🎜JavaScript-Video-Tutorial🎜“🎜🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über 5 häufige Szenarien und Beispiele für JS-Destrukturierungsaufgaben sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!