JS的数据类型

2021-03-25  本文已影响0人  樱桃小白菜

JS 的数据类型

NumberStringBooleanNullundefinedobjectsymbolbigInt

JavaScript 拥有动态类型

这意味着相同的变量可用作不同的类型

var a                // x 为 undefined
var a = 6;           // x 为数字
var a = "Bill";     // x 为字符串

Object 中包含的数据类型

其中包含了Data、function、Array等。这三种是常规用的。

JS的基本类型和引用类型

基本类型(单类型):除Object。 String、Number、boolean、null、undefined。

引用类型:object。里面包含的 function、Array、Date。

null 和 undefined 的区别

Null 只有一个值,是 null。即不存在的对象。

Undefined 只有一个值,是undefined。没有初始化。undefined 是从 null 中派生出来的。

简单理解就是:undefined 是没有定义的,null 是定义了但是为空。

在ES5的时候,我们认知的数据类型确实是 6种:Number、String、Boolean、undefined、object、Null。

Symbol

ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。

img
let genericSymbol = Symbol();
let otherGenericSymbol = Symbol();
console.log(genericSymbol == otherGenericSymbol); // false

let fooSymbol = Symbol('foo');
let otherFooSymbol = Symbol('foo');
console.log(fooSymbol == otherFooSymbol); // false
BigInt

BigInt 是chrome 6 7(ES10)中新增加的一种内置对象,它提供了一种方法来表示大于 Number 的最大数字。BigInt 可以表示任意大的整数。(但是很多人不把这个做为一个类型)。

数据类型的判断

1. typeof

typeof 操作符返回一个字符串,表示未经计算的操作数的类型。

// 括号有无将决定表达式的类型。
var iData = 99;

typeof iData + ' Wisen'; // 'number Wisen'
typeof (iData + ' Wisen'); // 'string'

typeof 一般用来判断基本数据类型,返回值共有 stringnumberbooleansymbolbigintunfinedobjectfunction 这八种判断类型。

JS 中 typeof 输出分别是什么?

输入 输出 备注
'123' String 字符串
123 Number 数字
True/False Boolean 布尔型
Undefined Undefined 没有初始化、定义的值
Null Object 不存在的对象
NaN Number Number 中的特殊数值(表示非数字)
Object Function 里面包含function,Array,Date
Symbol('1') Symbol ES6新增类型
111n BigInt 大整型数字
{a:1,b:2} Object 对象

2. instanceof

一般用来判断引用数据类型的判断,如:ObjectFunctionArrayDateRegExp 等。

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);        // expected output: true

console.log(auto instanceof Object);    // expected output: true

console.log(/s/g instanceof RegExp)    // true
console.log(new Date('2019/01/05') instanceof Date)    // true
console.log([1,2,3] instanceof Array)    // true

3. Object.prototype.toString()

toString() 是 Object 原型对象上的一个方法。
toString() 方法返回一个表示该对象具体类型的字符串。
toString() 返回 [object type],其中 type 是对象的类型,值为StringNumberBooleanUndefinedNullFunctionDateArrayRegExpErrorHTMLDocument等等。基本上所有对象的类型都可以通过这个方法获取到。(用该方法判断数据类型最准确)

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
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的引用 

4. constructor

当一个函数被定义时,JS引擎会为该函数添加 prototype 原型,然后再在 prototype 上添加一个 constructor 属性,并让其指向该函数的引用。再根据该函数的构造函数生成的实例也会继承函数的 prototype 原型。因此生成实例的 constructor == 该函数的 constructor 。

function X(){}         // 定义函数 X
var x = new X()      // 给变量 x 的赋值为 X
x.constructor == X        // true

5. 其他方法

通过数组的方法 Array.isArray() 检验值是否为数组

var arr = [1,2,3]
Array.isArray(arr)        //true
arr = 123
Array.isArray(arr)        //false

通过 Number.isNaN() isNaN()检测是否为非数值型

function typeOfNaN(x) {
  if (Number.isNaN(x)) {
    return 'Number NaN';
  }
  if (isNaN(x)) {
    return 'NaN';
  }
}

console.log(typeOfNaN('100F'));
// expected output: "NaN"

console.log(typeOfNaN(NaN));
// expected output: "Number NaN"

使用正则来判断类型是否为数字

function isNumber(obj) {
  var reg = /^[0-9]+.?[0-9]*$/;
  if (reg.test(obj)) {
    return true;
  }
  return false;
}

通过数据类型的特点 (特性) 来判断数据类型

function isNumber(obj) {  
    return obj === +obj  
}

下面是该方法的延伸。

1、判断字符串 :

function isString(obj) {  
    return obj === obj+''  
}

2、判断布尔类型

function isBoolean(obj) {  
    return obj === !!obj  
}

通过其他插件的方法判断

通过 JQuery 的 jQuery.type()

$.type( /test/ ) === "regexp"    // true

根据不同数据类型的特性有各种各样方法就不一一列举了

上一篇下一篇

猜你喜欢

热点阅读