JavaScript 编写枚举的最有效方法分享

目录
  • 前言
  • 定义枚举
  • << 是什么?
  • 用法
  • 如何理解这段代码?
  • 我们为什么要使用这个技巧?
  • 学习Vue源码

前言

假设有这样一个场景,我们需要统计员工的技术栈,目前我们需要标记的技术有 CSS、JavaScript、HTML、WebGL。

然后我可以这样写枚举:

const SKILLS = {
 CSS: 1 ,
 JS: 2,
 HTML: 3,
 WEB_GL: 4
}

之前是这样写的,但是,最近看vue源码的时候,发现了一个高效使用枚举的技巧,在这里分享给大家。

定义枚举

我们可以这样写上面的枚举:

const SKILLS = {
 CSS: 1 ,
 JS: 1 << 1,
 HTML: 1 << 2,
 WEB_GL: 1 << 3
}

<< 是什么?

左移运算符 (<<) 将第一个操作数左移指定位数。向左移动的多余位被丢弃。零位从右侧移入。

例如:

  • 二进制的 1 是 0000 0001 ,左移一位是 0000 0010 ,即十进制的 2 。
  • 如果我们将其移动两位,它将变为 0000 0100 ,即十进制的 4。
  • 如果我们将其移动三位,它将变为 0000 1000 ,即十进制的 8。
  • 如果我们将其移动 N 位,它将变为 2^Nin 十进制。

用法

按照上面的方法定义好枚举后,我们可以这样使用:

const SKILLS = {
 CSS: 1 ,
 JS: 1 << 1,
 HTML: 1 << 2,
 WEB_GL: 1 << 3
}
// Use this value to store a user's tech-stack
let skills = 0
// add a skill for the user
function addSkill(skill) {
 skills = skills | skill
}
addSkill(SKILLS.CSS)
addSkill(SKILLS.JS)
// If this value is not 0, it means that the user has mastered the tech
console.log('Does he know CSS', SKILLS.CSS & skills)
console.log('Does he know JavaScript', SKILLS.JS & skills)
console.log('Does he know Web GL', SKILLS.WEB_GL & skills)

温馨提示:| 是按位或运算符,它在每个操作数的对应位为 1 的每个位位置返回 1。

cons
t a = 5;        // 00000000000000000000000000000101
const b = 3;        // 00000000000000000000000000000011
console.log(a | b); // 00000000000000000000000000000111
// expected output: 7

如何理解这段代码?

在 JavaScript 中,整数存储在 4 个字节中,即 32 位。第一个代表正负,后面的31代表数字。

当我们用二进制表示 1 , 1 << 2 时,它们看起来像这样:

我们定义的枚举变量只有一个二进制格式的1,并且占据不同的位置。

当我们向技能添加枚举选项时,我们使用skills | skill。假设现在我们需要添加的技能是SKILLS.CSS,那么在执行过程中,就是:

我们可以发现,在技能中,SKILLS.CSS对应的位置会变成1。反之,那么我们可以通过查看skills&SKILLS.CSS的结果是否为0来判断技能中是否存在SKILLS.CSS。顺便说一句,这里我们也可以发现这个技巧有个缺点,就是枚举项不能超过 31 个。

我们为什么要使用这个技巧?

答案很简单,这样的代码运行起来更高效。CPU中有直接对应位操作的指令,因此效率更高。

我们也可以做一个性能测试。如果我们不使用按位运算,而是使用传统的方法(数组或映射)来实现,那么代码如下。

Array 方法:

const SKILLS = {
 CSS: 1 ,
 JS: 1 << 1,
 HTML: 1 << 2,
 WEB_GL: 1 << 3
}
// Use an array to store the user's tech-stack
let skills = []
function addSkill(skill) {
 if (!skills.includes(skill)) { // Avoid duplicate storage
   skills.push(skill)
 }
}
addSkill(SKILLS.CSS)
addSkill(SKILLS.JS)
skills.includes(SKILLS.CSS)
skills.includes(SKILLS.JS)
skills.includes(SKILLS.WEB_GL)

