深入学习JavaScript数据类型

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了深入学习JavaScript数据类型，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

数据类型是我们学习@H_403_1@JavaScript时最先接触的东西，它是@H_403_1@JavaScript中最基础的知识，这些知识看似简单，但实则有着许多初学者甚至是部分学习了多年@H_403_1@JavaScript的老手所不了解的知识。

数据类型

ECSMAScript标准中规定了7种数据类型，这7种数据类型又分为基本型和引用类型。

基本类型：

  • @H_403_1@Null：只包含一个值：@H_403_1@null
  • @H_403_1@Undefined：只包含一个值：@H_403_1@undefined
  • @H_403_1@Boolean：包含@H_403_1@true和@H_403_1@false
  • @H_403_1@Number：整数或浮点数，还有一些特殊值（@H_403_1@-Infinity、@H_403_1@+Infinity、@H_403_1@NaN）
  • @H_403_1@String：字符串
  • @H_403_1@Symbol：表示独一无二的值（ES6加入）

ES10(ES2019)中新增了一种基本类型@H_403_1@BigInt，可以用来表示超出@H_403_1@number安全范围的任意精度整数。

引用类型：

  • @H_403_1@Object对象：包含对象、数组、函数等。

基本类型和引用类型的区别

存放位置不同

内存空间被分为两种：栈内存和堆内存。

栈内存：

  • 存储的值大小固定
  • 空间较小
  • 可以直接操作，效率高

堆内存：

  • 存储的值大小不确定，可以动态调整
  • 空间较大，运行效率低
  • 无法直接操作其内部，使用引用地址读取

基本类型就属于较为简单的数据，且会被频繁使用，因此通常存放在栈中。

var a = 10;
var b = 'hello';
var c = true;

基本类型存储

引用类型则是同时保存在栈和堆当中：引用类型的实际值存储在堆当中，同时它会在栈中存储一个指向堆内存中的值的地址。

var a = 10;
var obj1 = { name: 'nihao' };
var obj2 = function () {
    // do something
}

引用类型存储

基本类型具有不可变性

var name = 'hello';
name.toUpperCase(); // "HELLO"
console.log(name); // "hello"

由以上代码我们会发现，如果不使用@H_403_1@name变量本身去接收@H_403_1@toUpperCase()的返回值，那么@H_403_1@name的值不会被改变。

由于栈中的内存空间大小固定，所以存储在栈中的变量就是不可变的，但在使用@H_403_1@JavaScript时我们会发现可以改变基本类型的值，例如：

var c = true;
c = false;
console.log(c); // false

这实际上是相当于在栈中开辟了一片新的空间用来存储@H_403_1@false这个值，然后用变量@H_403_1@c指向这个值，并非改变原本的@H_403_1@true。

更改基本类型的值

引用类型就可以很轻易的改变了，它不需要使用变量本身(@H_403_1@obj1)去再次接收新的值就可以改变，例如：

var obj1 = { name: 'nihao' };
obj1.name = 'nibuhao';
console.log(obj1); // { name: 'nibuhao' }

值比较和引用比较

对于基本类型，比较时会直接比较它们的值，相等返回@H_403_1@true

var str1 = 'Hello';
var str2 = 'Hello';
console.log(str1 === str2); // true

对于引用类型，比较时会比较它们的引用地址，哪怕两个变量具有同名属性，且同名属性的值相同，但是因为存储位置不同，两者仍然不相等

var obj1 = { name: 'obj' };
var obj2 = { name: 'obj' };
console.log(obj1 === obj2); // false

赋值

与上面的两种比较类似，基本类型赋值时是直接将值给另一个变量，而引用类型则是将地址给另一个变量

var str1 = 'Hello';
var str2 = str1;
str2 = 'World';
console.log(str1); // "Hello"
//str1的值没变

var obj1 = { name: 'obj1' };
var obj2 = obj1;
obj2.name = 'obj2';
console.log(obj1.name); // "obj2"
// obj1的值改变

null与undefined

  • @H_403_1@null表示空值
  • @H_403_1@undefined表示“缺少值”，即此处应该有值，但是还未定义
var a = null;
console.log(typeof a); // object
console.log(typeof b); // undefined

如果学过@H_403_1@C#、@H_403_1@Java之类的静态类型语言就会知道，直接使用未声明的变量会直接报错，而@H_403_1@JavaScript是动态类型语言，成员除了存在空值外，还有可能根本就不存在（因为只有在运行时才会知道是否存在）。

Symbol类型

@H_403_1@symbol变量需要使用@H_403_1@Symbol()创建

var s = Symbol(); // 注意没有new

@H_403_1@Symbol()函数接受一个可选参数，用来描述即将创建的@H_403_1@symbol变量，无论传入的描述是否相同，最后生成的@H_403_1@symbol一定是独一无二的

var name1 = Symbol('Tom');
var name2 = Symbol('Tom');
console.log(name1 === name2); // false

如果一定要创建两个一模一样的@H_403_1@symbol，需要使用@H_403_1@Symbol.for()

var name1 = Symbol.for('Tom');
var name2 = Symbol.for('Tom');
console.log(name1 === name2); // true

@H_403_1@Symbol类型可以用作对象属性，使用该类型可以保证对象不会出现同名属性

var obj = {
    [Symbol('name')]: 'Tom'
};

使用@H_403_1@Symbol类型作为对象的属性名时，是无法是用@H_403_1@for ... in、@H_403_1@Object.getOwnPropertyNames和@H_403_1@Object.keys()获取到该属性的，可以调用用来专门获取@H_403_1@Symbol的方法@H_403_1@Object.getOwnPropertySymbols()来获取

