javascript数据类型详解


Posted in Javascript onFebruary 07, 2017

一、六种数据类型 (弱类型数据)

1.基本数据类型(5种):Undefined、Null、Boolean、Number、String

2.引用数据类型(1种):Object  例如: Function Date Array ...

在js中定义变量的时候无需指定类型。比如定义一个变量 var num = 16, 而此时我们也可以把一个字符串赋值给这个变量 num = "this is a string",这样也是合法的。那可能有的朋友觉得js好简单,定义变量的时候连类型是什么都不用管,是这样的吗?那下面我们来看一下:

  (1).  16 + 16 的运算结果是什么呢,这个很简单是 32

  (2). 我们把第一个 16 用双引号引起来,理解为字符串。 "16" + 16 的运算结果是什么呢,还是 32 吗?肯定不是啦,此时这里的理解为字符串拼接,答案为 “1616” 这样一个字符串。

  (3). 我们继续看同样是那如果同样是字符串或者是数字,我们把 + 变成 -,"16" - 16 此时运算结果是什么呢? 答案是 0。这里的理解为数字的运算所以答案就是0。

小结:js在定义一个变量的时候虽然不用指定变量的数据类型,但是在涉及到操作符等等的一些运算的时候,背后往往有很多的隐式转换逻辑。

二、隐式转换 (+ 和 -,== 和 ===)

1.借着上面提到的我们举一个例子:

  "16" + 6  // "166" (字符串拼接)
  "16" - 6  // 10 (数字运算)

我们往往可以利用(+/-)规则来进行转换类型。

比如:我们想把变量num 转换成数字类型,一个非常简单的方法我们就可以 num - 0。又或者我们想把num转换成 String 类型,我们该怎么办呢,对就是加一个空的字符串 num + ""。

2. == 和 ===

(一)、相等运算符 (==)

  1、如果一个值是null,另一个是undefined,则它们相等。

  2、如果一个值是数字,另一个是字符串,先将字符串转换为数字,然后使用转换后的值比较。

  3、如果其中一个值是true,则将其转换为1再进行比较。如果其中一个值是false,则将基转换为0再进行比较。

  4、如果一个值是对象,另一个值是数字或字符串,则将对象转换为原始值,然后再进行比较。对象通过toString()方法或valueOf()方法转换为原始值。JavaScript核心的内置类首先尝试使用valueOf(),再尝试使用toString(),除了日期类,日期类只使用toString()转换。那些不是JavaScript语言核心中的对象则通过各自的实现中定义的方法转换为原始值。

  5、其他不同类型之间的比较均不相等.

例如:

null == undefined, //true
 “16” == 16, //true
 0 == false, //true

 [1,2] == [1,2], //false

 new Object() == new Object(), //false

 new Object().toString() == new Object().toString(),  //true

 new String("aaa") == "aaa", //true

 new String("11") == 11, //true

(二)、严格等于(===)

  1、首先判断他们的类型,如果两个值类型不相同,则它们不相等,直接返回 false。  

  // “16” === 16,  //false

  2、如果两个值都是null或者都是undefined,则它们才相等。

  //   null === null, //true,   undefined=== undefined, //true    undefined === null  //false

  3、如果两个值都是布尔值true或false,则它们相等。

  4、如果其中一个值是NaN,或者两个两个值都是NaN,则它们不相等。NaN和其他任何值都是不相等的,包括它本身!!!通过x!==x来判断x是否为NaN,只有在x为NaN的时候,这个表达式的值才为true。

  5、如果两个值为数字,且数值相等,则它们相等。如果一个为0,另一个为-0,则它们同样相等。

  6、如果两个值为字符串,且所含的对应位上的16位数完全相等,则它们相等。如果它们的长度或内容不同,则它们不等。两个字符串可能含义完全一样且所显示出手字符也一样,但具有不同编码的16位值。JavaScript并不对Unicode进行标准化的转换,因此像这样的字符串通过"==="和"=="运算符的比较结果也不相等。

  7、如果两个引用值同一个对象、数组或函数,则它们是相等的。如果指向不同的对象,则它们是不等的。尽管两个对象具有完全一样的属性。

三、包装对象

定义:在JavaScript中,“一切皆对象”,数组和函数本质上都是对象,就连三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象”。

通俗来讲:字符串,数值,字符串,这些单身狗看其它人都有对象,非常不爽,所以自己也搞了个对象,名字叫包装。

1.一般来说,只有对象是可以对属性进行读写操作的。但是聪明的骚年,你有没有发现,平时我们用得很多的字符串方法和属性,都是直接通过”.”操作符访问的。比如:

console.log("hello world".length);

console.log("this a string".indexOf("a"));

2.其实,在我们调用这些方法和属性时,JS内部已经隐式地帮我们帮创建了一个包装对象了,以上的实际的情形应该是这样的:

console.log(new String("hello world").length);

