JavaScript 入门指南（二）JavaScript 的数据类型和 JSON 数据

矫情吗；* 2024-04-20 11:59 36阅读 0赞

## JavaScript 的数据类型 ##

### 基本数据类型 ###

*  **undefined** 类型：只有一个值 undefined（未定义），它是一个保留字。表示变量虽然已经声明，但却没有赋值
 *  **number** 类型：所有的整数和小数
    
    注：`NaN` 是一个特殊的数字值（`typeof NaN`的结果为`number`），是`not a number`的缩写，表示不是一个合法的数字。不是数字的字符串通过函数进行数据类型转换为数字，结果就是 NaN
 *  **string** 类型：所有被**单引号**和**双引号**包裹的字符串
 *  **boolean** 类型：布尔值，只有两个值 true 和 false
 *  **object** 类型：所有对象的数据类型

**注：**

*  **可以使用关键字 typeof 可以查看变量的数据类型**
 *  **null** 类型：只有一个值 null（空），它是一个保留字。表示没有值，用于定义空的或不存在的引用。
    
    **注意：**
    
     *  空值不等同于空字符串 “” 或 0
     *  undefined 类型就是使用 null 演化而来，所以 undefined == null 为 true
     *  undefined 的数据类型是 undefined，**null 的数据类型是 object**，所以 undefined === null 为 false

### 引用数据类型（对象） ###

*  js 语言是基于对象的编程语言。在 js 中没有类，里边使用的对象都是使用函数模拟出来的，包含了一些内置对象
 *  **传址**：在赋值过程中，引用数据类型的变量实际上存储的是数据的地址（对数据的引用），而不是原始数据或者数据的拷贝。
 *  **注意：所有的对象都是 object 对象，包括 NaN、null**

**JavaScript 创建对象的 3 种方式**：

*  方式1：**通过对象字面量构造**，其 prototype（原型、蓝本）指向 Object.prototype
    
        var 对象变量名={
              
        	属性名:属性值,
        	方法名:function([参数列表]){
              
        		方法体
        	}
        }
        
        var person = {
              
            name: "Tom",
            age: 18
        }
        console.log(person)		//{name: 'Tom', age: 18}
 *  方式2：**通过构造函数构造**，其 prototype（原型、蓝本）指向其构造函数的 prototype 属性指向的对象
    
        var 对象变量名 = new Object();
        对象变量名.属性名 = 属性值;
        对象变量名.方法名 = function([参数列表]){
              
        	方法体
        }
        
        var person = new Object();
        person.name = "张三";
        person.age = 18;
        console.log(person)		//{name: 'Tom', age: 18}
    
    **自定义构造函数构造**
    
        // 方式1：
        function 构造函数([参数列表]){
              
        	this.属性名=属性值（或参数列表中参数）;
        	this.方法名=function([参数列表]){
              
        		方法体
        	};
        }
        var 对象名 = new 构造函数([参数列表]);
        
        // 方式2：原型法
        function 对象创建器(){
              };
        对象创建器.prototype.属性=属性值;
        对象创建器.prototype.方法=function([参数列表]){
              
        	方法体
        };
        var 对象名 = new 对象创建器([参数列表]);
        
        // 方式1与方式2混合
        function 构造函数([参数列表]){
              
        	this.属性1=属性值;
        	...;
        	this.属性N=属性值;
        	};
        }
        对象创建器.prototype.方法=function([参数列表]){
              
        	方法体
        };
        var 对象名 = new 构造函数([参数列表]);
 *  方式3：**通过 Object.create 构造**，其 prototype（原型、蓝本）指向 Object.create 的参数
    
        var person = {
              
            name: "Tom",
            age: 18
        }
        var person = Object.create(person)
        console.log(person)				//{}
        console.log(person.__proto__)	//{name: 'Tom', age: 18}

总结：第 1 种创建方式其实就是第 2 种的语法糖，过程一致。第 3 种方式通过 Object.create 来创建的对象并不会继承其父对象的属性和方法，只能通过原型链来访问

### 常用内置对象 ###

#### String：字符串 ####

String 对象用于处理文本（字符串）

String 对象中定义了一些处理字符串的函数

*  **创建 String 对象的方式**（4 种方式）：
    
        var str = new String("字符串");
        var str = "字符串";
        var str = '字符串';
        var str = `字符串`;
    
    注：
    
     *  使用反向单引号创建字符串，可以使用 $\{\} 引用其他字符串对象
        
            var str1 = 'a-b-c';
            var str2 = `hello${
                      str1}`;	// helloa-b-c
 *  **String 对象常用属性：**
    
     *  **length** ：字符串的长度
        
            'aaa'.length	// 3
 *  **String 对象常用函数：**
    
     *  **charAt()** ：返回在指定索引的字符
        
            // 使用length属性和charAt方法遍历字符串
            for(let i=0; i<str2.length; i++){
                    
                alert(str2.charAt(i));
            }
     *  **concat()** ：连接字符串
     *  **indexOf()** ：在字符串中从前往后查找另一个字符串的索引，若找到了，返回对应的索引，若找不到,返回 -1
     *  **lastIndexOf()** ：在字符串中从后往前查找另一个字符串的索引，若找到了，返回对应的索引，若找不到,返回 -1
     *  **toLowerCase()** ：把字符串转换为小写
     *  **toUpperCase()** ：把字符串转换为大写
     *  **substring(开始索引, 结束索引)** ：截取两个索引之间的字符，包含头，不包含尾
     *  **substr(开始索引)** ：从开始索引截取到字符串末尾
     *  **substr(开始索引, 字符个数)** ：截取从开始索引到指定字符个数内容

