In the process of code Review, it is a great feeling to enjoy making code elegant. This article summarizes three common code optimization techniques in project development. These techniques are used in many scenarios in VUE projects, so you can try to write high quality code.

Magic extension operator

Extended operators… Is one of my favorite JavaScript operators, often used to manipulate arrays and objects. The following four scenarios are commonly used:

Points to note: Extension operators… Is a layer copy.

1. Copy the array

const weeks = ["Monday", "Tuesday"];
const newWeeks = [...weeks];
console.log(newWeeks);  // [ 'Monday', 'Tuesday' ]
Copy the code

2. Expand the array

const weeks = ["Tuesday", "Wednesday"];
const newWeeks = ["Monday", ...weeks, "Thursday", "Friday"];
console.log(newWeeks);  // [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ]
Copy the code

3. Extend objects

const myinfo = { name: "DevPoint", city: "Shenzhen", }; const myDetail = { ... myinfo, province: "Guangdong", }; console.log(myDetail); // { name: 'DevPoint', city: 'Shenzhen', province: 'Guangdong' }Copy the code

4. Array/object merge

const weeks1 = ["Monday", "Thursday", "Friday"]; const weeks2 = ["Tuesday", "Wednesday"]; const newWeeks = [...weeks1, ...weeks2]; console.log(newWeeks); // [ 'Monday', 'Thursday', 'Friday', 'Tuesday', 'Wednesday' ] const myinfo = { name: "DevPoint", }; const address = { province: "Guangdong", city: "Shenzhen", }; const myDetail = { ... myinfo, ... address, }; console.log(myDetail); // { name: 'DevPoint', province: 'Guangdong', city: 'Shenzhen' }Copy the code

The best method for null checking

Null checking is a common operation in front-end projects, and in the past we used to check like this:

if (tmp ! == null && tmp ! == undefined && tmp ! {/ /} = = "")Copy the code

Now a simple if can do this:

if (tmp) {
    //
}
Copy the code

The condition is false if TMP is null, and the condition is true if: null, undefined, NaN, empty string, 0, or false.

The null-value checking method was introduced in 24 Javascript Code Optimization Tips, but the new Javascript syntax includes the null-value merge operator?? There really is a nice shortcut to do this. Check for empty strings /undefined/null in Javascript. Check for empty strings /undefined/null in Javascript

Use.map(),.reduce(),.filter()

Yes, we often talk about the powerful techniques of functional and responsive programming! My first experience with functional programming a few years ago opened a whole new door for me. Now, when I look at these simple instructions, I am struck by their elegant code style. Javascript Array includes and Reduce describes the detailed usage of reduce.

One of the basic tenets of functional programming is the use of lists and operations, and this article will use three of the most well-known operations to refactor code examples: Map, Reduce, and Filter.

Before COVID-19, a Japanese family came to Paris for a vacation. They bought some food and daily necessities in the supermarket. But all the items are priced in euros and they want to know how much each item costs and how much it costs in Yen.

The exchange rate is 126 yen per euro.

So, in the traditional way, we’ll do it with a classic loop:

const RATE = 126; const items = [ { name: "pineapple", price: 2, type: "food" }, { name: "beef", price: 20, type: "food" }, { name: "advocate", price: 1, type: "food" }, { name: "shampoo", price: 5, type: "other" }, ]; let sum = 0; const itemsInYen = []; const length = items.length; for (let i = 0; i < length; i++) { const item = items[i]; item.price *= RATE; itemsInYen.push(item); if (item.type === "food") { sum += item.price; } } console.log(itemsInYen); console.log(sum); / / 2898Copy the code

The output is as follows:

[
  { name: 'pineapple', price: 252, type: 'food' },
  { name: 'beef', price: 2520, type: 'food' },
  { name: 'advocate', price: 126, type: 'food' },
  { name: 'shampoo', price: 630, type: 'other' }
]
2898
Copy the code

Now we refactor the above code with.map(),.reduce(),.filter() :

const RATE = 126; const items = [ { name: "pineapple", price: 2, type: "food" }, { name: "beef", price: 20, type: "food" }, { name: "advocate", price: 1, type: "food" }, { name: "shampoo", price: 5, type: "other" }, ]; const itemsInYen = items.map((item) => { const itemsInYen = { ... item }; itemsInYen.price *= RATE; return itemsInYen; }); console.log(itemsInYen); const sum = itemsInYen .filter((item) => item.type === "food") .reduce((total, item) => (total += item.price), 0); console.log(sum);Copy the code

The output is the same. Map converts all prices from euros to yen, Filter filters non-food consumption items and Reduce adds the price of each food item to the total amount!