百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

JavaScript中常用数据类型,你知道几个?

zhezhongyun 2025-06-15 20:39 45 浏览

本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!

作者| 慕课网精英讲师 Lison

这篇文章我们了解一下 JavaScript 中现有的八个数据类型,当然这并不是 JavaScript 中的所有数据类型,而是现在版本的 TypeScript 支持的基本类型,在学习基础类型之前,我们先来看下如何为一个变量指定类型:

为一个变量指定类型的语法是使用"变量: 类型"的形式,如下:

let num: number = 123

如果你没有为这个变量指定类型,编译器会自动根据你赋给这个变量的值来推断这个变量的类型:

let num = 123
num = 'abc' // error 不能将类型“"123"”分配给类型“number”

当我们给num赋值为123但没有指定类型时,编译器推断出了num的类型为number数值类型,所以当给num再赋值为字符串"abc"时,就会报错。

这里还有一点要注意,就是numberNumber的区别:TS中指定类型的时候要用number,这个是TypeScript的类型关键字。而Number为JavaScript的原生构造函数,用它来创建数值类型的值,它俩是不一样的。包括你后面见到的stringboolean等都是TypeScript的类型关键字,不是JavaScript语法,这点要区分开。接下来我们来看下,这八个JS中你见过的类型

2.1.1 布尔类型

类型为布尔类型的变量的值只能是 true 或 false,如下:

let bool: boolean = false;
bool = true;
bool = 123; // error 不能将类型"123"分配给类型"boolean"

当然了,赋给 bool 的值也可以是一个计算之后结果是布尔值的表达式,比如:

let bool: boolean = !!0
console.log(bool) // false

2.1.2 数值类型

TypeScript 和 JavaScript 一样,所有数字都是浮点数,所以只有一个number类型,而没有int或者float类型。而且 TypeScript 还支持 ES6 中新增的二进制和八进制数字字面量,所以 TypeScript 中共支持二、八、十和十六四种进制的数值。

let num: number;
num = 123;
num = "123"; // error 不能将类型"123"分配给类型"number"
num = 0b1111011; //  二进制的123
num = 0o173; // 八进制的123
num = 0x7b; // 十六进制的123

2.1.3 字符串

字符串类型中你可以使用单引号和双引号包裹内容,但是可能你使用的 tslint 规则会对引号进行检测,使用单引号还是双引号可以在 tslint 规则里配置。你还可以使用 ES6 语法——模板字符串,拼接变量和字符串更为方便。

let str: string = "Lison";
str = "Li";
const first = "Lison";
const last = "Li";
str = `${first} ${last}`;
console.log(str) // 打印结果为:Lison Li

另外还有个和字符串相关的类型:字符串字面量类型。即把一个字符串字面量作为一种类型,比如上面的字符串"Lison",当你把一个变量指定为这个字符串类型的时候,就不能再赋值为其他字符串值了,如:

let str: 'Lison'
str = 'haha' // error 不能将类型“"haha"”分配给类型“"Lison"”

2.1.4 数组

在 TypeScript 中有两种定义数组的方式:

let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

第一种形式通过number[]的形式来指定这个类型元素均为number类型的数组类型,这种写法是推荐的写法,当然你也可以使用第二种写法。注意,这两种写法中的number指定的是数组元素的类型,你也可以在这里将数组的元素指定为任意类型。如果你要指定一个数组里的元素既可以是数值也可以是字符串,那么你可以使用这种方式:number|string[],这种方式我们在后面学习联合类型的时候会讲到。

当你使用第二种形式定义时,tslint 可能会警告让你使用第一种形式定义,如果你就是想用第二种形式,可以通过在 tslint.json 的 rules 中加入"array-type": [false]关闭 tslint 对这条的检测。

后面我们讲接口的时候,还会讲到数组的一个特殊类型:ReadonlyArray,即只读数组。

2.1.5 null 和 undefined

null 和 undefined 有一些共同特点,所以我们放在一起讲。说它们有共同特点,是因为在 JavaScript 中,undefined 和 null 是两个基本数据类型。在 TypeScript 中,这两者都有各自的类型即 undefined 和 null,也就是说它们既是实际的值,也是类型,来看实际例子:

