JavaScript数据类型：关于数据类型，你要知道那些？

于 2018-05-30 11:48:09 发布
阅读量253 收藏
点赞数
分类专栏： es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/devincob/article/details/79658194
版权

js的基本数据类型有哪些？
JavaScript有6种基本数据类型和1种复杂数据类型；
i、基本数据类型：

  1. Undefined、Null、Boolean、Number、Symbol(ES6新增)
  2. String(特殊）

ii、复杂数据类型：

  1. Object[Array和Function(引用类型)]

iii、数据类型判断方法：

  1. type of
  2. instance of
  3. constructor
  4. toString.call(’’)
  5. Array.isArray(); //判断数组

i-1、Undefined

Undefined类型只有一个值，即特殊的undefined。在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。不过，一般建议尽量给变量初始化，但是在早期的js版本中是没有规定undefined这个值的，所以在有些框架中为了兼容旧版浏览器，会给window对象添加undefined值。

window['undefined'] = window['undefined'];  
//或者
window.undefined 
undefined

i-2、Null

Null类型是第二个只有一个值的数据类型，这个特殊的值是null。从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null时会返回object的原因。

  var car = null;
  console.log(typeof car); // "object"

如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。这样一来，只要直接检测null值就可以知道相应的变量是否已经保存了一个对象的引用了。
例如：

  if(car != null){
    //对car对象执行某些操作
  }

实际上，undefined值是派生自null值的，因此ECMA-262规定对它们的相等性测试要返回true。

console.log(undefined == null); //true

无论在什么情况下都没有必要把一个变量的值显式地设置为undefined，可是同样的规则对null却不适用。换句话说，只要意在保存对象的变量还没有真正保存对象，就应该明确地让该变量保存null值。这样做不仅可以体现null作为空对象指针的惯例，而且也有助于进一步区分null和undefined。

i-3、Boolean

该类型只有两个字面值：true和false。这两个值与数字值不是一回事，因此true不一定等于1，而false也不一定等于0。

虽然Boolean类型的字面值只有两个，但JavaScript中所有类型的值都有与这两个Boolean值等价的值。要将一个值转换为其对应的Boolean值，可以调用类型转换函数Boolean()，例如：

    var message = 'Hello World';
    var messageAsBoolean = Boolean(message);

在这个例子中，字符串message被转换成了一个Boolean值，该值被保存在messageAsBoolean变量中。可以对任何数据类型的值调用Boolean()函数，而且总会返回一个Boolean值。至于返回的这个值是true还是false，取决于要转换值的数据类型及其实际值。

下表给出了各种数据类型及其对象的转换规则。

数据类型 转换为true的值 转换为false的值

Boolean	true	false
String	任何非空的字符串	""(空字符串)
Number	任何非0数值（包括无穷大）	0和NAN
Object	任何对象	null
Undefined	不适用	undefined
let message = 'Hello World';
if(message){
   alert("Value is true");
}

运行这个示例，就会显示一个警告框，因为字符串message被自动转换成了对应的Boolean值（true）。由于存在这种自动执行的Boolean转换，因此确切地知道在流控制语句中使用的是什么变量至关重要。

!!操作符转换布尔值
!!一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false;

对null与undefined等其他用隐式转换的值，用!操作符时都会产生true的结果，所以用两个感叹号的作用就在于将这些值转换为“等价”的布尔值；

var foo;  
alert(!foo);//undifined情况下，一个感叹号返回的是true;  
alert(!goo);//null情况下，一个感叹号返回的也是true;  
var o={flag:true};  
var test=!!o.flag;//等效于var test=o.flag||false;  
alert(test);

这段例子，演示了在undifined和null时，用一个感叹号返回的都是true,用两个感叹号返回的就是false,所以两个感叹号的作用就在于，如果明确设置了变量的值（非null/undifined/0/”“等值),结果就会根据变量的实际值来返回，如果没有设置，结果就会返回false。

i-4、Number

用来表示整数和浮点数值，还有一种特殊的数值，即NaN（非数值 Not a Number）。这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，在其他编程语言中，任何数值除以0都会导致错误，从而停止代码执行。但在JavaScript中，任何数值除以0会返回NaN，因此不会影响其他代码的执行。

NaN本身有两个非同寻常的特点。首先，任何涉及NaN的操作（例如NaN/10）都会返回NaN，这个特点在多步计算中有可能导致问题。其次，NaN与任何值都不相等，包括NaN本身。例如，下面的代码会返回false。

alert(NaN == NaN);    //false
String
isNaN(NaN) //判断一个数字是不是NaN
true
isNaN({})
true
isNaN('a')
true

