js中基本数据类型有6种number、string、undefined、null、boolean,Symbol (ES6 新增,表示独一无二的值),还有一种数据类型为引用数据类型统称为Object对象,其中包括常见的Arry(数组)、Function(函数)、Date等,

基本数据类型

1、值是不可变的

    var a='apple';
var b=a.toUpperCase();
console.log(a) //apple
console.log(b) //APPLE

2、基本数据类型直接存放在栈中,占据空间、大小固定,属于被频繁使用的,所以放入栈中存储。

引用数据类型

1、值是可以变的

    var a={
name:"yuan",
sex:"man"
};
a.name='zhi';
console.log(a) //{name: "zhi", sex: "man"}

2、同时保存在栈和堆中

引用数据类型数据一般比较大、结构比较复杂,如果存储在栈中会影响到程序的性能,所以分为两部分指针和实体,指针类似地址名片记录着数据存放的实际位置,存放于栈中,实体就是数据的实际起始地址。存放在堆中,使用的时候解释器获得指针地址后去堆中找到相对应的数据。

因为这种结构,所以引用数据类型的直接赋值是指针的赋值,指向的都是同一个实体对象,所以通过某一个指针修改,存放于堆中的实体对象都会发生改变。

    var a={
name:"yuan",
sex:"man"
};
var b=a;
b.name='zhi';
console.log(a) //{name: "zhi", sex: "man"}
console.log(b) //{name: "zhi", sex: "man"}

数据类型的判断(原生js)

1、typeof

这是最基本的一个判断方式,该操作符返回一个表示数据类型的字符串,共有7种结果:number、string、boolean、object、function、undefined、symbol。很明显它不能区分引用数据类型里面的数组等对象(包括null);

    var a=[,,];
var b=null;
console.log(typeof a) //object
console.log(typeof b) //object

2、instanceof

instanceof是用来判断A是否为B的实例,表达式:A instanceof B;如果A是B的实例则返回true,否则返回false;instanceof运算符是通过判断该对象在原型链上是否存在一个构造函数的prototype属性;

    var a=[,,];
var b=new Date();
console.log(a instanceof Array) //true
console.log(b instanceof Date) //true

依上面所说这将主要涉及js中非常重要的原型链继承机制,这里就不详细说了,简单来说在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行。所有 JavaScript 对象都有 __proto__ 属性,但只有 Object.prototype.__proto__ 为 null,前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显示的原型,在 JavaScript 里用 prototype 属性表示,这个是 JavaScript 原型继承的基础知识。

根据相关规范和网上例子写一个instanceof:

    function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
var O = R.prototype;// 取 R 的显示原型
L = L.__proto__;// 取 L 的隐式原型
while (true) {
if (L === null)
return false;
if (O === L)// 这里重点:当 O 严格等于 L 时,返回 true
return true;
L = L.__proto__;
}
}
var a=[,,];
var b=new Date();
console.log(instance_of(a,Array)) //true
console.log(instance_of(b,Date)) //true

instanceof也具有以下三点的不足:

1、不能检测null和undefined

    console.log(instance_of(null instanceof null))
console.log(instance_of(undefined instanceof undefined))

对于特殊的数据类型 null 和 undefined,他们的所属类是 Null 和 Undefined,但是浏览器把这两个类保护起来了,不允许我们在外面访问使用。

2、通过构造函数实例化和字面量生成的基本类型判断是有一定区别的

    var a=;
var b=new Number() console.log(a instanceof Number) //false
console.log(b instanceof Number) //true

为什么会这样呢?严格意义上讲只有实例创建出来的数据才是标准的对象数据类型值,也是标准的 Number 这个类的一个实例;对于字面量方式创建出来的结果是基本的数据类型值,不是严谨的实例,但是由于 JS 的松散特点,导致了可以使用 Number.prototype 上提供的方法。

3、constructor

constructor和prototype 非常相似,但 constructor 检测 Object 与 instanceof 不一样,还可以处理基本数据类型的检测。

    var a=;
var b=new Number() console.log(a.constructor==Number) //true
console.log(b.constructor==Number) //true

constructor具有以下两点不足

1、null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。

2、函数的 constructor 是不稳定的,这个主要体现在把对象的原型进行重写,在重写的过程中很有可能出现把之前的 constructor 给覆盖了,这样检测出来的结果就是不准确的。

    function Fn() {

    }
Fn.prototype=new Array(); var a=new Fn();
console.log(a.constructor==Array) //true

4、Object.prototype.toString.call()

这个是最准确最常用的方式,首先获取Object上面的toString方法,方法执行时让里面的this指向第一个参数的值。

关于toString:

  • 本意是转换为字符串,但是某些 toString 方法不仅仅是转换为字符串对于 Number、String,Boolean,Array,RegExp、Date、Function 原型上的 toString 方法都是把当前的数据类型转换为字符串的类型(它们的作用仅仅是用来转换为字符串的)

  • 对于 Number、String,Boolean,Array,RegExp、Date、Function 原型上的 toString 方法都是把当前的数据类型转换为字符串的类型(它们的作用仅仅是用来转换为字符串的)
  • Object 上的 toString 并不是用来转换为字符串的

