脚本宝典收集整理的这篇文章主要介绍了

原生JS大揭秘—数据类型

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

JS中九个内置对象

图片描述

ECMAScript规范(ES5)中定义了六种数据类型:

图片描述

其中原始值类型有5种,引用类型有1种

(一)Number (有包装对象 - new Number())

数值型,包括整形和浮点型
其中NaN,infinity都是Number类型

(二)String (有包装对象 - new String())

字符串类型,有两种表示方式,a: 双引号、b: 单引号。
String.prototype原型上扩展了一些方法如toString()valueOfindexOf()chartAt()charCodeAt()等等。
String()方法可以将任意类型数据转成字符串。

在JS中有三种方法可以变量转成字符串

(三)Boolean (有包装对象 - new Boolean())

1、只有两个值,truefalse,区分大小写
2、在JS的条件表达式或三目运算中,变量可以隐式转成Boolean值,
3、在JS中非Boolean类型的数据都可以转成Boolean类型,其中0-0null
undefined""NaN等6种会转成false,其余的都成true,即便是空对象{}数组[]空函数function(){} 也是看做true

(四)Undefined (没有包装对象)

只有一个值undefined没有任何属性和方法,但是undefined不属于保留字或关键字,在低版本浏览器中undefined可以被修改,为了得到纯正的undefined,可以使用一元操作符void 0,那么在JS代码中可以让一个变量和void 0做比较,就可以准确判断出是否是undefined啦。

variable === undefined // 如果变量variable未声明,直接使用,则会报错,"Uncaught ReferenceError: variable is not defined"
typeof variable === 'undefined' // typeof操作符是唯一一个使用一个未声明的变量时是不会报错的(判断一个变量是否是undefined,推荐用此方法)
undefined === void 0 // true,void 0 可以得到纯正的undefined
  • 在JS中有哪些情况会返回undefined ?

    • 变量只声明未赋值(包括函数参数,没传参数时也是undefined)
    • 访问一个对象不存在的属性
    • 调用函数时没有明确指定返回值
    • 使用void操作符对任意合法的js表达式运算

(五)Null (没有包装对象)

只有一个值null没有任何属性和方法,在JS最初设计时,表示期望赋值为一个对象,可以理解为一个空指针,所以用
typeof操作符检测时,返回object

typeof null // object

(六)Object

在JS中使用typeof操作符时,ArrayDateRegExp的实例和Math都是"object"

undefinednull的区别大概5点

  • null是JS的关键字,undefined不是
  • 在es3中,undefined是可以进行读/写操作的。
    es5中得到修正,undefined是只读的, null从来都不可以修改
  • typeof undefined // "undefined"
    typeof null // "object"
  • 强转数字时,Number()
    Number(undefined) -> NaN
    Number(null) -> 0
  • undefined == null // true 只判断值是否相等
    undefined === null // false 即判断值是否相等,也要判断类型是否相等

NaN小结

NaN(全称 Not a Number)表示不是一个数字,是一个特殊的值,NaN不等于任何值(包括自身)。虽然是一个英文字符,但是它是number类型。类似的还有infinity也是number类型

typeof Infinity // "number"
typeof NaN // "number"
NaN === NaN // false 自身比较

有哪些情况会得到NaN?

  • 无穷大除无穷大
    clipboard.png
  • 对负数做开方运算
    clipboard.png
  • 算术运算符参与非数字的运算
    clipboard.png
  • 字符串转成数字
    clipboard.png

因此不能使用=====来判断一个变量是否是NaN,那么怎么办呢?
其实在JS我们可以通过一个全局函数isNaN()来判断一个变量是否是NaN。但是这个isNaN()有缺陷,它无法100%精准检测出是否是NaN,
解决方法:(可参考http://ourjs.com/detail/5383e...
但是在ES5中,可以自己写方法来判断,

function _isNaN(num){
    return num !== num;
}
_isNaN("abc"); //

clipboard.png

在ES6中,提供了Number.isNaN()可以准确检测出是否是NaN

clipboard.png

typeof 操作符可以检测出6种类型,但是对数组、对象、null均返回object类型,所以typeof检测不准确

图片描述

在JS中用于精准判断数据类型的方法有三种

// 根据对象的constructor判断数据类型(undefined、null除外,两个类型没有对应的包装对象`)
function Person(){}

console.log( p.constructor === Person);
console.log( p.constructor === Number );
console.log( p.constructor === String );
console.log( p.constructor === Boolean );
console.log( p.constructor === Object);
console.log( p.constructor === Function );
console.log( p.constructor === Date );
console.log( p.constructor === RegExp);
 // 用于判断A的原型链中,是否存在B的原型
A instanceof B 
function Person(){}
var p=new Person();
console.log( p instanceof Person ); // true
console.log( p instanceof Object ); // true
// 在Object对象的原型的toString方法
var p=10;
Object.prototype.toString.call(p) === '[object Number]'
var p='str';
Object.prototype.toString.call(p) === '[object String]'
var p=true;
Object.prototype.toString.call(p) === '[object Boolean]'
var p=undefined;
Object.prototype.toString.call(p) === '[object Undefined]'
var p=null;
Object.prototype.toString.call(p) === '[object Null]'
var p=[1,2,3];
Object.prototype.toString.call(p) === '[object Array]'
var p={name:"king"};
Object.prototype.toString.call(p) === '[object Object]'
var p=new Date();
Object.prototype.toString.call(p) === '[object Date]'
var p=/d+/;
Object.prototype.toString.call(p) === '[object RegExp]'
var p=function(){}
Object.prototype.toString.call(p) === '[object Function]'

clipboard.png

总结

以上是脚本宝典为你收集整理的

原生JS大揭秘—数据类型

全部内容,希望文章能够帮你解决

原生JS大揭秘—数据类型

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过