let u: undefined = undefined;// 这里可能会报一个tslint的错误:Unnecessary initialization to 'undefined',就是不能给一个值赋undefined,但我们知道这是可以的,所以如果你的代码规范想让这种代码合理化,可以配置tslint,将"no-unnecessary-initializer"设为false即可
let n: null = null; 

默认情况下 undefined 和 null 可以赋值给任意类型的值,也就是说你可以把 undefined 赋值给 void 类型,也可以赋值给 number 类型。当你在 tsconfig.json 的"compilerOptions"里设置了"strictNullChecks": true时,那必须严格对待。undefined 和 null 将只能赋值给它们自身和 void 类型,void类型我们后面会学习。

2.1.6 object

object 在 JS 中是引用类型,它和 JS 中的其他基本类型不一样,像 number、string、boolean、undefined、null 这些都是基本类型,这些类型的变量存的是他们的值,而 object 类型的变量存的是引用,看个简单的例子:

let strInit = "abc";
let strClone = strInit;
strClone = "efg";
console.log(strInit); // 'abc'

let objInit = { a: "aa" };
let objClone = objInit;
console.log(objClone) // {a:"aa"}
objInit.a = "bb";
console.log(objClone); // { a: 'bb' }

通过例子可以看出,我们修改 objInit 时,objClone 也被修改了,是因为 objClone 保存的是 objInit 的引用,实际上 objInit 和 objClone 是同一个对象。

当我们希望一个变量或者函数的参数的类型是一个对象的时候,使用这个类型,比如:

let obj: object
obj = { name: 'Lison' }
obj = 123 // error 不能将类型“123”分配给类型“object”

这里有一点要注意了,你可能会想到给 obj 指定类型为 object 对象类型,然后给它赋值一个对象,后面通过属性访问操作符访问这个对象的某个属性,实际操作一下你就会发现会报错:

let obj: object
obj = { name: 'Lison' }
console.log(obj.name) // error 类型“object”上不存在属性“name”

这里报错说类型 object 上没有 name 这个属性。如果你想要达到这种需求你应该使用我们后面章节要讲到的接口,那 object 类型适合什么时候使用呢?我们前面说了,当你希望一个值必须是对象而不是数值等类型时,比如我们定义一个函数,参数必须是对象,这个时候就用到object类型了:

function getKeys (obj: object) {
    return Object.keys(obj) // 会以列表的形式返回obj中的值
}
getKeys({ a: 'a' }) // ['a']
getKeys(123) // error 类型“123”的参数不能赋给类型“object”的参数

这里你要明白object类型的使用。

2.1.6 symbol

Symbol 是 ES6 加入的新的基础数据类型,因为它的知识比较多。

本节小结

本篇文章我们总结了八个在JavaScript中我们就见过的数据类型,它们是:布尔类型、数值类型、字符串、数组、null、undefined、object以及ES6中新增的symbol。在TypeScript中它们都有对应的类型关键字,对应关系为:

  • 布尔类型:boolean
  • 数值类型:number
  • 字符串类型:string
  • 数组:Array<type>或type[]
  • 对象类型:object
  • Symbol类型:symbol
  • null和undefined:null 和 undefined,这个比较特殊,它们自身即是类型

这些类型是基础,我们后面的高级类型很多都是它们的组合或者变形,所以一定要把这些基础先学会。

欢迎关注「慕课网」,发现更多IT圈优质内容,分享干货知识,帮助你成为更好的程序员!

相关推荐

3D边框效果绝了Jetpack Compose也太会玩了吧

在JetpackCompose中创建惊艳的3D边框效果大家好!今天我要分享一个超酷的技巧——如何在JetpackCompose中创建3D边框效果。这种效果可以应用于任何视图和任何形状...

“雨”你同行,他们在岗位上为您守护……

7月10日京津冀地区迎来降雨天气京铁人以“降雨预警”为令迎风而上逆水而行全力守护铁路运输安全雨帘下的“摆渡人”北京站、石家庄站及时铺设防滑垫,检查排水设施,确保旅客行走通道安全。北京北站加密站台巡视...

