JavaScript中的数据类型简介

JavaScript学习笔记（一）——数据类型

虽然JavaScript是一种“弱类型”的脚本语言，但数据本身仍属于某种数据类型，本文对JavaScript中的数据类型作了简要介绍。

0x01 JavaScript中的数据类型

1. ES6¹之前的数据类型有6种

   • Undefinrd
   • Number
   • String
   • Boolean
   • Null
   • Object

2. ES6之后添加了1种

   • Symbol

0x02 JavaScript中的typeof运算符

typeof可以在程序运行过程中动态获取数据的数据类型。

• typeof语法格式：

  typeof 变量名

• typeof运算符的运算结果是以下6个字符串之一（字母全小写）

  “undefined”, “number”, “object”, “string”, “fuction”, “boolean”

示例：

function sum(a, b) {
    if (typeof a == "number" && typeof b == "number") {
        return a + b;
    }
}

调用函数：

alert(sum(1, 2));

此时浏览器会弹窗，结果为3

注意下面代码的执行结果：

var i;
alert(typeof i);//结果为undefined
var j = 10;
alert(typeof i);//结果为number
var s = "abc";
alert(typeof s);//结果为string
var k = false;
alert(typeof i);//结果为boolean
var n = null;
alert(typeof n);//结果为object!!!!!!
var obj = new Object();
alert(typeof obj);//结果为object
//对于上述定义的函数sum
alert(typeof sum);//结果为function

0x03 Undefined类型

Undefined类型只有一个值：undefined

当一个变量没有赋值时，系统默认是undefined

var i;
var j = undefined;
var k = "undefined";
alert(i == j);//true
alert(i == k);//false

0x04 Number类型

Number类型包含的值：负数、整数、不是数字（Not a Number）、无穷大

例：-1,0,1,2.2，NaN Infinity

var i = -1;
var j = 0;
var k = 1;
var m = 2.2;
var n = NaN;
var q = Infinity;
alert(typeof i);//number
alert(typeof j);//number
alert(typeof k);//number
alert(typeof m);//number
alert(typeof n);//number
alert(typeof q);//number

什么时候运算结果是NaN?
运算结果本来应该是一个数字，但运算结束后结果不是一个数字时结果为NaN.
例如：

var a = 10;
var b = "hello";
alert(a / b);//NaN

但是下面的代码结果不是NaN!

alert(a + b);

结果为10hello，这里的+作字符串拼接，而不作加法运算。

当除数为0是，运算结果为Infinity.

var a = 10;
var b = 0;
alert(a / b);//Infinity

isNaN(a)函数：

• a不是数字时运算结果为true；
• a是数字时结果为false

示例：

function sum(a, b) {
    if (isNaN(a) || isNaN(b)) {
        alert("参与运算的必须是数字！");
    }
    return a + b;
}
//调用
sum(10, "12");//参与运算的必须是数字！
sum(10, 12);//22

---

0x05 Boolean类型

JavaScript中的Boolean类型只有两个值：true和false

Boolean()函数：将非Boolean类型的数据转换为Boolean类型（一般程序会自动调用，无需手写）。

例如：

var username = "";
if (username) { //此处会自动调用Boolean()函数，转换结果为false
    alert("Hello " + username)
} else {
    alert("用户名不能为空！");//此句代码被执行
}

常用的Boolean()函数结果：

alert(Boolean(1));//true
alert(Boolean(0));//false
alert(Boolean(""));//false
alert(Boolean("abc"));//true
alert(Boolean(NaN));//false
alert(Boolean(null));//false
alert(Boolean(undefined));//false
alert(Boolean(Infinity));//true

---

0x06 Null类型

Null类型只有一个值：null

但是，typeof null运行的结果是Object

---

0x07 String类型

在JavaScript中，创建字符串的方式：

• 第一种：

var s = "abc";

• 第二种：

 var s = new String("abc";)

注意：String是一个内置的类，其父类是Object。

示例：

//小string（属于原始类型String）
var s1 = "abc";
alert(typeof s1);//string
//大String（属于Object）
var s2 = new String("abc");
alert(typeof s2);//object

小string和大String的属性和函数通用。

• 常用的String类型的常用属性和函数：
  1. length：返回字符串的长度
  2. charAt()：返回指定位置（下标）的字符
  3. indexOf()：返回给定的字符串在此字符串中第一次出现处的索引
  4. lastIndexOf()：返回给定的字符串在此字符串中最后一次出现处的索引
  5. replace()：替换
  6. split()：拆分字符串
  7. toLowerCase()：将字符串字母全部转换为小写
  8. toUpperCase()：将字符串字母全部转换为大写
  9. substr()：截取指定长度的子字符串
  10. substring()：截取指定位置（左开右闭）的子字符串

示例：

var s = "http://www.baidu.com";
alert(s.indexOf("http"));//0
alert(s.indexOf("https"));//-1
alert(s.charAt(3));//p
alert(s.replace("http", "https"));//https://www.baidu.com,只替换一次
alert(s.substr(2, 4));//tp:/ 表示从2开始取4个字符
alert(s.substring(2, 4));//tp 表示取位置为[2,4)的字符，不包含4

---

0x08 Object类型

• Object类型是所有类型的超类，自定义的任何类型，默认继承Object.

• Object类型常用的属性：

• prototype（最常用）：给类动态的扩展属性和函数。

• constructor

• Object类包含的函数

• toString()

• valueOf()

• toLocalString()

在JavaScript中定义类的方法（和定义函数相同）：

• 第一种方法：

  function 类名(形参) {
      
  }
  

• 第二种方法：

  类名 = function(形参) {
      
  }
  

判断一段代码是类还是函数具体要看怎么使用。
例如：

function sayHello() {

}
//把sayHello当做函数
sayHello();
//把sayHello当做类
var obj = new sayHello();

在JavaScript中定义类的同时又是一个构造函数的定义

function Student(name, age) {
    this.name = name;
    this.age = age;
}

代表Student类中有两个属性name和age。

//创建对象
var stu = new Student("Eric", 25);
//访问属性
alert(stu.age);//25
alert(stu.name);//Eric
//访问属性的另一种语法
alert(stu["age"]);//25
alert(stu["name"]);//Eric

在类中定义函数：

Product = function(pno, pname, price) {
    //属性
    this.pno = pno;
    this.pname = pname;
    this.price = price;
    //方法
    this.getPrice = function() {
        return this.price;
    }
}
var pro = new Product(1, "Apple", 6.0);
var pri = pro.getPrice();
alert(pri);//6.0

此外还可以通过prototype属性给类动态扩展属性和方法：

//动态扩展一个getName()函数
Product.prototype.getName = function() {
    return this.pname;
}
//调用动态扩展的函数
var pna = pro.getName();
alert(pna);//Apple

---

0x09 区分null、NaN和undefined

• 数据类型不一致

  alert(typeof null);//object
  alert(typeof NaN);//number
  alert(typeof undefined);//undefined
  

• null和undefined可以等同

  alert(null == undefined);//true
  alert(null == NaN);//false
  alert(NaN == undefined);//false
  

---

0x0A 区分==和===

==：等同运算符 => 只判断值是否相等。

===：全等运算符 => 既判断值是否相等，又判断数据类型是否相同。

alert(null === undefined);//false
alert(null === NaN);//false
alert(NaN === undefined);//false
alert(1 == true);//true
alert(1 === true);//false

by xiaoxin_zh
2022.4.18

---

---

1. ECMAScript6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ↩︎