JavaScript-数据类型学习

javascript数据类型

首先来谈谈javascript到底有几种数据类型，我相信很多人都有困扰，我也一样。

javascript数据类型普遍这么分：Number、BigInt、String、Boolean、Null、Undefined、Symbol、Object

其中Object类型是复杂类型，其它类型都是简单类型。

这里值得提一提Function，Function到底是不是JavaScript的一种数据类型？看下面的例子，输出的是"function"

/* console.log是一个方法 */
console.log(typeof console.log);//funciton

按理说输出"function"，这个类型应该是Function类型。但其实Function属于Object类型，只是浏览器在处理typeof时对二者的处理方式不一样，这样让很多新手很头疼。如果上面的例子输出的是"object"，那么我想没人会有疑问。只是为什么这么设计，可能只有TC39那些人知道吧。

大家可以参见MDN数据类型

弱类型语言

JavaScript是弱类型语言，一个变量的类型是什么是由该变量被赋什么值决定的，如下例

let a = 100;//a 的类型 number
a = 'hello';//a 的类型 string
a = true;//a 的类型 boolean

Number

这里需要知道三个特殊的值：Infinity，-Infinity，NAN

• Infinity：无限大
• -Infinity：无限小
• NAN：代表不是数值

可以通过 Number.MAX_VALUE查看Infinity，Number.MIN_VALUE查看-Infinity

console.log(Number.MAX_VALUE);//1.7976931348623157e+308
console.log(Number.MIN_VALUE);//5e-324

javascript认为这两个值就能代表无限大和无限小了。

NAN可能有点绕，可以这样理解，它代表某个数据不是一个Number类型，但NAN的确是一个Number类型。

let a = 2 * 'abc';
console.log(a);//NAN
console.log(Number.isNaN(a));//true

BigInt

javascript的Number数据类型能表示的数据区间[-(2^53-1),(2^53-1)]，可以分别通过Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER查看。

console.log(Number.MAX_SAFE_INTEGER);//9007199254740991
console.log(Number.MIN_SAFE_INTEGER);//-9007199254740991

如果数值不在这个区间[-(2^53-1),(2^53-1)]，需要定义成BigInt，在数字的后面加个n就行了，当然在此区间的数你也可以定义成BigInt，但没有必要。

let bigNumber = 9007199254740992n;
console.log(typeof bigNumber);//bigint

兼容性：IE和Safari不支持BigInt

String

字符串类型

let a = 'hello';

这里要提一下ES6的模板字符串，如下所示模板字符串用``包裹，将变量或表达式放在${…}里面

const a = 'world';
let b = `hello ${a}`;//hello world
let c = `${1 + 1}`;//2

Boolean

布尔类型，值要么为true要么为false，用来做判断，javscript里面只有以下6个值为false

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

Null

Null类型指变量值为空

在javascript里面，Null单独为一种类型，然而以下代码在浏览器中输出的却是“object”，这是公认的一个bug，但是由于历史原因并未修正。

let a = null;
console.log(typeof a);//object

Undefined

Undefined类型指变量未初始化

let a;
console.log(typeof a);//undefined

Symbol

ES6引入的新的数据类型

定义一个Symbol类型

let mySymbolType = Symbol();
console.log(typeof mySymbolType);//symbol

也可以带上Symbol名字，如下所示Symbol名字为"id"

let mySymbolType = Symbol('id');
console.log(typeof mySymbolType);//symbol

一个Symbol类型代表唯一标识符(unique identifier)，也就是说Symbol类型定义的变量是唯一的，即使Symbol名字相同。

let mySymbolType = Symbol('id');
let mySymbolType2 = Symbol('id');
console.log(mySymbolType === mySymbolType2);//false

另外，Symbol类型是可以作为对象的属性的，注意JavaScript对象的属性类型只能是String类型或Symbol类型。通过for...in循环遍历对象属性时，不会列出类型为Symbol的属性。Object.keys() 也同样忽略Symbol类型的属性，如下例：

let id = Symbol('id');
let student = {[id]: '001',name: '小强',age: 10,
}
for(let key in student){console.log(key);//先name后age
}
console.log(Object.keys(student));//["name","age"]

具体详细的内容后面再讲

Function

定义一个方法：

function someMethod(){const a = 'hello';console.log(a);
}

也可以这样，下面这种称作方法表达式(function expression)

const someMethod = function(){const a = 'hello';console.log(a);
}
someMethod();

ES6引入了箭头函数

const someMethod = () => {const a = 'hello';console.log(a);
}
someMethod();

具体详细的内容后面再讲

Object

对象类型，其实就是一组数据和方法的集合，类似于java中的类。

可以这样定义一个对象

let student = {};
student.name = '小强';
student.age = 10;

也可以这样

let student = new Object();
student.name = '小强';
student.age = 10;

推荐使用第一种的写法。

对象类型是很重要的一个数据类型，具体详细的用法后面再讲。

如何判断一个变量的类型？

上面的实例中，我们已经知道了typeof的使用方法，那就是通过typeof 变量。其实也可以这样typeof(变量)，这种方式typeof是一个方法。

一些实例

从MDN截取一些实例，有兴趣可以看看

// Number
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof(42) === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number';
typeof Number(1) === 'number';
// BigInt
typeof 42n === 'bigint';
// Boolean
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(1) === 'boolean';
// Symbols
typeof Symbol() === 'symbol';
typeof Symbol('foo') === 'symbol';
typeof Symbol.iterator === 'symbol';
// Null
typeof null === 'object';
// Undefined
typeof undefined === 'undefined';
typeof declaredButUndefinedVariable === 'undefined';
typeof undeclaredVariable === 'undefined';
// Object
typeof {a: 1} === 'object';
// Function
typeof function() {} === 'function';
typeof console.log === 'function';

参考

1. MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

写作时间：2020-05-24