战士实用小福利!巧用宏命令让血条更直观

很多战士朋友经常被怒气和血条所困扰,如何及时的进行规避开启防御技能?如何更好的利用怒气打出伤害?成为了众多战士的首要问题。现在即使在没有插件的支持下我们也可以实现这样的功能,巧用宏命令就可以让怒气和血...

python操作word 添加导航栏,导航栏在左边显示

点赞标记,明天就能用上这几个技巧!要实现Python生成Word文档并显示左侧导航栏(即导航窗格),需通过标题样式标记文档结构+修改文档视图设置两步完成。以下是详细且经过验证的解决方案,基于pytho...

田渊栋等原班人马作:AI生成长篇故事,数千字长文也能连贯、有趣

机器之心报道编辑:小舟、陈萍以后,写故事这脑力活可以交给AI了。前段时间,模仿人类写作过程的语言模型Re^3发布,该模型不需要微调大模型,而是通过设计prompt来生成一致性强的故事。现在...

VBA常用代码_1、文本格式整理

本人财务岗位,非专业编程人员,请勿以专业看待哈,能用无BUG即可!均是我在工作中常用的补充功能,且具有通用性的功能。基于实用性而编写。不见理论,只需要你会复制粘贴就行。看完第一篇文章,结合之后更新的内...

行业首选的文档管理工具Aspose.Words新版本v16.3.0发布

Aspose.Words是一款先进的文档处理控件,在不使用MicrosoftWords的情况下,它可以使用户在各个应用程序中执行各种文档处理任务,其中包括文档的生成、修改、渲染、打印,文档格式转换和...

作为前端工程师必须懂得的33个CSS核心概念

你真的懂CSS吗?层叠样式表(CSS)是网页设计的支柱,能将单调的HTML转变为视觉惊艳的交互界面。要精通CSS,必须理解从基础选择器到动画、响应式设计等高级技巧在内的核心概念。无论你是初学者还是资深...

全力做好节假日期间服务保障工作

为保障五一期间ETC运营工作正常有序开展,甘肃省高速公路ETC管理服务中心全力以赴、恪尽职守,使各项工作有备无患。一是要求中心全体职工牢固树立安全发展观念,时刻紧绷“安全弦”,夯实安全生产基础,落实安...

Manila&#39;s hyping up of illegal &#39;arbitral award&#39; nothing but a damp squib

Manila'shypingupofillegal'arbitralaward'nothingbutadampsquib:ChinaDailyeditorial-Opi...

QLabel 文字两端对齐解决方案

在Qt开发中,实现QLabel文字两端对齐是一个常见需求。本文将介绍多种在Qt中实现QLabel文字两端对齐的方法及其原理。Qt本身具备文字两端对齐的支持,但需要同时使用Qt::AlignJ...

tkinter中的一些自定义控件,你知道几个呢?

用tkinter图形库编写过界面的朋友都知道,tkinter中拥有的图形控件很少,ttk中虽然新增了一些,但是这也不足以满足我们的使用,因为我们在编写图形界面的时候会用到各种各样的控件,有些是tkin...

一个人的婚礼:她送给自己的新婚礼物是遗体捐献书

style="text-indent:2em;">1月20日,在重庆武隆区医院的病房里,爱心人士为21岁的杨春燕在医院举办了一场没有新郎的婚礼,圆了春燕穿婚纱、走红毯的心愿,仪式后春燕签署了遗体...

毕业论文小技巧:word排版之章节自动化编号

设置大纲多级列表目的是方便增删章节时实现章节标号的自动编号,并且实现论文图表公式编号按照章节顺序自动编号。准备工作:假设前面已经定义好章节标题样式分别为标题一论文章标题、论文节标题、论文小节标题、论文...

伊朗呼吁土耳其立即终止对叙军事行动

style="text-indent:2em;">新华社德黑兰1月21日电(记者马骁穆东)伊朗外交部21日发表声明说,希望土耳其立即终止在叙利亚阿夫林发起的军事行动,避免叙北部危机进一步恶化。...