JS数据类型

JavaScript学习 本文总阅读量次

归纳了一下数据类型的判断方法等

很好的验证方法：在控制台中打印

1
console.log(变量名);

打印出的内容需要到网页F12中的console部分查看
举例：

1
2
3
4
5
<script>
        var name_01="marry",age=18,email="marry@qq.com",address;
        // 在控制台中打印
        console.log(name_01);
    </script>

在网页F12中看到的就是marry

typeof检测变量类型

功能 检测变量类型
语法 typeof 变量 或 typeof(变量)
返回值 类型，有可能是：number、undefined、string、boolean、object、function
  • typeof能得到的6种类型：number、undefined、string、boolean、object、function。
    • 注意：null 空指针，也是一个对象，会返回object
  • 很明显，typeof运算符 只能区分 值类型：
    1
    2
    3
    4
    typeof undefined;//undefined
    typeof "hlz";//string
    typeof 123;//number
    typeof true;//boolean
  • 对于 引用类型 ，typeof运算符只能区分出 函数 ：
    1
    2
    3
    4
    typeof {};//object
    typeof [];//object
    typeof null;//object
    typeof console.log;//function
  • 注意：
    • typeof来判断数据类型其实并不准确。比如数组、正则、日期、对象的typeof返回值都是object，这就会造成一些误差。
  • 准确判断可以从构造函数（instanceof）、原型链（prototype.isPrototypeOf）上下手，具体可以看下面的“如何判断一个对象是不是数组类型”中的例子。

null空对象指针

  1. null值表示一个空对象指针
  2. 如果定义的变量准备在将来用于保存对象，那么最好将改变量初始化为null而不是其他值。（如果将来用于保存字符串，则可以**使用“”**，意为空字符串。）
    举例:
    1
    2
    3
    4
    //如果setting将来打算存储一个对象，最好初始化设置为null
    var setting=null;
    //如果setting将来打算存储一个字符串，最好初始化设置为""
    var setting="";
  • 说明：undefined值是派生自null值的，所以undefined= = null
    的返回结果是true。

undefined尚未赋值

  • undefined，一个特殊值，通常用于指示变量尚未赋值。
  • 在高级程序设计语言设计应用程序时，用于指示变量尚未用单等号进行赋值（常量未定义）。

null(对象)与undefined(变量)

  • null的类型是一个对象，用来表示一个变量没有任何数值，而undefined是指变量没有定义任何值（没有赋值）。
  • 在JavaScript中，关键字null表示空值的意思，它表示对象为空，或者变量没有引用任何对象。如果当一个变量的值为null，则表明它的值不是有效的对象、数组、数值、字符串和布尔型等。如果使用alert(typeof(null))来检测null值的类型，则返回object，说明它是一个对象类型。
  • 而undefined与null不同，它表示无值的意思，并且具有独一无二的类型，它区别任何对象、数组、数值、字符串和布尔型。alert(typeof(undefined))的返回值为undefined。
  • 总的来说，null是不限于类型的空对象指针，而undefined是限于类型的变量还没有赋值。

Number整数和浮点数

  • Number ：表示整数和浮点数
  • NaN ：即非数值（ Not a Number ）是一个特殊的数值

面试常考！

说明：

  1. 任何涉及NaN的操作（例如NaN/10 ）都会返回NaN。
  2. NaN与任何值都不相等，包括NaN本身。
  3. 如果typeof一个NaN，你会在F12中看到number，因为NaN是特殊的number

