Summarize JavaScript conditional judgment usage skills

This article brings you relevant knowledge about javascript. It mainly introduces you to the detailed explanation of JavaScript conditional judgment usage techniques. Friends in need can refer to it. Let’s take a look. ,I hope everyone has to help.

[Related recommendations: javascript video tutorial, web front-end】

This article takes a very short time Let’s introduce how to write simpler conditional judgments in JavaScript to help you write simpler code and more readable code.

Suppose we have a function that converts color values ​​to hexadecimal encoding.

function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === 'slate') {
      return '#64748b'
    } else if (color === 'gray') {
      return '#6b7280'
    } else if (color === 'red') {
      return '#ef4444'
    } else if (color === 'orange') {
      return '#f97316'
    } else if (color === 'yellow') {
      return '#eab308'
    } else if (color === 'green') {
      return '#22c55e'
    } else {
      return '#ffffff'
    }
  } else {
    return '#ffffff'
  }
}

The function of this function is very simple, that is, to pass in the color string and then return the corresponding hexadecimal number. If the passed in is not a string, or nothing is passed, then a white ten is returned. Hexadecimal.

Next we will start optimizing this code.

Avoid using strings directly as conditions

There is a problem with using strings directly as conditions, that is, it will be embarrassing when we make spelling mistakes.

convertToHex("salte")

To avoid this error, we can use constants.

const Colors = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === Colors.SLATE) {
      return '#64748b'
    } else if (color === Color.GRAY) {
      return '#6b7280'
    }
    // ...
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

If you are using typescript, you can use enumerations directly.

Using Object

In fact, it is not difficult to find from the above code that we can directly store the hexadecimal value into the value of the object.

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

This way the code will be more concise and easier to read.

Does not meet expectations, return in advance

Another best practice is that we can write the situation that does not meet expectations to the front of the function and return in advance to avoid forgetting to return.

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (!color in Colors) {
    return '#ffffff'
  }
  return Colors[color]
}
convertToHex(Colors.SLATE)

This way there is no need for else. Using this technique, we can eliminate a lot of else in our code.

Use Map with Object

Using map is more professional, because map can store any type of key, and it inherits from Map.prototype and has more convenient methods and properties.

And Object is more convenient to access properties. We can continue to use Object to implement enumeration.

const ColorsEnum = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
const Colors = new Map()
Colors.set(ColorsEnum.SLATE, '#64748b')
Colors.set(ColorsEnum.GRAY, '#6b7280')
// ...
Colors.set('DEFAULT', '#ffffff')
function convertToHex(color) {
  if (!Colors.has(color)) {
    return Colors.get('DEFAULT')
  }
  return Colors.get(color)
}
convertToHex(Colors.SLATE)

Map can also store functions

Suppose we store a lot of colors, up to thousands, and we also need to support back-end configuration, and the results can be obtained through some kind of calculation process.

Then we can use Map to store functions.

return Colors.get(color)()

Try to avoid ternary expressions and switch

Although ternary expressions are brief, their readability is greatly reduced. If it is a multi-level condition, it will be very difficult to read.

switch has no obvious advantage over if. Instead, it is sometimes easy to return, causing the code to not execute as expected.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of Summarize JavaScript conditional judgment usage skills. For more information, please follow other related articles on the PHP Chinese website!