美文网首页
JS数据类型笔记

JS数据类型笔记

作者: kiterumer | 来源:发表于2019-04-01 16:11 被阅读0次

数据类型的判断

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

  • typeof运算符
  • instanceof运算符
  • Object.prototype.toString方法

typeof运算符可以返回一个值的数据类型。数值、字符串、布尔值分别返回number、string、boolean。

函数返回function。

undefined返回undefined。利用这一点,typeof可以用来检查一个没有声明的变量,而不报错。

// 错误的写法
if (v) {
  // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") {
  // ...
}

对象返回object

typeof window // "object"
typeof {} // "object"
typeof [] // "object"

这里顺便提一下,instanceof运算符可以区分数组和对象。

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true

null返回object(历史遗留问题)

null与undefined都可以表示“没有”,含义非常相似。
null表示空值,即该处的值现在为空。调用函数时,某个参数未设置任何值,这时就可以传入null,表示该参数为空。比如,某个函数接受引擎抛出的错误作为参数,如果运行过程中未出错,那么这个参数就会传入null,表示未发生错误。
undefined表示“未定义”,下面是返回undefined的典型场景。

// 变量声明了,但没有赋值
var i;
i // undefined

// 调用函数时,应该提供的参数没有提供,该参数等于 undefined
function f(x) {
  return x;
}
f() // undefined

// 对象没有赋值的属性
var  o = new Object();
o.p // undefined

// 函数没有返回值时,默认返回 undefined
function f() {}
f() // undefined

布尔值

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

  • 前置逻辑运算符: ! (Not)
  • 相等运算符:===,!==,==,!=
  • 比较运算符:>,>=,<,<=

如果 JavaScript 预期某个位置应该是布尔值,会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false,其他值都视为true。

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""或''(空字符串)

注意,空数组([])和空对象({})对应的布尔值,都是true。

数值

JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,1与1.0是相同的,是同一个数。
这就是说,JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)。容易造成混淆的是,某些运算只有整数才能完成,此时 JavaScript 会自动把64位浮点数,转成32位整数,然后再进行运算
由于浮点数不是精确的值,所以涉及小数的比较和运算要特别小心。

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

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

JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。

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

64位浮点数的指数部分的长度是11个二进制位,意味着指数部分的最大值是2047(2的11次方减1)。也就是说,64位浮点数的指数部分的值最大为2047,分出一半表示负数,则 JavaScript 能够表示的数值范围为2的1024次方到2的-1023次方(开区间),超出这个范围的数无法表示。
如果一个数大于等于2的1024次方,那么就会发生“正向溢出”,即 JavaScript 无法表示这么大的数,这时就会返回Infinity。

Math.pow(2, 1024) // Infinity

如果一个数小于等于2的-1075次方(指数部分最小值-1023,再加上小数部分的52位),那么就会发生为“负向溢出”,即 JavaScript 无法表示这么小的数,这时会直接返回0。

Math.pow(2, -1075) // 0

JavaScript 提供Number对象的MAX_VALUE和MIN_VALUE属性,返回可以表示的具体的最大值和最小值。

科学计数法允许字母e或E的后面,跟着一个整数,表示这个数值的指数部分。

使用字面量(literal)直接表示一个数值时,JavaScript 对整数提供四种进制的表示方法:十进制、十六进制、八进制、二进制。

  • 十进制:没有前导0的数值。
  • 八进制:有前缀0o或0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制:有前缀0x或0X的数值。
  • 二进制:有前缀0b或0B的数值。

默认情况下,JavaScript 内部会自动将八进制、十六进制、二进制转为十进制。下面是一些例子。

0xff // 255
0o377 // 255
0b11 // 3

如果八进制、十六进制、二进制的数值里面,出现不属于该进制的数字,就会报错。

0xzz // 报错
0o88 // 报错
0b22 // 报错

NaN

NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。比如

5 - 'x'  // NaN
Math.acos(2) // NaN
Math.log(-1) // NaN
Math.sqrt(-1) // NaN
0 / 0 // NaN

需要注意的是,NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number,使用typeof运算符可以看得很清楚。

typeof NaN // 'number'

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

NaN === NaN // false

NaN与任何数(包括它自己)的运算,得到的都是NaN。

Infinity表示“无穷”,用来表示两种场景。一种是一个正的数值太大,或一个负的数值太小,无法表示;另一种是非0数值除以0,得到Infinity。

与数值相关的全局方法

parseInt()

parseInt方法用于将字符串转为整数。
parseInt的返回值只有两种可能,要么是一个十进制整数,要么是NaN

parseFloat()

parseFloat方法用于将一个字符串转为浮点数。

parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

isNaN

isNaN方法可以用来判断一个值是否为NaN。

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

判断NaN更可靠的方法是,利用NaN为唯一不等于自身的值的这个特点,进行判断。

function myIsNaN(value) {
  return value !== value;
}

字符串

如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。双引号字符串内部使用双引号,也是如此。

由于 HTML 语言的属性值使用双引号,所以很多项目约定 JavaScript 语言的字符串只使用单引号。当然是用双引号也可以,重要的是坚持一种风格。
字符串默认只能写在一行内,分成多行将会报错。

'a
b
c'
// SyntaxError: Unexpected token ILLEGAL

转义

