


Let's talk about 5 common scenarios and examples of JS destructuring assignment
This article brings you relevant knowledge about JavaScript. It mainly talks about 5 common scenarios and examples of js destructuring and assignment. Friends who are interested can take a look at it. I hope it will be helpful to everyone. help.
Destructuring assignment syntax is a JavaScript expression. Through destructuring assignment, attributes/values can be taken out of objects/arrays and assigned to other variables. This syntax is a new syntax introduced by the ECMAscript 6 specification that makes it easier to get values from arrays and objects.
1. Extract data
Let’s first look at how to deconstruct objects in JavaScript. You can start with a simple example of this product object.
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;
In this way, you can access the corresponding properties in the following ways:
console.log(id); // 1 console.log(price); // 120 console.log(title); // Nike Air Zoom Pegasus 38
Destructuring can make the code clearer and more concise. What if you need to deconstruct a more complex object? That is, an object within an object.
Now assume that we need to obtain the attributes of one of the products from the product list data, as follows:
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, }, ];
Here, the product list is nested several levels, and if you need to access the product information, you can deconstruct it. Possibly multiple levels to obtain the properties of the item object.
const [tmp, { id, title, price }] = products; console.log(id); // 2 console.log(title); // Nike Air Zoom Alphafly NEXT% console.log(price); // 275
The above code is only used to demonstrate its usage. It is not recommended to obtain object information in an array in this way during project development.
Usually, the data list does not have to be an array. In terms of acquisition efficiency, the access efficiency of map objects is higher than that of arrays. The above data can be changed to a map object, as follows:
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, data can be variables and methods, so destructuring assignment is also suitable for use in the definition of function parameters, as follows:
const printArticle = ({ title, remark }) => { console.log(title); console.log(remark); }; printArticle({ title: "JavaScript 解构赋值", remark: "解构赋值的实用场景介绍", });
When using frameworks such as React or Vue, there are many places for destructuring assignments, such as the introduction of methods, etc.
2. Alias value
If you want to create a variable with a different name than the property, you can use the alias function of object destructuring.
const { identifier: aliasIdentifier } = expression;
identifier
is the name of the property to be accessed and aliasIdentifier
is the variable name. The specific usage is as follows:
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. Dynamic properties
You can use dynamic names to extract variable properties (the property names are known at runtime):
const { [propName]: identifier } = expression;
propName
The expression should evaluate to the property name (usually a string) and the identifier should indicate the variable name created after destructuring, usage is as follows:
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 }
In the above code, you can update it by updating productKey# The value of ## then causes the value of
product to also change.
const { identifier, ...rest } = expression;After destructuring, the variable identifier contains the attribute value.
rest A variable is an ordinary object with remaining properties.
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 }For arrays, you can obtain the first and last values through Rest implementation:
const numbers = [1, 2, 3]; const [head, ...tail] = numbers; console.log(head); // 1 console.log(tail); // [ 2, 3 ]5. The default value As mentioned before, it can be assigned when deconstructing the array. Default value:
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); // 1In this way, you can ensure that there is a default value when
B and A are not defined.
... operators.
JavaScript Video Tutorial"
The above is the detailed content of Let's talk about 5 common scenarios and examples of JS destructuring assignment. For more information, please follow other related articles on the PHP Chinese website!

JavaScript core data types are consistent in browsers and Node.js, but are handled differently from the extra types. 1) The global object is window in the browser and global in Node.js. 2) Node.js' unique Buffer object, used to process binary data. 3) There are also differences in performance and time processing, and the code needs to be adjusted according to the environment.

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 Chinese version
Chinese version, very easy to use

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Zend Studio 13.0.1
Powerful PHP integrated development environment

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