isNaN（）判断是否“非数值”

  • 语法：isNaN(n)
  • 功能：检测n是否是“非数值”
  • 返回值：boolean
  • 参数：参数n可以是任何类型
  • 说明 ：isNaN（）对接收的数值，先尝试转换为数值，再检测是否为非数值。（”16”虽然是字符串,但”16”可以转换为16，所以还是false）
  • 注意：只有遇到Nan他才会返回true，其他不管是什么类型，包括true与false都被算作是数值，返回false！
  • 举例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
        var name_01="marry",age=18,email="marry@qq.com",address;
        var id="16"
        // 在控制台中打印
        console.log(typeof(age));//得到的是false
        console.log(typeof(age-"abc"));//得到的是true
        console.log(typeof(email));//得到的是false
        console.log(typeof(id));//id虽然是字符串，但得到的是false,因为isNaN（）会对接收的数值先尝试转换为数值，再检测是否为非数值。而"16"可以转换为16。
    </script>
    注意：true与false都被算作是数值！
    1
    2
    3
    4
    5
    6
    7
    //isNaN 判断是否“非数值”，遇到字符串会看能不能将其转换为数值再进行判断
    console.log(Number.isNaN(NaN));//true
    console.log(Number.isNaN(-NaN));//true
    console.log(Number.isNaN(1)); //false
    console.log(Number.isNaN('1'));//false
    console.log(Number.isNaN(true));//false
    console.log(Number.isNaN(false));//false

把非数值转换为数值

  • 有3个函数可以把非数值转换为数值：
  1. Number（）
  2. parseInt（）
  3. parseFloat（）
  • 说明：
  1. Number（）可以用于任何数据类型
  2. parseInt（）和parseFloat（）则专门用于把字符串转换成数值。

    但是最好少用Number（）
  • 只有数字开头的字符串可以使用parseInt（）和parseFloat（），非数字开头的只能使用Number（）【实际上非数字开头用Number（）也没用】

parseInt（）

  • parseInt() 函数可解析一个字符串，并返回一个整数。
  • 语法：parseInt(string, radix)
    • string:必需。要被解析的字符串。（空则返回Nan）
    • radix:可选。表示要解析的数字的基数**(即多少进制)**。【面试常考】
      • 该值介于 2 ~ 36 之间。如果radix小于 2 或者大于 36，则 parseInt() 将返回 NaN。
      • 省略radix或其值为 0，parseInt() 会根据 string 来判断数字的基数。
        • 如果 string 以 1 ~ 9 的数字开头，则数字将以 10 为基础来解析。(即解析为十进制的整数)
        • 如果string以 “0x” 或 “0X” 开头，将以 16 为基数。(即把 string 的其余部分解析为十六进制的整数)
  • parseInt（）会忽略字符串前面的空格，直至找到第一个非空格字符。如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
    • 也就是说，要想让parseInt（）提取数字，字符串必须是数字开头，比如”18px”，不能是”abc18”。parseInt(“abc18”)会得到NaN
  • 注意：转换空字符串返回NaN。
  • 举例：
1
2
3
4
5
6
parseInt("10");			//返回 10
parseInt("19",10);		//返回 19 (10+9)
parseInt("11",2);		//返回 3 (2+1)
parseInt("17",8);		//返回 15 (8+7)
parseInt("1f",16);		//返回 31 (16+15)
parseInt("010");		//未定：返回 10 或 8
  • 针对参数2举例：
    1
    2
    3
    <script>
           console.log(parseInt("0xf"));//得到的是15，并不是取0，而是把16进制转换过来了.也可以写成console.log(parseInt("0xf",16));
        </script>

parseFloat（）

  • parseFloat ：从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止。
  • 说明：
    除了第一个小数点有效外，parseFloat（）与parseInt（）的第二个区别在于它始终都会忽略前导的零。
  • 举例：
1
2
3
4
5
6
7
8
9
<script>
        var d=parseFloat("12.34px");
        // 在控制台中打印
        console.log(d);//得到的是12.34
        console.log(parseFloat("12.34.56px"));//得到的还是12.34，第二个小数点不会被截取出来
        console.log(parseInt("0123"));//得到的是123
        console.log(parseFLoat("0123"));//得到的还是123，他们都会忽略前面的0
        
    </script>

Number（）

  • 返回值：
    如果参数是 Date 对象，Number() 返回从 1970 年 1 月 1 日至今的毫秒数。
    如果对象的值无法转换为数字，那么 Number() 函数返回 NaN。
  • null与空字符, number 默认把其转化为0