Map 方法:

const SKILLS = {
 CSS: 1 ,
 JS: 1 << 1,
 HTML: 1 << 2,
 WEB_GL: 1 << 3
}
// Use a map to store the user's tech-stack
let skills = {}
function addSkill(skill) {
 if (!skills[skill]) {
   skills[skill] = true
 }
}
addSkill(SKILLS.CSS)
addSkill(SKILLS.JS)
skills[SKILLS.CSS]
skills[SKILLS.JS]
skills[SKILLS.WEB_GL]

这是 jsbench.me 的性能测试:

使用按位枚举,性能明显更高。

学习Vue源码

我是从 Vue 源代码中学到的。

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
}

到此这篇关于JavaScript 编写枚举的最有效方法分享的文章就介绍到这了,更多相关JavaScript 枚举编写内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-06-22

JavaScript enum枚举类型定义及使用方法

enum型也被成为枚举类型,它是一种可以将多个常量分组为一个并附加一系列值的类型,使用枚举定义的常量称为枚举器列表,默认情况下,枚举器从零开始按顺序编号.本篇文章给大家介绍关于JavaScript中枚举类型的使用. JavaScript中enum(枚举类型)是什么? JavaScript中是没有枚举类型的,除了JavaScript以外的语言都有enum这个关键词,但为了在JavaScript中使用枚举变量,我们必须自己创建它. 下面我们就来看如何在JavaScript中定义enum(枚举类型)

JS 对象属性相关(检查属性、枚举属性等)

1.删除属性 delete运算符可以删除对象的属性 复制代码 代码如下: delete person.age //即person不再有属性age delete person['age'] //或者这样 delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性 看到delete a.p之后b.x仍然为1 var a = {p:{x:1}}; var b = a.p; console.log(a.p.x); //1 delete a.p; console.log(a.p.x); //Typ

Node.JS枚举统计当前文件夹和子目录下所有代码文件行数

使用Node.JS的大多数用记事本开发,有时侯会需要统计工程代码量,然后记事本大部分没有这个功能.其实用node.js几行代码就可以实现. var path = require('path') var fs = require('fs') //需要统计的文件类型,可自己删减,均小写 var codesFiles = [ '.css', '.js', '.html', '.tmpl', '.part', '.json', '.md', '.txt', '.yml', '.java', '.cs',

深入剖析JavaScript中的枚举功能

由于 Microsoft AJAX Library 对于 JavaScript 进行了大幅扩展, 枚举这个常用的功能当然也被加进去了, 本次就是来探讨 JavaScript 的枚举功能. 由于范例很简单, 所以直接看 HTML 标签就 OK 了 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></t

怎样用JS模拟实现枚举