console.log(new String("this a string").indexOf("a"));

3.但是两者还是有区别的,

区别1:

浏览器自己隐式创建的包装对象和你显式创建的包装对象不严格相等。简单来说,虽然说表面JS对亲生的与领养的一样,但实际上,亲生的不等于领养的。

var a1 = "test",
   
a2=new String("test");


console.log(a1 == a2);//true


console.log(a1 === a2);//false

区别2:

隐式创建的包装对象,在使用完后之后就会被抛弃了。简单来说就是,一个大大的负心汉,上完我,就抛弃,还重新去找其他对象。

拿我们开头的那道题来说:

test.a = "hello";

这里隐式创建了一个包装对象,所以这里赋值不会报错。

console.log(test.a);

这里之前的包装对象已经被抛弃了,但是使用了"."运算符,所以又创建一个新的包装对象,但是这个对象的属性a并没有赋值,所以属性a的值是undefined。

说到实际运用中,有的浏览器性能不是很好,比如说低版本IE,当频繁处理字符串时,效率会很低。所以很多时候,我们还不如直接显式地创建包装对象,防止浏览器过多地创建隐式的包

装对象,提升性能。

//不推荐使用种方法


var example = "this is a example"; 


//推荐使用这种方法,提升性能。


var example2 = new String("this is a example");

四、类型检测

在js中检测类型的方法有很多,比如 typeof、instanceof、Object.prototype.toString、constructor、duck type

1. typeof 运算符,有两种方式 typeof + 检测目标 或者 typeof (检测目标),该方法适用于基本数据类型和函数的检测(遇到null失效),返回的结果都是字符串

 typeof 100    “number”

 typeof true   “boolean”

 typeof("hello")  "String"

 typeof Function   “Function”

 typeof undefined  “undefined”

 typeof null  “Object”  历史遗留的问题,为了兼容

  typeof NaN  “number”   判断NaN的方法可以用isNaN(NaN)来判断,如果返回true就是NaN

 typeof new Object()   “Object”

 typeof [1,2]   "Object"

大家可能注意到了,typeof在检测对象类型的时候是无法区分的,此时我们就要用第二种方法instanceof

2.instanceof运算符(适用于自定义对象或者原生对象数据类型的检测),基于原型链的类型检测

比如判断一个对象是不是数组: [1,2] instanceof Array 返回 true

obj instanceof Object   :它期望左操作数obj 是一个对象,如果是一个数字1,2,3或者true,false时就会直接返回false。

   它期望右操作数是一个函数对象或者是函数构造器,如果不是就会抛出Typeerror异常

instanceof 工作的一个大概的原理就是它会判断左操作数这样一个对象的原型链上是否有右边这个构造函数的prototype属性

我们举一个例子:

function Person(){}



function Student(){}



Student.prototype = new Person();



Student.protype.constructor = Student



var a = new Person();



var b = new Student();



-----------------------------------------



a instanceof Person // true



b instanceof Student //true



a instanceof Student //false



b instanceof Person //true

注意:不同window之间和跨iframe之间是不可以使用instanceof的,虽然看着是同一个对象但是在不同window之间和跨iframe之间是不同的对象,每个iframe下都有自己的一套原型链,跨frame实例化的对象彼此是不共享原型链,因此会返回false

3.Object.prototype.toString 函数方法

Object.prototype.toString.call()或者Object.prototype.toString.apply()

例如:

Object.prototype.toString.call([])   //"[object Array]"
Object.prototype.toString.call(function(){})//"[object Function]"
Object.prototype.toString.call(undefined)
//"[object Undefined]"
Object.prototype.toString.call(null)   //"[object Null]"

注意:1.解决了跨iframe 失效的问题

        2.IE 6,7,8下  Object.prototype.toString.call(null或undefined)      //"[object Object]"

4.constructor方法

function A(){}; 
function B(){}; 
A.prototype = new B(); 
var aObj = new A(); 
-------------------------------- 
aObj.constructor === B; //true; 
aObj.constructor === A; //false;

注意:类继承时会出现问题

5.duck type(鸭子类型)

比如检测数组时,我们可以检测他有没有push()方法等等

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
微信小程序实现图片上传功能
May 28 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 #Javascript
vuejs指令详解
Feb 07 #Javascript
fullCalendar中文API官方文档
Feb 07 #Javascript
JS常用倒计时代码实例总结
Feb 07 #Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 #Javascript
javascript验证香港身份证的格式或真实性
Feb 07 #Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 #Javascript
You might like
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
Bootstrap table使用方法汇总
2017/11/17 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Python操作Word批量生成文章的方法
2015/07/28 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python数据结构之图的应用示例
2018/05/11 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Django model class Meta原理解析
2020/11/14 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
售后客服个人自我评价
2014/09/14 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
保研推荐信格式
2015/03/25 职场文书
毕业设计致谢语
2015/05/14 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js