面试题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <script>
        var x;
        console.log(x);//undefined

        var y = null;
        console.log(y);//null

        console.log(null == 0);//false,null值表示一个空对象指针
        console.log(undefined == 0);//false,undefined表示未赋值
        console.log(undefined == null);//true,undefined值是派生自null值的

        console.log(Number(""));//0
        console.log(Number(null));//0
        console.log(Number(undefined));//NaN
        console.log(Number("2"));//2
        console.log(Number("a2"));//NaN
        console.log(Number("222 333"));//NaN

        console.log(parseInt(""));//NaN
        console.log(parseInt(null));//NaN
        console.log(parseInt(undefined));//NaN
        console.log(parseInt("22"));//22
        console.log(parseInt("a22"));//NaN,要想让parseInt（）提取数字，字符串必须是数字开头
        console.log(parseInt(22));//22
        console.log(parseInt("   22"));//22
        console.log(parseInt("22   33"));//22
    </script>
</body>

（面试题）如何判断一个对象是不是数组类型

  • 首先我们需要知道：
    在 JavaScript 中，几乎“所有事物”都是对象。（具体可以看笔记“js对象 学习笔记（1）”）
  • typeof {}和typeof []的结果都是object：使用typeof来判断引用类型的数据类型其实并不准确，数组、正则、日期、对象的typeof返回值都是object。

instanceof 运算符

  • 语法：object instanceof constructor
  • 作用：判断引用类型（对象、数组、函数）属于哪个构造函数（Object()、Array()、Funtion()）。【也就是让我们去找这个 引用类型 里有没有 构造函数的显示原型】
  • 从构造函数入手，instanceof运算符 用来测试一个对象(引用类型（对象、数组、函数）)在其原型链中是否存在一个构造函数的prototype属性，返回一个布尔值，如果左侧的对象是右侧对象的实例，返回true，否则返回false。（MDN）
    • typeof 和 instanceof 都可以用来判断变量，typeof方法 返回一个字符串，来表示数据的类型。但是typeof来判断引用类型的数据类型其实并不准确。比如数组、正则、日期、对象的typeof返回值都是object，这就会造成一些误差。
    • 我们常用typeof判断基础类型(除null），用instanceof判断引用类型和null(除Array)
      1
      2
      3
      4
      5
      6
      typeof null === 'object' // true
      null instanceof Object // false

      // 注意：引用类型中，数组判断不出来
      [] instanceof Object // true
      [] instanceof Array // true
  • 更多可参考《JS class和继承 原型和原型链》

isPrototypeOf()

  • 语法：prototypeObj.isPrototypeOf(object)
  • 从原型入手，用于测试一个对象(prototypeObj)是否存在于另一个对象(object)的原型链上（MDN）
    • 注意：（可参考《JS class和继承 原型和原型链》）
      • 构造函数的显示原型prototype是个对象
      • 实例对象的隐式原型__proto__指向构造函数的显示原型prototype，这样构成的原型链。所以下面例子中，找[]的原型链会一路找到Array.prototype
  • 例子：可以利用isPrototypeOf()方法，判定Array.prototype是不是在[]/{}的原型链上，如果是，则返回true,否则false：
    1
    2
    Array.prototype.isPrototypeOf([]); // true
    Array.prototype.isPrototypeOf({}); // false

Array.isArray()方法

  • 这是js提供的方法，用于判断对象是不是数组类型，如下：
    1
    2
    3
    4
    Array.isArray([1, 2, 3]);  // true
    Array.isArray({foo: 123}); // false
    Array.isArray('foobar');   // false
    Array.isArray(undefined);  // false　
  • MDN中比较了isArray和instanceof的区别，当Array.isArray()不可用的使用，MDN做了补丁，说明还是比较推荐使用前面讲的方法 Object.prototype.toString.call(obj)。
JavaScript学习