JavaScript学习之数据类型(1)

1.简介

JavaScript 的数据类型有6种

  • 数值(number):整数和小数(比如1和3.14)
  • 字符串(string): 文本(比如Hello World)。
  • 布尔值(boolean): 即* true(真)和false(假)
  • undefined: 表示“未定义”或不存在
  • null: 表示空值,即此处的值为空。
  • 对象(object): 各种值组成的集合。

1.数值,字符串,布尔值这三种类型,全称为原始类型(primitive type)的值,不可再细分
2.对象则称为合成类型(complex type)的值,
3.undefinednull,特殊值

JavaScript 有三种方法,可以确定一个值到底是什么类型。分别是typeof运算符,instanceof运算符,Object.prototype.toString方法

typeof 123 //"number"
typeof abc //"undefined" 因为abc没有未定义
typeof 'abc' //"string"
typeof false //"boolean"
typeof null //"object"

2.null 和 undefined

1.类型不一样:
console.log(typeOf undefined);//undefined
console.log(typeOf null);//object

2.转化为值时不一样:undefined为NaN ,null为0
console.log(Number(undefined));//NaN
console.log(Number(10+undefined));//NaN
console.log(Number(null));//0
console.log(Number(10+null));//10

3.比较
undefined === null;//false
undefined == null;//true

3.布尔值(boolean)

真用true表示,假用false表示
false,undefined,null,0,NaN,""''(空字符串) 这几个值都会被转换为false
空数组([])和空对象({})对应的布尔值,都是true

4.数值(number)

JavaScript内部所有的数字都是以64位浮点数形式储存,因此

1 === 1.0 //true

JavaScript 浮点数在计算中要注意精度问题

0.1 + 0.2 == 0.3 // false
0.3 / 0.1 //2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1) //false

4.1数值的精度

JavaScript 浮点数的64个二进制位,从最左边开始

  • 第1位:符号位,0表示正数,1表示负数
  • 第2位到第12位(共11位):指数部分
  • 第13位到第64位(共52位):小数部分(即有效数字)