#### Array：数组 ####

Array 对象用于在单个的变量中存储多个值

在 js 中是没有集合的,，可以使用数组作为集合使用，Array 数组长度是可以变化的，可以存储任意数据类型的数据

*  **创建 Array 对象的语法**（4 种方式）：
    
        // 创建一个长度为 0 的数组
        var arr = new Array(); 
        // 创建指定长度的数组，数组中的元素有默认值 undefined
        var arr = new Array(size); 
        // 创建包含指定元素的数组
        var arr = new Array(element0, element0, ..., elementn); 
        // 创建包含指定元素的数组
        var arr = [element0, element0, ..., elementn];
 *  **二维数组**：数组中的元素仍是一个数组
    
        // 示例
        var arrArr = [
            [1,2,3],
            ["a","b","c"],
            [true,false]
        ];
 *  **Array 对象常用函数：**
    
     *  **concat(数组)** ：数组合并
     *  **unshift(元素)** ：数组头添加元素
     *  **push(元素)** ：数组尾添加元素
     *  **shift()** ：数组头删除一个元素
     *  **pop()** ：数组尾删除一个元素
     *  **join(分隔符)** ：数组元素拼接为字符串，参数为指定分隔符
        
            var arr1 = ['a', 'b', 'c']
            console.log(arr1.join("-"));	// a-b-c
     *  **sort()** ：对数组的元素进行排序，默认是升序排序
        
        可以传参一个自定义排序规则的匿名函数
        
            var arr3 = [1,5,4,3,2];
            // 排序数组元素 sort() 对数组的元素进行排序,默认是升序排序
            console.log("排序后: " + arr3.sort());		//排序后：1,2,3,4,5
            
            // sort(函数()) 根据函数中写的规则排序
            console.log("排序后: " + arr3.sort(function (a, b) {
                    
                // 升序
                return a-b;
            }));	// 排序后：1,2,3,4,5
            
            console.log("排序后: " + arr3.sort(function (a, b) {
                    
                // 降序
                return b-a;
            }));	//排序后：5,4,3,2,1

#### Date：日期 ####

Date 对象用于处理日期和时间。

*  **创建 Date 对象的语法**：var myDate=new Date();
 *  **常用的方法:**
    
     *  **getFullYear()** ：从 Date 对象以四位数字返回年份
     *  **getMonth()** ：从 Date 对象返回月份（0 ~ 11）
     *  **getDate()** ：从 Date 对象返回一个月中的某一天（1 ~ 31）
     *  **getHours()** ：返回 Date 对象的小时（0 ~ 23）
     *  **getMinutes()** ：返回 Date 对象的分钟（0 ~ 59）
     *  **getSeconds()** ：返回 Date 对象的秒数（0 ~ 59）
     *  **getMilliseconds()** ：返回 Date 对象的毫秒（0 ~ 999）
     *  **getTime()** ：返回 1970 年 1 月 1 日至今的毫秒数
     *  **toLocaleString()** ：根据本地时间格式，把 Date 对象转换为字符串

#### Math：数学运算 ####

Math 对象用于执行数学任务。

Math 类中的属性和方法可以直接通过 **Math.属性** 或 **Math.方法名(参数)** 直接使用，类似于 java 中静态的成员

*  **常用属性：**
    
     *  PI 返回圆周率（约等于3.14159）。
 *  **常用方法：**
    
     *  **ceil(x)** ：向上取整
     *  **floor(x)** ：向下取整
     *  **round(x)** ：四舍五入
     *  **pow(x, y)** ：返回 x 的 y 次幂
     *  **random()** ：返回 0 ~ 1 之间的随机数

#### RegExp：正则表达式 ####

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具

正则表达式本质就是一个包含了某些规则的字符串，用于对其他的字符串进行校验

*  **创建 RegExp 对象的语法：**
    
        var reg = new RegExp("^正则表达式的规则$");
        var reg = /^正则表达式的规则$/;
 *  **RegExp 对象常用方法：**
    
     *  **test(“要校验的字符串”)** ：判断字符串是否满足正则表达式的规则。满足：返回 true；不满足：返回 false
        
            var reg = /^1[345789][0-9]{9}$/;
            //调用正则表达式中的方法test,对手机号进行校验
            console.log(reg.test("13888888888"));//true
            console.log(reg.test("138888888881"));//false
     *  **match(正则表达式)** ：判断字符串是否匹配正则表达式的规则。匹配成功：返回字符串本身；匹配失败：返回 null
        
            var reg = /^1[345789][0-9]{9}$/;
            console.log("13888888888".match(reg));//Array [ "13888888888" ]
            console.log("138888888a8".match(reg));//null

