你真的了解JS的数据类型?

JavaScript的数据类型.png

数值(number):整数和小数(比如1和3.14)
字符串(string):文本(比如Hello World)。
布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假)
undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值
null:表示空值,即此处的值为空。
Symbol:es6新增的类型的值
对象(object):各种值组成的集合。狭义的对象(object),数组(array),函数(function)

object是复杂数据类型,是由简单的数据类型组成的,除object外均为基础数据类型/简单数据类型

typeof运算符

JavaScript有三种方法,可以确定一个值到底是什么类型。

  • typeof运算符
  • instanceof运算符
  • Object.prototype.toString方法
    下面使用typeof运算符判断数据类型
    例子:
typeof 123 //"number"
typeof "123" //"string"
typeof true //"boolean"
typeof undefined //"undefined"
typeof null //"object"
typeof function f(){} //"object"
typeof [] //"object"
typeof {} //"object"

从上面的例子的结果,你会发现为什么null的类型不是null,而是object等等的问题

JS的Bug小汇总

  • typeof null //"object"
  • typeof function f(){} //"function"

null的类型是object,这是由于历史原因造成的。1995年的 JavaScript 语言第一版,只设计了五种数据类型(对象、整数、浮点数、字符串和布尔值),没考虑null,只把它当作object的一种特殊值。后来null独立出来,作为一种单独的数据类型,为了兼容以前的代码,typeof null返回object就没法改变了

number

1.1 整数和浮点数

JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)由于浮点数不是精确的值,所以涉及小数的比较和运算要特别小心
1.2 数值精度
根据国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。

  • 第1位:符号位,0表示正数,1表示负数
  • 第2位到第12位(共11位):指数部分
  • 第13位到第64位(共52位):小数部分(即有效数字)
  • 符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度。
    1.3 数值范围

根据标准,64位浮点数的指数部分的长度是11个二进制位,意味着指数部分的最大值是2047(2的11次方减1)。也就是说,64位浮点数的指数部分的值最大为2047,分出一半表示负数,则 JavaScript 能够表示的数值范围为21024到2-1023(开区间),超出这个范围的数无法表示。
2.表示的方式
就是直接表示和科学计数法两种方式,特殊情况,JavaScript 会自动将数值转为科学计数法表示,其他情况都采用字面形式直接表示。

//小数点前的数字多于21位
1234567890123456789012
// 1.2345678901234568e+21

//小数点后的零多于5个,就自动转为科学计数法
0.0000003 // 3e-7

3.数值的进制
直接表示的时候也是可以输入十进制之外的进制数的,比如二进制、八进制、十六进制。

  • 十进制(decimal):没有前导0的数值。
  • 八进制(octonary):有前缀0o或0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制(hexadecimal):有前缀0x或0X的数值。
  • 二进制(binary):有前缀0b或0B的数值。
255 //255
0xff // 255
0377 // 255
0b11 // 3

4.特殊的值

  • 正零和负零:JavaScript 内部实际上存在2个0:一个是+0,一个是-0,区别就是64位浮点数表示法的符号位不同。它们是等价的。
  • NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。真正的奇葩,因为他自己也不等于自己。NaN === NaN // false
  • Infinity表示“无穷”,用来表示两种场景。一种是一个正的数值太大,或一个负的数值太小,无法表示;另一种是非0数值除以0,得到Infinity。

Infinity的四则运算,符合无穷的数学计算规则。
0乘以Infinity,返回NaN;0除以Infinity,返回0;Infinity除以0,返回Infinity。
Infinity加上或乘以Infinity,返回的还是Infinity。
Infinity减去或除以Infinity,得到NaN。
Infinity与null计算时,null会转成0,等同于与0的计算。
Infinity与undefined计算,返回的都是NaN。

5.与数值相关的全局方法

  • parseInt()//将字符串转为整数,自动去除字符串头部的空格,parseInt的参数如果不是字符串,会先转换为字符串再转换。遇到不是数字的就停止。如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN。
  • parseFloat()//将一个字符串转为浮点数,如果字符串包含不能转为浮点数的字符,则不再进行往后转换,返回已经转好的部分。InFinity、NaN、undefined、返回false。parseFloat会将空字符串转为NaN。
  • isNaN()//判断一个值是否为NaN
  • isFinity()//表示某个值是否为正常的数值。只对+InFinity、-InFinity、NaN、undefined、返回false。

parseInt方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。默认情况下,parseInt的第二个参数为10,即默认是十进制转十进制。

parseInt('   81') // 81
parseInt('15px') // 15
parseInt('1000', 2) // 8
parseFloat('3.14more non-digit characters') // 3.14
isNaN('Hello') // true
isFinite(null) // true

