JavaScript 基础知识-ES规范-数据类型（Undefined、Number、String、Boolean、Null、Object）

给月亮点灯398

1215人浏览 · 2025-08-07 17:29:50

给月亮点灯398 · 2025-08-07 17:29:50 发布

完整演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        /*
            1 数据类型
                JS中数据类型有：原始类型、引用类型。
                原始类型：Undefined、Number、String、Boolean、Null
                引用类型：Object以及Object的子类
                ES6之后，又添加了一种新的类型：Symbol
            
           2 typeof 变量名。可以获取变量的数据类型
                运算结果是以下6个字符串之一：注意字符串都是全部小写。
                    "undefined"
                    "number"
                    "string"
                    "boolean"
                    "object"
                    "function"
                    
            3 在JS当中比较字符串是否相等使用“==”完成。没有equals。
        */
      
        var i;
        console.log(typeof i); // "undefined"
        
        var k = 10;
        console.log(typeof k); // "number"
        
        var f = "abc";
        console.log(typeof f); // "string"

        var flag = false;
        console.log(typeof flag); // "boolean"
        
        var d = null;
        console.log(typeof d); // "object" 
        
        var obj = new Object();
        console.log(typeof obj); // "object"

        console.log(typeof NaN); // "number"
        
        function sayHello(){
            
        }
        console.log(typeof sayHello); // "function"

        /* Undefined类型 */
        var i; // undefined
        var k = undefined; // undefined
        console.log(i == k); // true
        /*
            Number类型
                包括：整数、小数、正数、负数、不是数字（NaN）、无穷大(Infinity)
        */
        console.log("abc" - 10) //NaN
        console.log(10 / 0) //Infinity
        console.log("10" + 10) //1010 （正常字符串拼接）
        console.log("20" - 10) //10 (能减就减)
        console.log(10 / 3) //3.33333
        console.log(parseInt("3.3333")); // 3
        console.log(parseInt("Tom"))  //NaN
        console.log(parseFloat("3.14")); // 3.14
        console.log(Math.ceil("2.1")); // 3
        console.log(isNaN(123)) //false,为数字
        console.log(isNaN("123")) //false,为数字
        console.log(isNaN("abc")) //true，不是数字
        console.log(isNaN(NaN))  //true，不是数字
        console.log(Number("3.33"))//3.33
        console.log(Number(""))//0 
        console.log(Number("abc"))//NaN
        console.log(Number(false))//0
         /*
            Boolean类型
                包括：true,false
        */
		// 规律:“有"就转换成true,"没有"就转换成false.
        console.log(Boolean(1)); // true
        console.log(Boolean(0)); // false
        console.log(Boolean("")); // false
        console.log(Boolean("abc")); // true
        console.log(Boolean(null)); // false
        console.log(Boolean(NaN)); // false
        console.log(Boolean(undefined)); // false
        console.log(Boolean(Infinity)); // true
        /*
            String类型：
            声明：
                var s = "abc";
                var s2 = new String("abc");
            常用属性：
                length 获取字符串长度
            常用函数：
                indexOf			获取指定字符串在当前字符串中第一次出现处的索引
                lastIndexOf		获取指定字符串在当前字符串中最后一次出现处的索引
                replace			替换
                substr			截取子字符串
                substring		截取子字符串
                toLowerCase		转换小写
                toUpperCase		转换大写
                split			拆分字符串
        */
            var x = "king";
            console.log(typeof x); // "string"
            
            var y = new String("abc");
            console.log(typeof y); // "object"
            
            console.log(x.length); // 4
            
            console.log("http://www.baidu.com".indexOf("http")); // 0
            console.log("http://www.baidu.com".indexOf("https")); // -1
            
            console.log("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含
            
            //注意：只替换了第一个。想全部替换需要使用正则表达式
            console.log("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
            
            // substr(startIndex, length)
            console.log("abcdefxyz".substr(2,4)); //cdef

            // substring(startIndex, endIndex) 注意:前闭后开区间
            console.log("abcdefxyz".substring(2,4)); //cd

            /*
                ==(等同运算符：只判断值是否相等)
                ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
            */
            console.log(1 == true); // true   
            console.log(1 === true); // false
            
            // null和undefined可以等同.
            console.log(null == NaN); // false
            console.log(null == undefined); // true
            console.log(undefined == NaN); // false
            console.log(NaN == NaN) //false
        
            console.log(null === NaN); // false
            console.log(null === undefined); // false
            console.log(undefined === NaN); // false
            console.log(NaN === NaN) //false

            /*
            Object类型：
                1、自定义的任何类型，默认继承Object。
                2、Object类属性
                    prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
            Object类包括哪些函数？
                toString()
                valueOf()
                toLocaleString()
            JS创建n对象？
                定义类的语法：
                    第一种方式：
                    function 类名(形参){
                        
                    }
                    第二种方式：
                    类名 = function(形参){
                        
                    }
                创建对象的语法：
                    new 构造类名(实参); 
            */
            // 定义一个学生类
            function Student(){
                console.log("Student.....");
            }
            
            // 当做普通函数调用
            Student();
            
            // 当做类来创建对象
            var stu = new Student();
            
            // 定义一个用户类
            function User(id, name, age){
                // 成员属性 要用this
                this.id = id;
                this.name = name;
                this.age = age;
                // 成员函数 要用this
                this.getName = function(){
                    return this.name;
                }
            }
            
            // 创建对象
            var user = new User(1, "zhangsan", 18);
            // 访问对象的属性方式一
            console.log(user.id,user.name,user.age);
            
            // 访问对象的属性方式二
            console.log(user["id"],user["name"],user["age"]);
           
            
            // 可以通过prototype这个属性来给类动态扩展属性以及函数
            User.prototype.getAge = function(){
                return this.age;
            }
            console.log(user.getAge())
 
             // 给String扩展一个函数
            String.prototype.suiyi = function(){
                console.log("这是给String类型扩展的一个函数，叫做suiyi");
            }
            "abc".suiyi();
    </script>
</body>
</html>

一、数据类型分类与 `typeof` 操作符

JS 中的数据类型分为原始类型和引用类型两大类，typeof 操作符可用于判断变量的类型（返回字符串），先看核心分类：

原始类型：Undefined、Number、String、Boolean、Null（ES6 新增 Symbol）
引用类型：Object 及所有 Object 的子类（如 Function、Array、Date 等）

1. `typeof` 操作符的返回结果

// 原始类型
var i; // 未赋值变量
console.log(typeof i); // "undefined"（Undefined类型）

var k = 10;
console.log(typeof k); // "number"（Number类型）

var f = "abc";
console.log(typeof f); // "string"（String类型）

var flag = false;
console.log(typeof flag); // "boolean"（Boolean类型）

var d = null;
console.log(typeof d); // "object"（特殊：Null类型用typeof返回"object"）

// 引用类型
var obj = new Object();
console.log(typeof obj); // "object"（Object类型）

console.log(typeof NaN); // "number"

function sayHello(){}
console.log(typeof sayHello); // "function"（函数特殊：typeof返回"function"）

关键说明：

typeof null 返回 "object" 是 JS 历史遗留的 Bug（可理解为 null 代表 “空对象指针”），判断 null 需用 === null。
函数虽属于 Object 子类，但 typeof 单独返回 "function"，方便区分。

二、原始类型详解

1. Undefined 类型

Undefined 类型只有一个值：undefined，表示 “未定义”，通常出现在：

变量声明后未赋值（如 var i; 中 i 的值）；
直接赋值 var k = undefined。

var i; // 未赋值，默认undefined
var k = undefined;
console.log(i == k); // true（值相等）

注意：undefined 与 “变量未声明” 不同：

未声明的变量直接使用会报错（ReferenceError）；
声明未赋值的变量使用时返回 undefined，不报错。

2. Number 类型

Number 类型涵盖整数、小数、特殊值（NaN、Infinity），是 JS 中最灵活也最易出错的类型之一。

（1）特殊值与运算规则

console.log("abc" - 10); // NaN（字符串无法转为数字，运算结果为非数字）
console.log(10 / 0); // Infinity（正数除以0，结果为无穷大）
console.log(-10 / 0); // -Infinity（负数除以0，结果为负无穷大）

NaN（Not a Number）：表示 “非数字”，通常由无效数学运算产生（如字符串减数字）；
Infinity：表示 “无穷大”，由正数除以 0 产生；-Infinity 为 “负无穷大”。

（2）字符串与数字的隐式转换

JS 中 + 对字符串是拼接，而-、*、/ 会尝试将字符串转为数字：

console.log("10" + 10); // "1010"（+ 优先字符串拼接）
console.log("20" - 10); // 10（- 会将字符串转为数字再运算）

（3）类型转换函数

常用的数字转换工具：

parseInt(str)：提取字符串中的整数部分（忽略小数），无法转换则返回 NaN；
parseFloat(str)：提取字符串中的浮点数；
Number(value)：将任意值转为数字（严格转换，空字符串转为 0）；
isNaN(value)：判断值是否为 “非数字”（注意：会先尝试转换值为数字）。

console.log(parseInt("3.3333")); // 3（只取整数）
console.log(parseInt("Tom")); // NaN（无法转换）
console.log(parseFloat("3.14")); // 3.14（保留小数）
console.log(Math.ceil("2.1")); // 3（Math.ceil向上取整，自动转换字符串为数字）

// isNaN的判断逻辑：先转换为数字，再判断是否为NaN
console.log(isNaN(123)); // false（123是数字）
console.log(isNaN("123")); // false（"123"可转为数字123）
console.log(isNaN("abc")); // true（"abc"无法转为数字）
console.log(isNaN(NaN)); // true（NaN本身就是非数字）

// Number转换规则
console.log(Number("3.33")); // 3.33（成功转换）
console.log(Number("")); // 0（空字符串转为0）
console.log(Number("abc")); // NaN（转换失败）
console.log(Number(false)); // 0（布尔值false转为0，true转为1）

3. Boolean 类型

Boolean 类型只有两个值：true 和 false，但 JS 中任意值都可通过 Boolean() 转换为布尔值，核心规则是：“有” 即 true，“没有” 即 false。

// "有"：非0数字、非空字符串、Infinity等
console.log(Boolean(1)); // true
console.log(Boolean("abc")); // true
console.log(Boolean(Infinity)); // true

// "没有"：0、空字符串、null、NaN、undefined
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(undefined)); // false

应用场景：条件判断（如 if (value) 本质是转换为布尔值判断）。

4. String 类型

String 类型表示字符串，有两种声明方式，特性及常用操作如下：

（1）两种声明方式的区别

var x = "king"; // 字面量声明（原始类型，typeof返回"string"）
var y = new String("abc"); // 构造函数声明（引用类型，typeof返回"object"）

日常开发推荐字面量声明（简洁，性能更好）；
两种方式均可使用字符串方法（JS 会自动将原始类型包装为对象）。

（2）常用属性与方法

length：获取字符串长度；
indexOf(substr)：查找子串首次出现的索引（未找到返回 - 1）；
lastIndexOf(substr)：查找子串最后出现的索引；
replace(old, new)：替换子串（默认只替换第一个）；
substr(start, length)：从 start 开始截取 length 个字符；
substring(start, end)：从 start 到 end 截取（前闭后开，不包含 end）。

var str = "king";
console.log(str.length); // 4（长度为4）

var url = "http://www.baidu.com";
console.log(url.indexOf("http")); // 0（子串"http"从索引0开始）
console.log(url.indexOf("https")); // -1（未找到"https"）
console.log(url.indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含

var params = "name=value%name=value%name=value";
console.log(params.replace("%", "&")); // "name=value&name=value%name=value"（只替换第一个%）

var s = "abcdefxyz";
console.log(s.substr(2, 4)); // "cdef"（从索引2开始，取4个字符）
console.log(s.substring(2, 4)); // "cd"（从索引2到4，不包含4）

三、等同与全等运算符：`==` 和 `===`

JS 中比较值相等有两个运算符，核心区别是是否检查类型：

==（等同）：只比较值是否相等（会自动转换类型）；
===（全等）：既比较值是否相等，也比较类型是否相同（不转换类型）。

// 不同类型值比较
console.log(1 == true); // true（1 转为布尔值是 true）
console.log(1 === true); // false（类型不同：number vs boolean）

// null、undefined、NaN的比较
console.log(null == undefined); // true（特殊：null和undefined视为等同）
console.log(null === undefined); // false（类型不同）

console.log(null == NaN); // false
console.log(undefined == NaN); // false
console.log(NaN == NaN); // false（NaN与任何值都不等，包括自身）
console.log(NaN === NaN); // false

最佳实践：优先使用 ===，避免隐式类型转换导致的意外结果（如 "" == 0 会返回 true，但逻辑上并不合理）。

四、Object 类型与对象系统

Object 是 JS 中所有引用类型的基类，理解其定义、实例化及动态扩展特性，是掌握 JS 面向对象的关键。

1. 类的定义与对象创建

JS 中定义类（构造函数）有两种方式，实例化对象用 new 关键字：

// 定义一个学生类
function Student(){
    console.log("Student.....");
}

// 当做普通函数调用
Student(); //输出"Student....."

// 当做类来创建对象
var stu = new Student();//输出"Student....."

// 定义一个用户类
function User(id, name, age){
    // 成员属性 要用this
    this.id = id;
    this.name = name;
    this.age = age;
    // 成员函数 要用this
    this.getName = function(){
        return this.name;
    }
}

// 创建对象
var user = new User(1, "zhangsan", 18);

注意：构造函数若作为普通函数调用（如 Student()），this 指向全局对象（浏览器中是 window），而非实例。

2. 对象属性与方法的访问

对象的属性和方法有两种访问方式：

// 访问属性
console.log(user.id, user.name, user.age); // 1 "zhangsan" 18（点语法）
console.log(user["id"], user["name"], user["age"]); // 1 "zhangsan" 18（中括号语法，支持变量）

// 访问方法
console.log(user.getName()); // "zhangsan"

中括号语法适用于属性名包含特殊字符（如 user["user-name"]）或属性名是变量的场景。

3. 用 `prototype` 动态扩展类

prototype 是 JS 中实现继承和动态扩展的核心属性，可给类（构造函数）动态添加属性和方法，所有实例共享这些扩展。

// 给User类扩展getAge方法
User.prototype.getAge = function() {
  return this.age;
};
console.log(user.getAge()); // 18（实例可调用扩展方法）

// 给String类型（原始类型的包装类）扩展方法
String.prototype.suiyi = function() {
  console.log("这是给String扩展的函数");
};
"abc".suiyi(); // 输出"这是给String扩展的函数"（字符串可直接调用）

原理：prototype 是类的原型对象，所有实例都会继承原型上的属性和方法，这也是 JS 实现 “动态特性” 的关键。

乐奇 Rokid 开放社区

更多推荐

2026年9月16日星期三 AI 日报

31.Meta推出个人Agent产品Muse：由闭源模型Muse Spark驱动，可通过独立应用、网页及WhatsApp交互，连接第三方服务、操作浏览器并后台持续执行任务，采用免费+20/100美元两档订阅，后续将接入Meta智能眼镜。22.国产AI编程工具全景成型：形成CLI终端、IDE插件、AI原生IDE、Web端、云端智能体、本地部署六种形态：Kimi Code、Trae、文心快码Comat

乐奇 Rokid 开放社区

AR巡检哪家好

乐奇 Rokid 开放社区

Hydra 1.1 到 1.2 升级指南：@hydra.main() 与 hydra.initialize() 的 config_path 默认行为变更

Hydra 从 1.2 开始，当 `version_base >= "1.2"` 时，`@hydra.main()` 和 `hydra.initialize()` 的 `config_path` 参数默认值由"应用所在的目录"变更为 `None`，即不再向配置搜索路径（Config Search Path）中自动添加任何目录。这篇指南梳理 Hydra 1.0 → 1.1 → 1.2 三个阶段 `c