JavaScript code conciseness tips

This article is mainly to learn with you all the simple JavaScript code tips that make us shine at work.

Note: There is no absolute right or wrong in the code comparison below. Some writing methods have relatively single usage scenarios. You can judge based on everyone's habits and preferences. If you have better or different opinions, please leave a message to exchange~

(Free learning recommendation: javascript video tutorial)

1. Short-circuit operation:

When we encounter such a situation, will you

const res1 = item.a ? item.a : item.b // 看起来很是简洁const res2 = item.a ? item.b : item.a // 看起来很是简洁

or use js logical operations to implement it?

const res1 = item.a || item.b;const res1 = item.a && item.b;

2. The correct way to assign a Boolean value to a variable through conditional judgment:

When we need to compare a single value to obtain the result, use direct operations , otherwise the if judgment would be much simpler~

let res;if(a === '余光'){
	res = true }else{
	res = false;}// good?const res = a === '余光'

3. The correct way to judge if the length of the array is not zero in if:

Scenario: If the array exists in memory element, then perform the operation:

// badif (arr.length !== 0) {
    // todo}// goodif (arr.length) {
    // todo}

By analogy, when we need to judge whether the length of the array is empty:

if(!arr.length){
	// todo}

4. Use includes to simplify the if judgment:

Scenario: If the parameters are equal to 1, 2, 3, 4, proceed to the next step

Write the first version of the code:

if(a === 1 || a === 2 || a === 3 || a ===4){
	// todo}

I feel an abnormal headache after reading it. Then modified it to:

if([1,2,3,4].includes(a)){
	// todo}

5. Use some to determine whether there is a qualified value:

Scenario: Find whether there is a product with a price less than n

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: '帽子', price: 50},]function checkData(n){
	for(let i = 0; i < item.length; i++){
		if(item.price < n){
			return true;
		}
	}
	return false;}

The method has been written, but since js provides us with so many array methods, use it:

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: &#39;帽子&#39;, price: 50},]const checkData = (n) => itemList.some(item => item.price < n)

Optimize again

const checkData = (n, itemList) => itemList.some(item => item.price < n)

6. Use the filter method to filter the original array, Form a new array

Scenario: Eliminate some unnecessary elements. For example, the id of each piece of data is necessary data for subsequent operations. In order to eliminate defective data, we will do this:

const data = [
    { name: '手机', price: 1000, id: 1 },
    { name: '手机壳', price: 10, id: 2 },
    { name: &#39;帽子&#39;, price: 50, id: &#39;&#39; },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
    if (data.id) {
        newArr.push(arr[i])
    }}

To master the idea of ​​"filtering", we handle it like this:

const afterData = data.filter(item => item.id);

7. Use map to batch process elements in the array:

Scenario: When it comes to price In the interaction, the price field we get is usually in cents. How do we display it?

const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)

8. Deconstruct the array to replace variable values

Scenario: Two values ​​need to be exchanged

// badlet a = 1,
    b = 2let temp = a
a = b
b = temp// goodlet a = 1,
    b = 2[b, a] = [a, b]

9. Destructuring Integrated into the code:

Scenario: Get an element in the object and set the default value

Write the first version of the code:

// badsetForm (person) {
    this.name = person.name    this.age = person.age 
}// goodsetForm ({name = '余光', age}) {
    this.name = name    this.age = age 
}

10. What can be done when multiple methods are combined? (Example 1)

This is the last concise idea of ​​​​the code. Let’s take a specific scene distance to inspire others. Everyone is welcome to leave a message in the comment area~

Scenario:

The data obtained by the front end is

data = [
    { id: 1, name: '一级标题-1' },
    { id: 2, name: '一级标题-2' },
    { id: 3, name: '二级标题-1', pid: 1 },
    { id: 3, name: '一级标题-3' },
    { id: 3, name: '二级标题-2', pid: 2 },]

We need to form an association relationship, such as:

needData = [
    {
        id: 1,
        name: '一级标题-1',
        children: [
            { id: 3, name: '二级标题-1', pid: 1 }
        ]
    },
    {
        id: 2,
        name: '一级标题-2',
        children: [
            { id: 5, name: '二级标题-2', pid: 2 }
        ]
    },
    { id: 4, name: '一级标题-3' },]

So I used multiple APIs provided by the array:

newList = data.reduce((result, item, _, arr) => {
    if (!item.pid) {
        return [...result, item];
    }
    const parentItem = arr.find(({ id }) => id === item.pid);
    if (parentItem) {
        const { children = [] } = parentItem;
        parentItem.children = [...children, item];
    }
    return result;}, []);

Idea:

1. Find the element with a parent
2. Send it to the correct location
3. Return all data without a parent field (pid)

If you have more similar ideas and operations, please be sure to leave a message

Related free learning recommendations: javascript(video)

The above is the detailed content of JavaScript code conciseness tips. For more information, please follow other related articles on the PHP Chinese website!