JavaScript 入门指南(二)JavaScript 的数据类型和 JSON 数据

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 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对象有三种数据格式,分别如下:

                                                    类型语法解释
                                                    对象类型{“key1”:value, “key2”:value, “key3”:value…}其中 key 是字符串类型,而 value 是任意类型
                                                    数组/集合类型[value, value, value…]其中 value 是任意类型
                                                    混合类型[{},{}… …] 或 {“key”:[]… …}对象格式和数组格式可以互相嵌套

                                                    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