string

字符串就是零个或多个排在一起的字符,放在单引号双引号之中。
奇葩需求1:

  • 在单引号字符串的内部,使用单引号
  • 在双引号字符串的内部,使用双引号
    我不能使用小技巧,那我只能叫我大哥(转义符)出来走一下啦
'Did she say \'Hello\'?'
// "Did she say 'Hello'?"

"Did she say \"Hello\"?"
// "Did she say "Hello"?"

奇葩需求2:长字符串必须分成多行
解决方法:

//方法1(坑人语法),但是使用不小心会出bug,记得反斜杠的后面必须是换行符,而不能有其他字符(比如空格),否则会报错,不信,你可以试一下
var s1 = '12345\
67890'

//方法2(好读语法)
var s2 = '12345'+
'67890'

//方法3(ES6新出的),使用反引号(1左边的符号)
var s3 = `12345
67890`
s3.length //11,会包含回车

boolean

布尔值相当于是一个开关,布尔值代表“真”和“假”两个状态。“真”用关键字true表示,“假”用关键字false表示。布尔值只有这两个值。
例子:

var a = true;
if(a){
    console.log("条件为真");
}else{
    console.log("条件为假");
}

下列运算符会返回布尔值:

  • 两元逻辑运算符: && (And),|| (Or)
  • 前置逻辑运算符: ! (Not)
  • 相等运算符:===,!==,==,!=
  • 比较运算符:>,>=,<,<=
    敲黑板,重点来啦
    除了下面六个值被转为false,其他值都视为true
    null undefined ''"/''(空字符串) null false NaN

undefined & null

null与undefined都可以表示“没有”,含义非常相似。将一个变量赋值为undefined或null,老实说,语法效果几乎没区别。

  • null是一个表示“空”的对象
  • undefined是一个表示"此处无定义"的原始值
    那我偏偏说他们俩是有具体区别怎么办?
  • (语法规范)如果一个变量被声明了,但是没有被赋值,那么这个变量的值就是 undefiend
  • (惯例)如果想要表示一个还没赋值的对象,就用 null。如果想要表示一个还没赋值的非对象(字符串/数字/布尔/symbol),就用 undefined

object

对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合。key代表键名,value代表键值

  1. key
    对象的所有键名都是字符串。如果键名是数值,会被自动转为字符串。如果键名不符合标识名的条件(比如第一个字符为数字,或者含有空格或运算符),且也不是数字,则必须加上引号,否则会报错。
    2.value
    value的值可以是任意的数据类型
    3.属性的读取
    读取对象的属性,有两种方法,一种是使用点运算符,还有一种是使用方括号运算符。
var obj = {
  123: 'hello world'
};

obj.123 // 报错
obj[123] // "hello world"

4.属性的赋值
点运算符和方括号运算符,不仅可以用来读取值,还可以用来赋值。
5.属性的查看
查看一个对象本身的所有属性,可以使用Object.keys方法。

var obj = {
  key1: 1,
  key2: 2
};

Object.keys(obj);
// ['key1', 'key2']

6.属性的删除:delete 命令
delete命令用于删除对象的属性(删除键名和键值),删除成功后返回true。
delete命令会返回false,那就是该属性存在,且不得删除。
7.属性是否存在:in 运算符
in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值),如果包含就返回true,否则返回false。它的左边是一个字符串,表示属性名,右边是一个对象。

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

8.属性的遍历:for...in 循环
for...in循环用来遍历一个对象的全部属性。

var obj = {a: 1, b: 2, c: 3};

for (var i in obj) {
  console.log('键名:', i);
  console.log('键值:', obj[i]);
}
  • 它遍历的是对象所有可遍历(enumerable)的属性,会跳过不可遍历的属性。
  • 它不仅遍历对象自身的属性,还遍历继承的属性。
    9.with 批量操作
    操作同一个对象的多个属性
    建议不要使用with语句,可以考虑用一个临时变量代替with。
    参考资料:
    阮一峰JavaScript 标准参考教程
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 什么是 JavaScript 语言? JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script...
    oWSQo阅读 1,785评论 0 1
  • 教程 https://wangdoc.com/javascript/types/general.html 1 概述...
    智勇双全的小六阅读 568评论 0 0
  • 年末正忙,闺密阿美来电话了,言辞躲闪顾左右而言他,没工夫陪她闲聊。直接问,到底咋了?这才告诉我,月末她儿子的订婚宴...
    声声香阅读 499评论 2 6
  • 梨花满地不开门 文/诺言 (据唐朝诗人刘方平的《春怨《》和《采莲曲》两首诗改编) 唐天宝年初,大唐文风鼎盛,物华天...
    任飛宇阅读 440评论 0 5