前言 在当前的JavaScript中,并没有枚举这个概念,在某些场景中使用枚举更能保证数据的正确性,减少数据校验过程,下面就介绍一下JavaScript如何模拟实现枚举效果. 枚举主要特点 枚举值不能重复 不能被修改 实现 let days; (function (days) { days[days["Sunday"] = 0] = "Sunday"; days[days["Monday"] = 1] = "Monday";

javascript模拟枚举的简单实例

如下,我们来定义Week的枚举: 复制代码 代码如下: if(typeof WeekDay == "undefined"){ var WeekDay = {}; WeekDay.Sunday = 0; WeekDay.Monday = 1; WeekDay.Tuesday = 2; WeekDay.Wedesay = 3; WeekDay.Thursday = 4; WeekDay.Friday = 5; WeekDay.Saturday = 6; } 测试如下:alert(WeekD

通过实例解析js可枚举属性与不可枚举属性

在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for-in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举的,如Object, Array, Number等,如果你写出这样的代码遍历其中的属性: var num = new Number(); for(var pro in num) { console.log("num." + pro + " = "

枚举JavaScript对象的函数

From: JavaEye.com 枚举JavaScript对象的函数: function iterator(obj) {  for (var property in obj) {  document.writeln("<p>" + property + " : " + obj[property] + "</p>");  } } 一个简单示例(test.js): function Employee () {   this.

JavaScript对象数组排序函数及六个用法

分享一个用于数组或者对象的排序的函数.该函数可以以任意深度的数组或者对象的值作为排序基数对数组或的元素进行排序. 代码如下: /** * 排序数组或者对象 * by Jinko * date -- * @param object 数组或对象 * @param subkey 需要排序的子键, 该参数可以是字符串, 也可以是一个数组 * @param desc 排序方式, true:降序, false|undefined:升序 * @returns {*} 返回排序后的数组或者对象 * * 注意:

JavaScript 对象、函数和继承

1. Javascript中的对象 JavaScript可以说是一个基于对象的编程语言,为什么说是基于对象而不是面向对象,因为JavaScript自身只实现了封装,而没有实现继承和多态.既然他是基于对象的,那么我们就来说说js中的对象.有人说js中所有的都是对象,这句话不完全正确.正确的一方是他强调了对象在js中的重要性,对象在js中无处不在,包括可以构造对象的函数本身也是对象.但是另一方面,js中也有一些简单的数据类型,包括数字.字符串和布尔值.null值和undefined值,而这些不是对象

转换json格式的日期为Javascript对象的函数

复制代码 代码如下: //转换json格式的日期(如:{ServerDatetime:"\/Date(1278930470649)\/"})为Javascript的日期对象 function ConvertJSONDateToJSDateObject(JSONDateString) { var date = new Date(parseInt(JSONDateString.replace("/Date(", "").replace(")

javascript设计模式之对象工厂函数与构造函数详解

下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识. 概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法.然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象.1).使用工厂函数创建对象我们可以编写一个函数,此函数的功能就是创建对象,可将其. 概述 使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法. 然而,除了这两种常用的对象创建方式,JavaScript还提

JavaScript中Function函数与Object对象的关系

Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 今天我们来尝试理解Function和Object.因为这个里面有些人前期可能会搞糊涂.他们之间到底是什么关系.当然也不除外当初的我. 注意:官方定义: 在Javascript中,每一个函数实际上都是一个函数对象. 我们先来看最简单的两个代码,也是最容易理解的. function fn(){} var obj = {}

JavaScript极简入门教程(二):对象和函数

阅读本文需要有其他语言的编程经验. JavaScript 中的简单类型包括: 1.数字 2.字符串 3.布尔(true 和 false) 4.null 5.undefined 此外的其他类型均是对象(我们不要被 typeof 操作符的返回值所迷惑),例如: 1.函数 2.数组 3.正则表达式 4.对象(对象自然也是对象) 对象基础 在 JavaScript 中,对象是属性的集合(对象为关联数组),每个属性包括: 1.属性名,必须为字符串 2.属性值,可以为除了 undefined 之外的任何值

详解JavaScript中的函数、对象

JS中的函数声明方式 方式一 function 函数名(){ 函数体 } 方式二 var 函数名=function(){ 函数体 } 方式三 var 函数名=new Function("函数体"): 执行方式 函数名(); JS中的对象 类似Java中的一些系统预设好的类 日期对象 function testDate(){ var date=new Date(); //本月中的第几天 document.write(date.getDate()+"<br />&qu

详解JavaScript对象类型

JavaScrtip有六种数据类型,一种复杂的数据类型(引用类型),即Object对象类型,还有五种简单的数据类型(原始类型):Number.String.Boolean.Undefined和Null.其中,最核心的类型就是对象类型了.同时要注意,简单类型都是不可变的,而对象类型是可变的.  什么是对象  一个对象是一组简单数据类型(有时是引用数据类型)的无序列表,被存储为一系列的名-值对(name-value pairs).这个列表中的每一项被称为 属性(如果是函数则被称为 方法).  下面是

JavaScript 对象详细整理总结

Javascript 对象总结: JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自有的属性外,还可以从一个称为原型的对象继承属性.对象的方法通常是继承的属性.这种"原型式集成"是JavaScript的的核心特征. 1.创建对象 第一种:对象直接量表示法创建对象. 这是最简单的对象创建方式,对象直接量由若干key:value键值对属性组成