Learn some bit arithmetic tips from Vue source code

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

The body of the

Package ->shared-> SRC ->shapeFlags.ts;

export const enum ShapeFlags {
  ELEMENT = 1,
  FUNCTIONAL_COMPONENT = 1 << 1,
  STATEFUL_COMPONENT = 1 << 2,
  TEXT_CHILDREN = 1 << 3,
  ARRAY_CHILDREN = 1 << 4,
  SLOTS_CHILDREN = 1 << 5,
  TELEPORT = 1 << 6,
  SUSPENSE = 1 << 7,
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
  COMPONENT_KEPT_ALIVE = 1 << 9,
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
}
Copy the code

The enumeration is performed by the shift operator to obtain a value as the value of the enumeration. The result of specific calculation is something like this:

COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
Copy the code

And then we went on to see, after an enumeration, there is a bitwise or (|) describes the COMPONENT calculation, here is a bit operations inside tips. Here COMPONENT means STATEFUL_COMPONENT and FUNCTIONAL_COMPONENT are both components. In the following code, it is redundant to check whether it is a COMPONENT

if (type === ShapeFlags.STATEFUL_COMPONENT || type === ShapeFlags.FUNCTIONAL_COMPONENT) {
    // dosomething
}
Copy the code

We could write:

if (type & ShapeFlags.COMPONENT) {
    // dosomething
}
Copy the code

If type is STATEFUL_COMPONENT or FUNCTIONAL_COMPONENT, it gets a non-zero value. If it is not 0, then it is true and can be entered into the code block for if judgment. If not, 0 is returned and no judgment is entered. This technique saves us a lot of redundant code. We also have a lot of states in the project, and there must be a time when we need to determine whether the states are certain or not, and deal with some logic. So we can use this way to make the code more concise, and more readable.

There is also a non-operator ~ that works well in projects. For example, if you’re writing code and you want to know if there’s a value in an array, it looks like this

let arr = [1.2.3]
if (arr.indexOf(2) > -1) {
    console.log('dosomething')}Copy the code

We could have written it a little bit more succinctly:

let arr = [1.2.3]
if (~arr.indexOf(2)) {
    console.log('dosomething')}Copy the code

If it doesn’t exist, indexOf will return -1, so ~-1 will be 0, and 0 will be false and will not enter the block. If it exists, it is a non-1 number, and ~index is a non-0 number. So it goes into the if block.

conclusion

You can learn a lot by looking at other people’s code. Especially a good repository like Vue. It is recommended to read this excellent source code together. Come on! So that’s it for today. See you tomorrow!