i-5、String（表示由零或多个16位Unicode字符组成的字符序列）字符串可以由单引号(’)或双引号(")表示。

string类型有些特殊，因为字符串具有可变的大小，所以显然它不能被直接存储在具有固定大小的变量中。由于效率的原因，我们希望JS只复制对字符串的引用，而不是字符串的内容。但是另一方面，字符串在许多方面都和基本类型的表现相似，而字符串是不可变的这一事实（即没法改变一个字符串值的内容），因此可以将字符串看成行为与基本类型相似的不可变引用类型

Boolean、Number、String 这三个是Javascript中的基本包装类型，也就是这三个其实是一个构造函数，他们是Function的实例，是引用类型，至于这里的String与以上说的String是同名，是因为其实上文说的String是指字符串，这里的String指的是String这个构造函数，上面那么写，是为了更好的理解，因为Javascript是松散类型的。我们可以看下String实例化的例子：

let name = String("jwy");
alert(typeof name);//"string"
let x=new String('12345')
typeof x //object
x='12345'
typeof x //string
let author = "Tom";
alert(typeof name);//"string"
至于author这个会有length，substring等等这些方法，其实string只是String的一个实例，类似于C#中的String，和string.

i-6、Symbol

  1. 作为属性名
  2. 消除魔术字符串
  3. 属性名的遍历
  4. Symbol.for()，Symbol.keyFor()
  5. 实例：模块的 Singleton 模式
  6. 内置的 Symbol 值

Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

let s = Symbol();
type of s //'sumbol'

二、判断数据类型的方法
typeof 操作符

typeof 是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示，包括以下：number、Symbol、boolean、string、object、undefined、function 。

typeof ''; // string 有效
typeof 1; // number 有效
typeof Symbol(); // symbol 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Function(); // function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

有些时候，typeof 操作符会返回一些令人迷惑但技术上却正确的值：

  1. 对于基本类型，除 null 外，均可以返回正确的结果
  2. 对于引用类型，除 function 外，返回 object 类型。
  3. 对于 null ，返回 object 类型。
  4. 对于 function 返回 function 类型。

I、其中，null 有属于自己的数据类型 Null ，typeof null返回为object,因为特殊值null被认为是一个空的对象引用。

II、引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型，没有错，但不是我们想要的结果。

ii-1、 instanceof

用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。 在这里需要特别注意的是：instanceof 检测的是原型。
我们用一段伪代码来模拟其内部执行过程：

instanceof (A,B) = {
    var L = A.__proto__;
    var R = B.prototype;
    if(L === R) {
        //A的内部属性__proto__指向B的原型对象
        return true;
    }
    return false;
}

从上述过程可以看出，当 A 的 proto 指向 B 的 prototype 时，就认为 A 就是 B 的实例，我们再来看几个例子：

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true

function Person(){};
new Person() instanceof Person;

[] instanceof Object; //true
new Date() instanceof Object;//true
new Person instanceof Object;//true

我们发现，虽然 instanceof 能够判断出 [ ] 是Array的实例，但它认为 [ ] 也是Object的实例
我们来分析一下 [ ]、Array、Object 三者之间的关系：

从 instanceof 能够判断出 [ ].proto 指向 Array.prototype，而 Array.prototype.proto 又指向了Object.prototype，最终 Object.prototype.proto 指向了null，标志着原型链的结束。因此，[]、Array、Object 就在内部形成了一条原型链：

这里写图片描述

从原型链可以看出，[ ] 的 proto 直接指向Array.prototype，间接指向 Object.prototype，所以按照 instanceof 的判断规则，[] 就是Object的实例。依次类推，类似的 new Date()、new Person() 也会形成一条对应的原型链 。因此，instanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型。

ii-2、**instanceof **

操作符的问题在于，它假定只有一个全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

不过 js新增了 Array.isArray() 方法。这个方法的目的是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的。这个方法的用法如下。

Array.isArray(obj)
if (Array.isArray(value)){
   //对数组执行某些操作
}
// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 
// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr);  // true
// Considered harmful, because doesn't work though iframes
arr instanceof Array; // false

假如不存在 Array.isArray()，则在其他代码之前运行下面的代码将创建该方法。

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

ii-3、constructor

当一个函数 F被定义时，JS引擎会为F添加 prototype 原型，然后再在 prototype上添加一个 constructor 属性，并让其指向 F 的引用。
当执行 var f = new F() 时，F 被当成了构造函数，f 是F的实例对象，此时 F 原型上的 constructor 传递到了 f 上，因此 f.constructor == F
如下所示：
这里写图片描述

可以看出，F 利用原型对象上的 constructor 引用了自身，当 F 作为构造函数来创建对象时，原型上的 constructor 就被遗传到了新创建的对象上， 从原型链角度讲，构造函数 F 就是新对象的类型。这样做的意义是，让新对象在诞生以后，就具有可追溯的数据类型。

同样，JavaScript 中的内置对象在内部构建时也是这样做的：

''.constructor == String
true
new Number(1).constructor == Number
true
true.constructor == Boolean
true
new Function().constructor == Function
true
new Date().constructor == Date
true
new Error().constructor == Error
true
[].constructor == Array
true
document.constructor ==HTMLDocument
true
window.constructor == Window
true
  1. null and undefined 是无效对象因此不会有constructor存在
  2. constantor不稳定 主要体现在自定义对象上。当重写prototype时，原来的constantor引用会丢失 从而默认为Object
function F(){}
undefined
F.prototype = {a:'xx'}
{a: "xx"}
let e  = new F()
undefined
e.constructor ==F
false
e.constructor
ƒ Object() { [native code] }

为什么变成了 Object？

因为 prototype 被重新赋值的是一个 { }， { } 是 new Object() 的字面量，因此 new Object() 会将 Object 原型上的 constructor 传递给 { }，也就是 Object 本身。

ii-4、toString

toString 是 Object 原型对象上的方法，使用 call 来调用该方法会返回调用者的类型字符串，格式为 [object,xxx]，xxx 是调用者的数据类型，包括：String、Number、Boolean、Undefined、Null、Function、Date、Array、RegExp、Error、HTMLDocument 等， 基本上，所有的数据类型都可以通过这个方法获取到。

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window是全局对象 global 的引用

需要注意的是，必须通过 call 或 apply 来调用，而不能直接调用 toString ， 从原型链的角度讲，所有对象的原型链最终都指向了 Object， 按照JS变量查找规则，其他对象应该也可以直接访问到 Object 的 toString方法，而事实上，大部分的对象都实现了自身的 toString 方法，这样就可能会导致 Object 的 toString 被终止查找，因此要用 call/apply 来强制调用Object 的 toString 方法。

devincob
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值