您现在的位置是:首页 > Javascript
当前栏目
TypeScript 中 Const 和 Readonly 的区别?枚举和常量枚举的区别?
2023-03-07 09:48:57 时间
本文转载自微信公众号「三分钟学前端」,作者sisterAn 。转载本文请联系三分钟学前端公众号。
TypeScript 中 const 与 readonly 的区别?
TypeScript 中不可变量的实现方法有两种:
- 使用 ES6 的 const 关键字声明的值类型
- 被 readonly 修饰的属性
TypeScript 中 readonly
TypeScript 中的只读修饰符,可以声明更加严谨的可读属性
通常在 interface 、 Class 、 type 以及 array 和 tuple 类型中使用它,也可以用来定义一个函数的参数
- // type
- type Foo = {
- readonly bar: number;
- };
- // const 确保 'config' 不能够被改变了
- const foo: Foo = { bar: 123 };
- // 不能被改变
- foo.bar = 456; // Error: foo.bar 为仅读属性
- // 函数
- function foo(config: { readonly num: number }) {
- // ..
- }
- const config = { num: 123 }
- foo(config)
区别
- const 用于变量, readonly 用于属性
- const 在运行时检查, readonly 在编译时检查
- const 声明的变量不得改变值,这意味着,const 一旦声明变量,就必须立即初始化,不能留到以后赋值; readonly 修饰的属性能确保自身不能修改属性,但是当你把这个属性交给其它并没有这种保证的使用者(允许出于类型兼容性的原因),他们能改变
- const foo: {
- readonly bar: number;
- } = {
- bar: 123
- };
- function iMutateFoo(foo: { bar: number }) {
- foo.bar = 456;
- }
- iMutateFoo(foo);
- console.log(foo.bar); // 456
此时,需要 iMutateFoo 明确的表示,他们的参数不可修改,那么编译器会发出错误警告:
- function iTakeFoo(foo: Foo) {
- foo.bar = 456; // Error: bar 属性只读
- }
- const 保证的不是变量的值不得改动,而是变量指向的那个内存地址不得改动,例如使用 const 变量保存的数组,可以使用 push , pop 等方法。但是如果使用 ReadonlyArray
声明的数组不能使用 push , pop 等方法。
枚举和常量枚举的区别?
枚举和常量枚举(const枚举)
使用枚举可以清晰地表达意图或创建一组有区别的用例
- // 枚举
- enum Color {
- Red,
- Green,
- Blue
- }
- // 常量枚举
- const enum Color {
- Red,
- Green,
- Blue
- }
区别
- 枚举会被编译时会编译成一个对象,可以被当作对象使用
- const 枚举会在 typescript 编译期间被删除,const 枚举成员在使用的地方会被内联进来,避免额外的性能开销
- // 枚举
- enum Color {
- Red,
- Green,
- Blue
- }
- var sisterAn = Color.Red
- // 会被编译成 JavaScript 中的 var sisterAn = Color.Red
- // 即在运行执行时,它将会查找变量 Color 和 Color.Red
- // 常量枚举
- const enum Color {
- Red,
- Green,
- Blue
- }
- var sisterAn = Color.Red
- // 会被编译成 JavaScript 中的 var sisterAn = 0
- // 在运行时已经没有 Color 变量
来源:https://github.com/Advanced-Frontend/Daily-Interview-Question
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?