Skip to main content

moregeek program

javascript中常用数据类型,你知道几个?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 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,这个比较特殊,它们自身即是类型

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

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

©著作权归作者所有:来自51CTO博客作者imooc慕课君的原创作品,请联系作者获取转载授权,否则将追究法律责任

typescript应该怎么学?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 Lison如果自学TypeScript,到底要如何学呢?1.2.1 学会看文档英文官方文档始终是及时更新的。但即便是官方的文档,有一些更新在更新日志里写了,而新手指南里却没有及时同步更新,所以有时看指南也会遇到困惑,就是文档里写的和你实际验证的效果不一样。遇到这种问题,首先确定你使用的TypeScript版本,然后去更新日志里根据不同版本找对这部分知识的更新记录。如果找到了

学会二阶思维,你就能像巴菲特一样思考了_华为云开发者社区的博客-多极客编程

摘要:养成二阶思维的习惯是一个漫长、痛苦的过程,但坚持下来,总会收获很大。本文分享自华为云社区《​​二阶思维​​》,作者:元闰子。事情往往不是你想象的那样,有时候,看似解决了问题,却在不经意间,引发了更严重的后果。帮助我们思考、决策、解决问题的最有效方法是,运用二阶思维。什么是二阶思维?一阶思维是单纯而肤浅的,几乎人人都能做到;二阶思维则是深邃、复杂而迂回的,能做到的人少之又少。—— 霍华德·马克

什么是 webpack?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 三水清随着 Web 前端的不断发展,传统网页开发正在逐渐往 Web 应用(Web Application,简称 WebAPP)的开发方式转变,页面开始变得越来越复杂,复杂的应用场景必然引起技术的进步,还会出现新的技术手段来解决现有问题。前端模块化和工程化的呼声越来越高,随着前些年大行其道的 Grunt、Gulp、FIS 等构建工具的发展,带动了一波前端工程化热潮。近几年,经

【项目管理过程的五个阶段是什么?】_王小呆的博客-多极客编程

项目管理过程的五个阶段一般包括:启动、规划、执行、监控、收尾。但很多人对项目管理的全流程只知道这五大过程组。这五大过程组之间的关系是怎样的?项目管理的全流程又是什么样的?在每个流程中有什么核心工作是项目经理需要重点关注的?下面本文就围绕五大过程组以及以上问题进行介绍:一、项目的基本流程项目的基本流程是一个可循环的流程,它虽然建立在项目管理的流程之上,但还是存在一定差异:二、项目管理流程的详细介绍1

一软一硬:记录我的工作电脑两次出现性能问题的分析思路和解决过程_汪子熙的 sap 技术分享的博客-多极客编程

作为一个程序员,每天工作中糟心的事情之一,莫过于自己用来编码的计算机,运行速度忽然变得奇慢无比。尤其像我这种年过四旬仍然在一线从事编码工作的老程序员来说,只有靠不断提高单位时间的产出效率,来弥补和年轻程序员体力和精力上的差距。所以工作电脑性能忽然急剧下降,是一件让我无法接受的事情。 作为一个在 SAP 领域工作了 15 年的开发人员(详情参考我的文章:一个 SAP 开发工程师的成长史),我已经记不

【嗨,醒醒,醒醒,起来删库跑路了】_王小呆的博客-多极客编程

学会MySql从删库到跑路,哈哈哈哈哈哈~~~~~~​哈哈哈哈哈哈哈~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~下面就来给大家讲解一下相关的过程跟流程前言:1、新建用户:    >CREATE USER name IDENTIFIED BY 'ssapdrow';  2、更改密码:    >SET PASSWORD  for name=PASSWORD('fddd

什么是web3?_sleep666的博客-多极客编程

Web3 简介中心化网络已经帮助数十亿人融入了互联网,并在其上创建了稳定、可靠的基础设施。 与此同时,少数中心化巨头几乎垄断了互联网,甚至可以为所欲为。Web3 是摆脱由中心化导致互联网巨头形成垄断这一困境的有效方案。 不同于科技巨头垄断的传统互联网,Web3 采用去中心化,整个网络和网络上的内容由所有用户构建、运营和拥有。 Web3 将权力赋予每一个个体而非公司。 在我们讨论 Web3 之前,先

用js写一个区块链的原型_sleep666的博客-多极客编程

Hash主要是用于消息摘要和签名。开发中经常使用的MD5和SHA都是历史悠久的Hash算法。特点从hash值不可以反向推导出原始的数据输入数据的微小变化会得到完全不同的hash值相同的数据会得到相同的值执行效率要高效,长的文本也能快速地计算出哈希值hash算法的冲突概率要小用md5做个测试~ md5 -s "hello World"MD5 ("hello World") = 39d11ab1c3c

轻松上手 | 使用国内资源安装 k3s 全攻略_rancher labs的博客-多极客编程

作者:王海龙,SUSE Rancher 中国社区技术经理,Linux Foundation APAC Evangelist,负责 Rancher 中国技术社区的维护和运营。拥有 8 年的云计算领域经验,经历了 OpenStack 到 Kubernetes 的技术变革,无论底层操作系统 Linux,还是虚拟化 KVM 或是 Docker 容器技术都有丰富的运维和实践经验。近期,经常有小伙伴在 K3s

生产环境服务器磁盘配置参考_虚拟的现实的博客-多极客编程

1.简介在“Linux 系统生产环境配置指南” ​​https://blog.51cto.com/waringid/5782872​​ 中简要说明了生产环境物理服务器的配置要求,在实际的业务环境需要综合考虑性能和业务匹配情况,这中间最重要的是服务器磁盘配置。当前磁盘的类型按介质分为机械磁盘和固态磁盘,但是不同接口和型号的磁盘价格相差大且类型也多,如何搭配满足生产业务需求需要综合评估。2.名词解释

solidity数据类型_sleep666的博客-多极客编程

Solidity 是一种静态类型语言,这意味着每个变量(状态变量和局部变量)都需要在编译时指定变量的类型。Solidity 提供了几种基本类型,并且基本类型可以用来组合出复杂类型。除此之外,类型之间可以在包含运算符号的表达式中进行交互。“​​undefined​​​”或“​​null​​​”值的概念在Solidity中不存在,但是新声明的变量总是有一个 默认值 ,具体的默认值跟类型相关。 要处理任

remix基本使用_sleep666的博客-多极客编程

Remix 是以太坊智能合约编程语言Solidity IDE,其实基于浏览器的IDE,有一个很大的好处就是不用安装,打开即用。在线Remix访问缓慢,如果你有很好的网络环境,可以直接访问Remix​​官网​​ ​​https://remix.ethereum.org/​​。也可以本地部署一套。在本地部署Remix需要准备两个东西:一个是Remix-project,可以理解为Remix的前端;另一个