假设有这样一个场景，我们需要统计员工的技术栈，目前我们需要标记的技术有 CSS、JavaScript、HTML、WebGL。,然后我可以这样写枚举：,之前是这样写的，但是，最近看vue源码的时候，发现了一个高效使用枚举的技巧，在这里分享给大家。,我们可以这样写上面的枚举：,左移运算符 (<<) 将第一个操作数左移指定位数。向左移动的多余位被丢弃。零位从右侧移入。,例如：,按照上面的方法定义好枚举后，我们可以这样使用：,温馨提示：| 是按位或运算符，它在每个操作数的对应位为 1 的每个位位置返回 1。,在 JavaScript 中，整数存储在 4 个字节中，即 32 位。第一个代表正负，后面的31代表数字。,当我们用二进制表示 1 , 1 << 2 时，它们看起来像这样：,我们定义的枚举变量只有一个二进制格式的1，并且占据不同的位置。,当我们向技能添加枚举选项时，我们使用skills | skill。假设现在我们需要添加的技能是SKILLS.CSS，那么在执行过程中，就是：,我们可以发现，在技能中，SKILLS.CSS对应的位置会变成1。,反之，那么我们可以通过查看skills&SKILLS.CSS的结果是否为0来判断技能中是否存在SKILLS.CSS。,顺便说一句，这里我们也可以发现这个技巧有个缺点，就是枚举项不能超过 31 个。,答案很简单，这样的代码运行起来更高效。CPU中有直接对应位操作的指令，因此效率更高。,我们也可以做一个性能测试。,如果我们不使用按位运算，而是使用传统的方法（数组或映射）来实现，那么代码如下。,Array 方法：,Map 方法：,这是 jsbench.me 的性能测试：,使用按位枚举，性能明显更高。,我是从 Vue 源代码中学到的。,地址：https://github1s.com/vuejs/core/blob/HEAD/packages/shared/src/shapeFlags.ts
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">