Let's talk about the usage skills of JavaScript conditional judgment

This article brings you relevant knowledge about JavaScript. It mainly talks about the usage skills of JavaScript conditional judgment. Friends who are interested can take a look at it together. I hope it will be helpful to everyone. help.

This article will introduce how to write simpler conditional judgments in JavaScript to help you write more concise code. Source code address

Suppose we have a function that converts color values ​​into 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, when we make a spelling mistake, so awkward.

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 object in value.

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)

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, 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.

The above is the detailed explanation of JavaScript conditional judgment usage techniques.

Recommended study: "JavaScript Video Tutorial"