var obj = {
    [Symbol('name')]: 'Tom'
};
for (var key in obj) {
   console.log(key); // undefined
}
Object.getOwnPropertySymbols(obj); // [Symbol(name)]

数据类型转换

图片来源：https://juejin.im/post/5cec1bcff265da1b8f1aa08f#heading-23

宽松等号（==）的隐式转换

使用@H_403_1@==时，如果等号两侧的数据类型相同，那么比较结果与@H_403_1@===相同，否则会发生隐式转换

NaN

@H_403_1@NaN和任何类型比较都会返回@H_403_1@false，包括他自己

NaN == NaN // false

Boolean类型与其他类型进行比较

只要@H_403_1@Boolean类型参与比较，该@H_403_1@Boolean类型的值都会被转换为@H_403_1@Number类型，@H_403_1@1转为@H_403_1@true，@H_403_1@0转为@H_403_1@false

false == 0 // true
true == 1 // true
true == 2 // false

如果在使用@H_403_1@if判断时，我们使用数字作为判断条件

var x = 10;
if (x) {
	// ...
}
if (x == true) {
    // ...
}

我们会发现，第一个判断结果为@H_403_1@true，而第二个的结果为@H_403_1@false，这就是因为@H_403_1@true被转换为了@H_403_1@1，判断条件变为了@H_403_1@x == 1

Number类型和String类型进行比较

这两者进行比较时，@H_403_1@String类型会被转为@H_403_1@Number类型，除了纯数字字符串正常转换为@H_403_1@Number类型外，空字符串@H_403_1@''转为@H_403_1@0，科学计数法（例如@H_403_1@1e11）正常转换，@H_403_1@Infinity正常转换，其他全部转换为@H_403_1@NaN

'' == 0 // true
'123' == 123 // true
'1e11' == 1e11 // true
Infinity == 'Infinity' // true
true == '1' // true
false == '0' // true

null与undefined

除@H_403_1@null == undefined结果为@H_403_1@true外，其他任何类型和@H_403_1@null或@H_403_1@undefined比较都为@H_403_1@false

基本类型与引用类型比较

ToPrimitive规则

首先我们要先了解@H_403_1@ToPrimitive规则，即引用类型转为基本类型

  • 当引用类型需要被转为基本类型时，它会先查找对象的@H_403_1@valueOf方法，如果该方法返回基本类型的值，则@H_403_1@ToPrimitive的结果就是这个值
  • 如果@H_403_1@valueOf不存在或者@H_403_1@valueOf方法返回的不是基本类型，就会尝试调用对象的@H_403_1@toString方法，然后使用@H_403_1@toString的返回值作为@H_403_1@ToPrimitive的结果
  • 若@H_403_1@valueOf和@H_403_1@toString都不存在，或者没有返回基本类型，则抛出@H_403_1@TypeError异常

对于不同的引用类型，该过程会有些许不同，比如@H_403_1@Date会先调用@H_403_1@toString

引用类型转换为不同的基本类型也会有一些不同，比如：

具体请参考ECMA标准

Number([]); // 0
Number([10]); // 10

var obj = {
    valueOf: () => { return 10; },toString: () => { return -10; }
};
Number(obj); // 10
String(obj); // -10

基本类型与引用类型比较

比较时，引用类型会依据@H_403_1@ToPrimitive规则转换为基本类型

var a = {};
var b = [1,2,3];

a == '[object Object]'; // true
a.toString(); // [object Object]
b == '1,3' // true
b.toString(); // "1,3"

判断数据类型

typeof

@H_403_1@typeof只能用来判断以下几个类型

typeof 'str';  // string
typeof 123;  // number
typeof true;  // boolean
typeof Symbol();  // symbol
typeof undefined;  // undefined
typeof function () {} // function

对于引用类型（数组、对象等）以及@H_403_1@null，@H_403_1@typeof的返回值均为@H_403_1@object

instanceof

@H_403_1@instanceof可以判断引用类型的具体类型

[] instanceof Array; // true
/1/ instanceof RegExp; // true
new Date() instanceof Date; // true

但是，@H_403_1@instanceof同样没法判断@H_403_1@null

null instanceof null; // Uncaught TypeError: Right-hand side of 'instanceof' is not an object
null instanceof Object; // false

在MDN中，@H_403_1@instanceof被这样描述：

@H_403_1@instanceof 运算符用于检测构造函数的 @H_403_1@prototype 属性是否出现在某个实例对象的原型链上。

也就是说@H_403_1@instanceof设计的初衷并不是用来检测数据类型的，因此很多类型它也无法判断

Object.prototype.toString.call()

@H_403_1@Object.prototype.toString.call()利用@H_403_1@call来改变@H_403_1@this的指向，可以让该方法能够获取到任意变量的@H_403_1@[[class]]属性，通过该属性可以判断所有@H_403_1@JavaScript的内置类型

Object.prototype.toString.call(null); // [object Null]
Object.prototype.toString.call(undefined); // [object Undefined]
Object.prototype.toString.call(123); // [object Number]
Object.prototype.toString.call(new Date()); // [object Date]
// ...

但是该方法并不能判断自定义类型，而@H_403_1@instanceof可以实现对自定义类型的判断

function Person() {}
Object.prototype.toString.call(new Person()); // [object Object]
new Person() instanceof Person; // true

参考资料

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作