Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what are the concepts of writing code". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "what are the concepts of writing code?"

1. Deconstruction

There are several ways to extract attributes from an object, and deconstruction is one of them. It helps to clearly extract the properties of an object, assign values from an array, or assign the properties of an object to variables. It is superior to other methods because it allows multiple attributes to be extracted in a single statement, properties can be accessed from nested objects, and default values can be assigned to attributes when they do not exist.

For example, the following objects.

Const profile = {name: "Harry", age: 15, country: "UK"}

Using deconstruction, you can extract one or more properties of this object in a single statement.

Const {name, age} = profile; console.log (name, age); / / Harry 15

Assigning a value to a property is another use of deconstruction, and properties that do not exist will return the specified default value.

Const {name, age, school = "Hogwarts"} = profile;console.log (school); / / Hogwarts

In addition, array deconstruction is also popular, where you can assign default values to variables, exchange values between variables, and so on. Before the introduction of ES6, there was no mechanism to extract all data at once. Therefore, deconstruction is a tool concept that makes the code purer.

2.Spread syntax

Use the spread operator for iterable objects, such as arrays and strings, which help to extend iterable objects to a single element. The syntax of the extension operator is three dots (.).

For example, suppose a function requires three parameters, and we have an array of three elements. By using the spread syntax, you can pass the array to this function, which iterates over the array and assigns elements to the relevant parameters of the function.

Function sum (a, b, c) {return a + b + c;} const numbers = [1, 2, 3]; console.log (sum (..)); / / 6

Before the introduction of the spread operator in ES6, it was much more complicated to use arrays to pass parameters to functions.

Another use of spread syntax is to concatenate arrays. Suppose there are two arrays, as follows:

Const vegetables = ["carrot", "pumpkin"]; const fruits = ["apple", "pear"]

Before introducing the spread syntax, you must use the array.concat method to combine these arrays. However, using the spread syntax, array combination becomes very easy.

Const newArray = [... vegetables,... fruits]; console.log (newArray); / / ["carrot", "pumpkin", "apple", "pear"]

In addition, you can use the spread operator to create copies of objects with exactly the same content but different references.

3. Rest syntax

The usage specification of rest syntax is the same as that of spread syntax. The difference is that spread copies everything, and you can use restsyntax if you want to retrieve all the remaining elements.

Const numbers = [1, 3, 2, 6, 8]; const [1, 3,... rest] = numbers;console.log (rest); / [2, 6, 8]

4. Array method

The JavaScript array method provides a clean and concise solution for data conversion in arrays. Of the many array methods available, I will introduce the four most important methods, namely map, filter, reduce, and some.

Map

This method returns an array where each element in the array is converted according to the specified function. For example, if you want to multiply each element of an array by 2, you can use the map method to do this in a single statement without any complex loops. In addition, the map method does not change the original data.

Const array = [1,2,3]; const mapped = array.map (element = > element * 2); console.log (mapped); / / [2,4,6] Filter

This method returns an array of elements where the function returns true. For example, if you need to retrieve even numbers from an array, you can filter the array as follows.

Const numbers = [1,2,3,4,5,6]; const evenNumbers = numbers.filter (element = > element% 2 = 0); console.log (evenNumbers); / / [2,4,6] Reduce

This method accumulates based on the value specified by the function.

Const arr = [1,2,3,4,5,6]; const reduced = arr.reduce ((total, current) = > total + current); console.log (reduced); / / 21

These three methods are powerful data conversion methods in arrays, and you can get very clear and easy-to-read code. Using these methods, you can write simpler, shorter code without having to worry about loops or branches. These array methods are important to JavaScript developers because they reduce code, reduce manual manipulation, and improve readability.

Some

This method returns true if some elements in the array pass the test of the specified function. If no element corresponds to the function, this method returns false:

Const array = [1,2,3,4,5]; const isEven = (element) = > element% 2 console.log (array.some (isEven)); / / true

In contrast to the traditional method of iterating over the results in an array, this method is useful when finding elements in an array that meet certain criteria.

5. Value and reference variable assignment

How to assign values to variables is one of the most important concepts that every JavaScript developer should know. If you don't know this, you may assign a value to the variable and inadvertently change it, which will lead to unexpected errors in the code.

JavaScript always assigns variables by their value. But there are two main types of assignment: if the assignment is of the JavaScript primitive type (boolean, null, undefined, string, number, bigint, and symbol), the actual value is assigned to the variable. However, if the assigned value is Array, Function, or Object, the reference to the object in memory is allocated, not the actual value.

Let's take a look at the following examples to deepen our understanding. Consider the variables name1 and name2:

Let name1 = "John"; let name2 = name1

The variable name2 is assigned as the variable name1, so these variables are of primitive type, so the actual value ("John") is assigned to both variables. Therefore, these two variables can be regarded as two independent variables with the same value. For this reason, reassigning the second variable does not affect the first variable. This is called assigning variables by value.

Name2 = "Peter"; console.log (name1, name2); / / "John", "Peter"

Another way is to assign variables by reference. If the variable type is array, object, or function, a reference is assigned to the variable in memory instead of the actual value. Take a look at the following object assignments.

Let obj1 = {name: "Lucy"} let obj2 = obj1

With this assignment, the variable obj2 gets the same memory reference as obj1. Therefore, changing obj2 also affects obj1 because they are no longer treated as separate variables. These two variables have the same reference in memory.

Obj2.name = "Mary"; console.log (obj1); / / {name: "Mary"} console.log (obj2); / / {name: "Mary"}

If you need to create a copy of the same object with different references in memory, you can use the spread operator. Changing the newly created object in this way does not affect the first object because they have different references in memory.

Let object1 = {name: "Lucy"}; let object3 = {... object1} object3.name = "Anne"; console.log (object1); / / {name: "Lucy"} console.log (object3); / / {name: "Anne"} so far, I believe you have a deeper understanding of "what are the concepts of writing code", you might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.