Object 上的 toString 它的作用是返回当前方法执行的主体(方法中的 this)所属类的详细信息即"[object Object]",其中第一个 object 代表当前实例是对象数据类型的(这个是固定死的),第二个 Object 代表的是 this 所属的类是 Object。

    console.log(Object.prototype.toString.call())    //[object Number]

    console.log(Object.prototype.toString.call(null))    //[object Null]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call('')) //[object String]

最后贴个图总结一下(来自网络)

js 数据类型及检测的更多相关文章

  1. js数据类型的检测总结,附面试题--封装一个函数,输入任意,输出他的类型

    一.javascript 中有几种类型的值 1.基本数据类型 : 包括 Undefined.Null.Boolean.Number.String.Symbol (ES6 新增,表示独一无二的值) 特点 ...

  2. js 数据类型检测

    提起数据类型检测  大多数人首先想起的应该是  typeof 'xxx' == '数据类型' 坦然这种方法对于基本数据类型的检测还是非常方便的,但是当遇到引用数据类型 Object时却爱莫能助,下面就 ...

  3. 总结的JS数据类型判定(非常全面)

    用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型. 但是如果尝试用 ...

  4. JS数组类型检测

    在强类型语言,数组类型检测是非常容易的事情(typeof就可以解决),而在弱语言JS数据类型就很容易混淆了. JS中常见的数据类型有:number.string.boolean.undefined.f ...

  5. JS数据类型的理解(猜测)

    Js 数据类型 对于这个主题,首先来看几个问题,如果你对这几个问题很清楚的话,那就请直接跳过吧,不用接着往下看了,如果不清楚,建议你还是看看. 1)如果判断函数?function 和object的联系 ...

  6. 1. js数据类型_对象_函数_内存

    1. js数据类型有哪些? 基本(值)类型 Number ---- 任意数值 String ---- 任意字符串 Boolean ---- true/false undefined ---- unde ...

  7. JavaScript 的数据类型及其检测

    JavaScript 有几种类型的值? Javascript 有两种数据类型,分别是基本数据类型和引用数据类型.其中基本数据类型包括 Undefined.Null.Boolean.Number.Str ...

  8. js数据类型简单介绍

    JS数据类型 ECMAScript中有5种简单的数据类型:Undefined,Null,Boolean,Number,String.还有一种复杂的数据类型--Object(本质上是由一组无序的名值对组 ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. 【转】 Pro Android学习笔记(六一):Preferences(5):组织Preference

    目录(?)[-] PreferenceCategory Child Preference PreferenceCategory 如果有多个preference,我们希望能在他们组织在一起.有两种方式, ...

  2. AD9各种布线总结

    1.常规布线:不详细说了,是个人就知道怎么弄.需要说明的是在布线过程中,可按小键盘的*键或大键盘的数字2键添加一个过孔:按L键可以切换布线层:按数字3可设定最小线宽.典型线宽.最大线宽的值进行切换. ...

  3. C++之string类

    1.String对象的初始化 string s1;               默认构造函数,s1为空串 string s4(n, 'c');     将s4初始化为字符c的n个副本 string s ...

  4. 【总结整理】javascript的函数调用时是否加括号

    javascript的函数调用时是否加括号 if(event.preventDefault){ event.preventDefault(); if判断条件里面不要加括号,不加括号是应该以属性形式,i ...

  5. 【spring boot logback】日志颜色渲染,使用logback-spring.xml自定义的配置文件后,日志没有颜色了

    接着spring boot日志logback解析之后,发现使用logback-spring.xml自定义的配置文件后,日志没有颜色了 怎么办? 官网处理日志链接:https://logback.qos ...

  6. 24、sam- 详解

    http://note.youdao.com/share/?id=312fa04209cb87f7674de9a9544f329a&type=note#/ https://davetang.o ...

  7. 1、perl学习

    1.字符串函数 print chomp chop length uc lc index ord #转符号为ASCII的数字 chr #转数字为ASCII的字母 substr($string,offse ...

  8. Linux 静态库(.a)转换为动态库(.so)

    Linux 静态库转换为动态库 参考 http://blog.csdn.net/moxuansheng/article/details/5812410 首先将.a文件转为.so文件是可以实现的 原因是 ...

  9. 20169201 2016-2017-2 实验二《Java面向对象程序设计》

    实验一:程序设计中临时变量的使用 代码托管 1.删除数组中的元素5 for(int i = 4; i < arr.length - 1; i ++){ arr[i] = arr[i + 1]; ...

  10. javascript 操作符小结

    简单总结一下JavaScript的几个操作符: var. in. delete. typeof. new. instanceof.void var 定义变量要使用var操作符, 使用var操作符定义的 ...