反斜杠(\)在字符串内有特殊含义,用来表示一些特殊字符,所以又称为转义符。

  • \0 :null(\u0000)
  • \b :后退键(\u0008)
  • \f :换页符(\u000C)
  • \n :换行符(\u000A)
  • \r :回车键(\u000D)
  • \t :制表符(\u0009)
  • \v :垂直制表符(\u000B)
  • ' :单引号(\u0027)
  • " :双引号(\u0022)
  • \ :反斜杠(\u005C)

字符串可以被视为字符数组,因此可以使用数组的方括号运算符,用来返回某个位置的字符(位置编号从0开始)。

var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"

// 直接对字符串使用方括号运算符
'hello'[1] // "e"

但是,字符串与数组的相似性仅此而已。实际上,无法改变字符串之中的单个字符。

字符集

JavaScript 使用 Unicode 字符集。JavaScript 引擎内部,所有字符都用 Unicode 表示。
JavaScript 不仅以 Unicode 储存字符,还允许直接在程序中使用 Unicode 码点表示字符,即将字符写成\uxxxx的形式,其中xxxx代表该字符的 Unicode 码点。比如,\u00A9代表版权符号。
解析代码的时候,JavaScript 会自动识别一个字符是字面形式表示,还是 Unicode 形式表示。输出给用户的时候,所有字符都会转成字面形式。

Base64转码

所谓 Base64 就是一种编码方法,可以将任意值转成 0~9、A~Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的,不是为了加密,而是为了不出现特殊字符,简化程序的处理。

对象

对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合。
对象的所有键名都是字符串(ES6 又引入了 Symbol 值也可以作为键名),所以加不加引号都可以。
如果键名是数值,会被自动转为字符串。
如果键名不符合标识名的条件(比如第一个字符为数字,或者含有空格或运算符),且也不是数字,则必须加上引号,否则会报错。

/ 报错
var obj = {
  1p: 'Hello World'
};

// 不报错
var obj = {
  '1p': 'Hello World',
  'h w': 'Hello World',
  'p+q': 'Hello World'
};

对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型。如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用。
对象的属性之间用逗号分隔,最后一个属性后面可以加逗号(trailing comma),也可以不加。

属性读取

读取对象的属性,有两种方法,一种是使用点运算符,还有一种是使用方括号运算符
请注意,如果使用方括号运算符,键名必须放在引号里面,否则会被当作变量处理。

var foo = 'bar';

var obj = {
  foo: 1,
  bar: 2
};

obj.foo  // 1
obj[foo]  // 2

上面代码中,引用对象obj的foo属性时,如果使用点运算符,foo就是字符串;如果使用方括号运算符,但是不使用引号,那么foo就是一个变量,指向字符串bar。

var obj = {
  0.7: 'Hello World'
};

obj['0.7'] // "Hello World"
obj[0.7] // "Hello World"

上面代码中,对象obj的数字键0.7,加不加引号都可以,因为会被自动转为字符串。
注意,数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。

属性的查看

查看一个对象本身的所有属性,可以使用Object.keys方法

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

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

属性是否存在:in 运算符

in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值),如果包含就返回true,否则返回false。它的左边是一个字符串,表示属性名,右边是一个对象。
in运算符的一个问题是,它不能识别哪些属性是对象自身的,哪些属性是继承的。
可以使用对象的hasOwnProperty方法判断一下,是否为对象自身的属性。

属性的遍历

for...in循环有两个使用注意点。

  • 它遍历的是对象所有可遍历(enumerable)的属性,会跳过不可遍历的属性。
  • 它不仅遍历对象自身的属性,还遍历继承的属性。

如果继承的属性是可遍历的,那么就会被for...in循环遍历到。但是,一般情况下,都是只想遍历对象自身的属性,所以使用for...in的时候,应该结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。

var person = { name: '老张' };

for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}
// name

相关文章

  • JavaScript相关笔记

    Web前端相关笔记(三)——JavaScript篇 一、js的数据类型? 5大基本数据类型 Number、Stri...

  • JavaScript笔记

    js笔记 一、js简介1、js是什么2、js作用3、组成4、引入方式二、基本语法1、变量2、原始数据类型3、引入数...

  • 原生js

    原生JS学习笔记1——基本数据类型和运算符 js的背景知识介绍,js的引入方式,js的变量及运算符 原生JS学习笔...

  • JavaScript的数据类型

    最近在学习JS的数据类型的相关内容,在此就做一些相关的学习笔记。 一、概述 JS的数据类型总共有7种。 1.num...

  • JavaScript笔记

    JavaScript笔记js的数据类型(6种)js的==和===字符串的操作数组的操作Math对象的操作JSON操...

  • JS的类型转换

    JS的数据类型: 首先, JS的数据类型分为基本数据类型和引用数据类型基本数据类型: string number ...

  • JavaScript中的数据类型

    在此记录下学习JavaScript中数据类型的笔记。 一、特殊情况1、null 与 undefined, JS由于...

  • You Don't Know JS笔记(二):对象

    You Don't Know JS 笔记 一、类型 javascript一共有六种主要数据类型: string n...

  • js对象数组的深拷贝方法以及其他方法

    js判断数据类型是否为对象 js判断数据类型是否为数组

  • 2022前端面试题汇总(附答案)更新中

    JS相关 1.JS中的数据类型 (1)数据类型分为基本数据类型和引用数据类型基本数据类型:number、null、...

网友评论

      本文标题:JS数据类型笔记

      本文链接:https://www.haomeiwen.com/subject/ombvbqtx.html