#### 全局函数 ####

全局函数：在 script 标签中可以直接使用的函数

*  **字符串转为数字**：
    
     *  **parseInt(字符串)** ：将字符串转为整数数字，从左到右遇到非数字停止
     *  **parseFloat(字符串)** ：将字符串字符转为小数数字，从左到右遇到非数字停止
     *  **Number(字符串)** ：将字符串转换为数字
        
         *  正常的数字字符串转换为相应的数字（类型从 string 转换为 number）
         *  空字符串（包括含空格的空字符串）转换为 0
         *  非空且不是数字的字符串会转换为 NaN（不是各数字）
            
            **注意：`NaN`是唯一一个和自身不相等的值。NaN 的数据类型是 number**
    
        var a = parseInt("11a11");
        console.log(a + 1);		// 12
        
        var b= parseFloat("1.1afdsaf22");
        console.log(b + 100);	// 101.1
        
        var b = Number("111")
        console.log(b)			// 111
        console.log(typeof b)	// number
 *  **isNaN(字符串)** ：判断非数字。非数字返回 true，是数字返回 false
 *  **encodeURI(字符串)** ：使用 ASCII 码对字符串编码为 URI 字符串
 *  **decodeURI(字符串)** ：使用 ASCII 码对 URI 字符串解码为 UTF-8 编码的字符串
 *  **eval(字符串)** ：计算 JavaScript 字符串，即把字符串当做 js 表达式来执行
    
        var aaa = "1+5*10-20";
        var bbb = eval(aaa);	// 31

### 数据类型转换 ###

JavaScript 变量可以进行数据类型转换：

*  方式1：**通过使用 JavaScript 函数**
 *  方式2：**通过 JavaScript 自身自动转换**

**常见类型转换：**

*  **其他类型转换为字符串**：
    
     *  方法1：全局方法 String()
        
            new String(任意数字)
            new String(false)
            new String(Date())
     *  方式2：自动隐形转换
        
            "" + 任意数字
            "" + false
     *  方式3：各自数据包装对象的 toString() 方法
        
            var num = 任意数字
            num.toString()
            false.toString()
            Date().toString()
 *  **将字符串转换为数字**：
    
    全局函数 parseInt()、parseFloat()、Number() 都可以将字符串转换为数字。详见全局函数

## JSON 数据 ##

### JSON 简介 ###

JSON（JavaScript Object Notation，JS 对象标记）是一种轻量级的**数据交换**格式。它基于 ECMAScript 的一个子集，采用**完全独立于编程语言**的文本格式来存储和表示数据。就是说不同的编程语言 JSON 数据是一致的。JS 原生支持 JSON，简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

### JSON 的语法格式 ###

*  json对象有三种数据格式，分别如下：
    
    <table> 
     <thead> 
      <tr> 
       <th>类型</th> 
       <th>语法</th> 
       <th>解释</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>对象类型</td> 
       <td>{“key1”:value, “key2”:value, “key3”:value…}</td> 
       <td>其中 key 是字符串类型，而 value 是任意类型</td> 
      </tr> 
      <tr> 
       <td>数组/集合类型</td> 
       <td>[value, value, value…]</td> 
       <td>其中 value 是任意类型</td> 
      </tr> 
      <tr> 
       <td>混合类型</td> 
       <td>[{},{}… …] 或 {“key”:[]… …}</td> 
       <td>对象格式和数组格式可以互相嵌套</td> 
      </tr> 
     </tbody> 
    </table>
    
    json 本质是一个对象
    
    key：字符串类型，value：可以是任意类型
    
    对象中包含了多个键值对
 *  示例：
    
        [{
              "key1":value,"key2":value,"key3":value...},{
              "key1":value,"key2":value,"key3":value...}]
        
        {
              "key1":value,"key2":[value,value,value...],"key3":value...}
        
        {
              "key1":value,"key2":[{
              "key1":value,"key2":value,"key3":value...},value,value...],"key3":value...}

### JSON 格式转换 ###

js 中 JSON 对象与字符串转换的相关函数

*  **JSON.stringify(object)** ：把 json 对象转为字符串
 *  **JSON.parse(string)** ：把字符串转为 json 对象

//创建json格式的数据
    var json = {
        "name":"柳岩","age":18};
    //alert(typeof json);//object
    
    //JSON.stringify(object) 把json对象转为字符串
    var str = JSON.stringify(json);
    //alert(str);//{"name":"柳岩","age":18}
    //alert(typeof str);//string
    //alert(str.name);//undefined
    
    //JSON.parse(string) 把字符串转为json对象
    var obj = JSON.parse(str);
    alert(typeof obj);			//object
    alert(obj.name+"\t"+obj.age);//柳岩	18