JavaScript 数据类型及判断

一 **数据类型**

值类型(基本类型)

 * 1 字符串(String): 任意字符串

  • 2 数字(Number): 任意的数字

NaN:

[菜鸟教程]:

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。

可以把 Number 对象设置为该值,来指示其不是数字值。

[w3cschool]:

NaN 属性用于引用特殊的非数字值。NaN 不是常量,可以把它设置为其他值。

提示:

请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等,包括它自己。

——isNaN()返回一个Boolean布尔值,是数字返回false;不是数字返回true

在本例中,我们将展示当一个数超出了 infinity 的限制发生的情况:
<script type="text/javascript">
   var test1="300"
   var test2="Hello World!"

   console.log(Number(test1));  // 300 
   console.log(Number(test2));  // NaN 

   console.log(isNaN(test1));   // false (是number返回false)
   console.log(isNaN(test2));   // true (不是number返回true)
</script>

(注:NaN 是 Number 中的一种特殊数值,非Number)

  • 3 布尔(Boolean): true/false 

 * 4 空(Null): null 

[菜鸟教程]:可以通过将变量的值设置为 null 来清空变量。

 * 5 未定义(Undefined): undefined

[菜鸟教程]:Undefined 这个值表示变量不含有值。

 * 6 Symbol 

[菜鸟教程]:

注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

[尚硅谷:]它是JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型。

 let s = Symbol();
 console.log(s, typeof s);   // Symbol() "symbol"

 let s2 = Symbol('孙大圣');
let s3 = Symbol('孙大圣');  //不能与其他数据(包括跟它本身)进行运算、对比(比较:> < ==)
     let result = s + 100;  //(会报错) Uncaught TypeError: Cannot convert a Symbol value to a number
     let result = s > 100;

引用数据类型

 *7  对象(Object): 任意对象

:* 函数(Function): 一种特别的对象(可以执行) ;

 * 数组(Array): 一种特别的对象(数值下标, 内部数据是有序的))

二 数据类型的判断

1 typeof 其实就是判断参数是什么类型的实例,就一个参数,用例:typeof A

:返回数据类型的字符串表达(即返回的是一个字符串;返回的都是小写:'undefined' 'number' ...)

可以判断:

1 判断string

2 判断number

3 判断boolean

*4 不能判断null: 因为null返回的是object,故无法判断

5 判断undefined

6 判断object

7 判断function (返回值为 ‘function’)

不能区分(判断):

null与object 、array与object,因为null和array返回的都是‘object’

    var a
    // 5 判断undefined
    console.log(a, typeof a, typeof a==='undefined',a===undefined ) 
        // undefined 'undefined' true true
    console.log(undefined == 'undefined');  // false(不写全等写 == 也是false)

    // 1 判断string
    a = 'haixia'
    console.log(typeof a, typeof a==='string');  // string true

    // 2 判断number
    a = 4
    console.log(typeof a, typeof a === 'number');  // number true

    // 3 判断boolean
    a = false
    console.log(typeof a, typeof a==='boolean');  // boolean true

    // 4 不能判断null: 因为null返回的是object,故无法判断
    a = null
    console.log(typeof a, typeof a==='null');  // object false

        // 6 判断object
    var b = {}
    console.log(typeof b, typeof a==='object');;  // object true

        // 7 判断function
    var c = function() {
        console.log('函数c');
    }
    c()
    console.log(typeof c, typeof c ==='function');;  // function true

    // 8 不能判断array,因为返回的是object
    c = [1,2,3]
    console.log(typeof c, typeof c ==='object');;  // function true

扩展一下,假如我们要判断某个变量是否存在:

if(!a) { console.log('error')} 
// 这时候,控制台会报错:Uncaught ReferenceError: a is not defined

// 所以我们可以使用 typeof 来判断:
if(typeof a === 'undefined') { 
  console.log('error');}
}

这样就能避免代码异常,是一种比较严谨的处理方式。

2 instanceof 

A instanceof B 是用来判断 A 是否为 B 的实例,表达式为:A instanceof B,如果 AB 的实例,则返回 true,否则返回 false。

instanceof (A,B) = {
  var L = A.__proto__;
  var R = B.prototype;
  if(L === R) {
    //A的内部属性__proto__指向B的原型对象
    return true;
  }
  return false;
}
 从上述过程可以看出,当 A 的 __proto__ 指向 B 的 prototype 时,就认为 A 就是 B 的实例,
 我们来看几个例子:
 [] instanceof Array; //true ({}) instanceof Object;//true
 new Date() instanceof Date;//true
 JS 中万物皆对象的思想
 : [] instanceof Object //true
   function Person(){};   new Person() instanceof Person; // true   new Person instanceof Object; // true

  理解: Parent.prototype.__proto__ === Object.prototype

扩展:

我们来分析一下 []ArrayObject 三者之间的关系:

instanceof 能够判断出 [].proto 指向 Array.prototype,而 Array.prototype.proto 又指向了Object.prototype,最终 Object.prototype.proto 指向了 null,标志着原型链的结束。

尚谷: b1.b2 instanceof Array(注:这里的 Array Function Object是大写)

var b1 = {
  b2: [1, 'abc', console.log],
  b3: function () {
    console.log('b3')
    return function () {
      return 'xfzhang'
   }
  }
}

console.log(b1 instanceof Object, b1 instanceof Array); // true false
console.log(b1.b2 instanceof Array, b1.b2 instanceof Object); // true true
console.log(b1.b3 instanceof Function, b1.b2 instanceof Object); // true true
原文链接:juejin.im

上一篇:Vue 数据响应式
下一篇:redux源码以及中间件剖析

相关推荐

官方社区

扫码加入 JavaScript 社区