【JavaScript之class的使用】JavaScript之class的使用
工作中我们经常需要创建一个object,除了常见的直接定义,还有用构造函数。而class实际上也是构造函数,只不过它是在构造函数上的一层包装。
今天就简单介绍些class的用法并举一个简单的例子。
一、类的声明
要使用到关键字class
举个例子
class DataBase {
constructor(length,keys,values){
this.data = https://www.it610.com/article/[]
for(let i = 0;
i{
obj[key] = values[index]
})
return obj
}
getValue(key,index){
return this.data[index][key]
}
update(key,value,index){
this.data[index][key] = value
}
query(filterFn){
return this.data.filter(filterFn)
}
get(index){
return this.data[index]
}
static test(){
return 'test'
}
}
我们通过class关键字定义了一个DataBase的类
这个类在构建时需要传入三个参数,length、keys、length
构件时创建数组并通过调用内部的createObjectByArray方法初始化data
一个类只有一个constructor方法,里面专门用于创建和初始化一个由class创建的对象。
createObjectByArray、getValue等方法则是其原型方法
前面有static关键字的则是静态方法
静态方法的使用不需要实例化该类,通常用于为一个应用程序创建工具函数(总结起来就是在对于输出-输出非常固定且也不需要和类里面其他的数据绑定的应用场景,没有必要使用实例化方法。)
有兴趣的同学可以试试上面方法,下面举一个简单例子:
const myData = https://www.it610.com/article/new DataBase(6,['name','age'],[null,null])
myData.update('name','Tom',0)
通过类的方式,可以让逻辑、结构显得更加清晰,而不是说我每次维护一个Array的时候都手动修改,维护的多了,再处理还是很麻烦的。
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换