您的位置：首页 > Web前端 > JavaScript

javascript数据类型详解

2017-02-07 14:43 525 查看

一、六种数据类型（弱类型数据）

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（）方法等等

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 数据类型

相关文章推荐

新的分享

章节导航