符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度,指数位有11个二进制位,因此通过Math.pow(2,11)可算出范围是0~2047, IEEE 754 规定,如果指数部分的值在0~2047之间(不含两个端点,那么有效数字的第一位默认总是1,也就是说,有效数字这时总是1.xx...xx的形式,其中xx..xx的部分保存在64位浮点数之中,最长可能为52位。因此,JavaScript 提供的有效数字最长为53个二进制位。

公式
(-1)^符号位 * 1.xx...xx * 2^指数部分

因此JavaScrip能够表示的数的精度范围是-2^53 到2^53

Math.pow(2, 53) // 9007199254740992 
Math.pow(2, 53) + 1 // 9007199254740992 精度不准
Math.pow(-2, 53) //-9007199254740992 
Math.pow(-2, 53) - 1 //-9007199254740992 精度不准

4.2 数值范围

64位浮点数的指数部分的值最大为2047,正负数各占一半,因此JavaScript 能够表示的数值范围为2^1024 ~ 2^-1023(开区间),如果一个数大于等于2的1024次方,就会发生“正向溢出”,返回值为Infinity

Math.pow(2, 1024) // Infinity

如果一个数小于等于2的-1024次方,就会发生“逆向溢出”,返回值为0

Math.pow(2, -1075) // 0
Number.MAX_VALUE //1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

4.3数值的表示法

当以下两种情况时,JavaScript会自动转化为科学计数法

  • 小数点前的数字多余21个
1234567890123456789012   //输出 1.2345678901234568e+21

123456789012345678901   //输出 123456789012345680000
  • 小数点后的零多于5个
0.0000001 // 1e-7
0.000001 //0.000001

4.4数值的进制

  • 十进制:我们平时正常用的数字
  • 二进制:前缀0b0B
  • 八进制:前缀0O0o 或者只用了前导0,且只用了0~7的八个阿拉伯数字
  • 十六进制:前缀0x0X

4.5特殊数值

4.5.1 正零和负零

除了正零和负零做分母的时候值不同,其他时候正零和负零是一样的

(1 / +0) === (1 / -0) // false

是因为除以正零得到+Infinity,除以负零得到-Infinity,这两者是不相等的

4.5.2 NaN

NaN是特殊值,表示"非数字"(Not a Number)

5 - 'x' // NaN

0除以0也会得到NaN

0 / 0 // NaN

NaN不等于任何值,包括它本身。

NaN === NaN // false

NaN在布尔值中是false
NaN在与任何数(包括他自己)运算时都显示的是NaN

4.5.3 Infinity

Infinity有正负之分,Infinity表示正的无穷,-Infinity表示负的无穷
Infinitynull计算时,null会转成0,等同于与0的计算。
Infinityundefined计算,返回的都是NaN。

Math.pow(2, 1024) // Infinity
0 / 0 // NaN
1 / 0 // Infinity
Infinity === -Infinity // false
1 / -0 // -Infinity
-1 / -0 // Infinity

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

4.6.1 parseInt()

将字符串转为整数。

parseInt('123') // 123

如果字符串头部有空格,空格会被自动去除。

parseInt('   123') // 123

如果parseInt的参数不是字符串,则会先转为字符串再转换。

parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。

parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

所以,parseInt的返回值只有两种可能,要么是一个十进制整数,要么是NaN

parseInt方法还可以接受第二个参数(2 ~ 36)之间的整数,表示被解析的值的进制,返回该值对应的十进制数,如果超出这个范围,则返回NaN。如果第二个参数是0undefinednull,则直接忽略。

parseInt('100') // 100
// 等同于
parseInt('100', 10) // 100

parseInt('100', 2) // 4  二进制数100转化成十进制数 结果为4
parseInt('100', 6) //36
parseInt('100', 8) // 64

如果字符串包含对于指定进制无意义的字符,则从最高位开始,只返回可以转换的数值。如果最高位无法转换,则直接返回NaN。

parseInt('1234', 2) // 1 
parseInt('234', 2) // NaN

4.6.2 parseFloat()

将字符串转为浮点数

parseFloat('3.14') // 3.14
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

如果字符串包含不能转为浮点数的字符,则不再进行往后转换,返回已经转好的部分。

parseFloat('8.88lalala') // 8.88
parseFloat('\t\v\r12.34\n ') // 12.34

如果参数不是字符串,或者字符串的第一个字符不能转化为浮点数,则返回NaN。

4.6.3 isNaN()

判断一个值是否为NaN
isNaN只对数值有效,如果传入其他值,会被先转成数值

isNaN(NaN) // true 
isNaN(123) // false

isNaNtrue的值,有可能不是NaN,而是一个字符串

isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true

对于对象和元素为字符的数组,isNaN也返回true

isNaN({}) // true
// 等同于
isNaN(Number({})) // true

isNaN(['xzy']) // true
// 等同于
isNaN(Number(['xzy'])) // true

对于空数组和只有一个数值成员的数组,isNaN返回false,因为这些数组能被Number函数转成数值

isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false

判断NaN的方法

function myIsNaN(value) {
  return typeof value === 'number' && isNaN(value);
}

//更可靠
function myIsNaN(value) {
  return value !== value;
}

4.6.4 isFinite()

表示某个值是否为正常的数值,返回一个布尔值.

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity、-Infinity、NaNundefined这几个值会返回falseisFinite对于其他的数值都会返回true

5 字符串

字符串就是零个或多个排在一起的字符,放在单引号或双引号之中

'I like China'
'It's a sunny day'
'key = "value"' //key = "value"

单引号中用单引号,要使用'\'转义,双引号同理

'she is so \'sad\''     //she is so 'sad'
"she is so \"sad\""    //she is so "sad"

字符串默认只能写在一行内 分成多行将会报错

' a
b
' //Uncaught SyntaxError: Invalid or unexpected token

如果要换行写,则可以在每一行的尾部使用反斜杠
'a \
b \
c \ ';  //a b c

连接运算符(+)可以连接多个单行字符串

console.log('a' + 'b' + 'c')  //abc

如果想输出多行字符串,有一种利用多行注释的变通方法

(function () { /*
a
b
c
*/}).toString().split('\n').slice(1, -1).join('\n')
//"a
//b
//c"

字符串可以被视为字符数组

var a = 'hello'
a[1]  // e

如果方括号中的数字超过字符串的长度,或者方括号中根本不是数字,则返回undefined

a[10]  //undefined  
a['x'] //undefined

length属性

a.length //5

Base64 转码

JavaScript 原生提供两个 Base64 相关的方法。这两个方法不适合非 ASCII 码的字符,会报错
btoa():任意值转为Base64编码
atob()Base64 编码转为原来的值

var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

btoa('你好') // 报错

要将非 ASCII 码字符转为Base64 编码,必须中间插入一个转码环节,再使用这两个方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

参考链接:https://wangdoc.com/javascript/types/index.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,012评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,589评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,819评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,652评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,954评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,381评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,687评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,404评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,082评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,249评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,864评论 3 232
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2 259

推荐阅读更多精彩内容