【三】JavaScript之数据类型
【0】数据类型展示
- javascript中变量的值有不同的作用或者功能。
- 按不同的功能，值也可以区分不同的类型。
| 类型 | 名称 | 描述 |
|---|---|---|
| Number | 数值型 | 整数，浮点数。。。。 |
| String | 字符串 | 文本，一般使用"双引号"，'单引号'或者反引号圈起来的都是文本。 |
| Boolean | 布尔值 | 用于逻辑判断结果，值只有true和false，注意：首字母不能大写！！ |
| Array | 数组 | 类似python的列表，但是在js中数组属于对象的其中一种。 |
| Object | 对象 | 类似python的字典，但是在js中万物皆为对象。 |
| null | 空 | 类似python的None，表示什么都没有。 |
| undefined | 未定义 | 变量在未定义时直接使用，则值就是Undefined |
- javascript中提供了一个关键字typeof，可以让我们查看变量值的类型
typeof 这是一个关键字，但是用法类似函数，有返回值，返回值就是数据的类型。只能用于查看布尔型，字符串和数值类型，像数组、对象是无法查看的。
（1）Number类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var num1 = 100; //
var num2 = 1.33;
var num3 = 0;
var num4 = -1.33;
var num5 = 1.3e10;
var num6 = 133_200_100;
console.log( typeof num1 ); // number
console.log( typeof num2 ); // number
console.log( typeof num3 ); // number
console.log( typeof num4 ); // number
console.log( typeof num5 ); // number
console.log( typeof num6 ); // number
// 数值类型支持算数运算
console.log(num1+100); // 加法运算
console.log(num1-100); // 减法运算
console.log(num1*100); // 乘法运算
console.log(num1/100); // 除法运算
console.log(num1%3); // 取模，求余运算
console.log(num1**3); // 幂运算
</script>
</body>
</html>
（2）String类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 字符串在js中有2种，分别是单行字符串（普通字符串）与多行字符串（文本字符串、模板字符串）。
// 其中，单行字符串可以使用单引号或双引号圈起来就是单行字符串。
// 使用反引号圈起来的，就是多行字符串。
// 单引号声明字符串
var str1 = 'hello world';
console.log(typeof str1); // string
// 双引号单行字符串
var str2 = "hello world";
console.log(typeof str2); // string
// 多行文本字符串
var str3 = `hello world`;
console.log(typeof str3); // string
// 字符串的使用注意事项.
// 1. 单行字符串，内容是不能换行的。所有的换行通过转义字符\r\n来完成.
var str4 = "hello\r\nworld";
console.log(str4);
// var str5 = "hello
// world"; // 这里报错，单行字符串内部不能内容换行，必须保证引号开始与结束在同一行出现
// 2. 多行文本字符串中编写变量会被js识别转换成值
var str5 = 'world'
var str6 = `hello ${str5}`; //hello world 写在多行文本字符串中的 ${变量名}会被js进行识别并转换成变量的值
console.log(str6);
// 3. 单行字符串中编写变量是不会被js识别的。
var str7 = "world"
var str8 = "hello ${str7}"
console.log(str8); // hello ${str7}
</script>
</body>
</html>
（3）Boolean类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 表示逻辑运算或者比较以后产生的结果。只有2个值。
// true，表示真，正确，成立.
// false，表示假，错误，不成立。
var ret1 = true;
console.log( ret1, typeof ret1); // true "boolean"
var ret2 = false;
console.log( ret2, typeof ret2); // false, "boolean"
// 布尔值是一个关键字，也叫字面量，不能加上引号，否则会被当成字符串！！
var ret3 = 'true';
console.log( ret3, typeof ret3 ); // true string
// 与python不同，布尔值不能首字母大写，必须全部小写！
// 而且python3中的布尔值实际上就是数值类型，但是js中布尔类型就是独立的数据类型，
// 当然因为js是属于弱类型语言，可以布尔值转换成整型而已。
var ret4 = 1 > 2;
console.log(ret4, typeof ret4); // false "boolean"
var ret5 = 1 < 2;
console.log(ret5, typeof ret5); // true "boolean"
</script>
</body>
</html>
（4）Array类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 数组代表的是一组数据，这组数据可以有0或多个。数组中的数据也叫成员，
// 类似python里面的列表，数组里面有多个成员。每个成员的值可以是任意类型。
// js的数组有2种声明方式：
// 1. 字面量声明方式
// 格式：var 变量名 = ["成员1",成员2....]
// 0个成员的空数组
var arr0 = []
console.log(arr0, typeof arr0); // [] "object"
// 注意：js中无法通过typeof辨认区别数组与对象的区别，因为数组就是一种对象。
// 数组可以有多个成员
var arr1 = ["苹果","香蕉","梨子","水牛"]
console.log( arr1, Array.isArray(arr1) ); // ["苹果", "香蕉", "梨子", "水牛"] true
// 通过Array数组类的isArray方法可以用于判断指定变量是否是数组，true表示是数组，false表示不是数组
// 2. 通过Array函数，创建数组
var arr2 = Array(); // Array本身就是一个用于创建对象的函数，虽然叫类，但实际上内部就是函数，也可以不使用new关键字
console.log(arr2, Array.isArray(arr2)); // [] true
// 有成员的数组
var arr3 = Array("苹果","香蕉","梨子","水牛"); // 函数中的参数中传递数组的成员
console.log( arr3, Array.isArray(arr3) ); // ["苹果", "香蕉", "梨子", "水牛"] true
// 3. 通过new Array来创建，创建数组对象
// 空数组
var arr4 = new Array(); // new 表示创建，新建
console.log(arr4, Array.isArray(arr4)); // [] true
// 有成员的数组
var arr5 = Array("苹果","香蕉","梨子","水牛"); // 函数中的参数中传递数组的成员
console.log( arr5, Array.isArray(arr5) ); // ["苹果", "香蕉", "梨子", "水牛"] true
// 创建指定成员数量的数组
var arr6 = new Array(3); // 此处的3并非成员，而是表示创建有3个成员的数组，默认三个成员都是null的
console.log( arr6, Array.isArray(arr6) ); // [empty × 3] true
// js中的数组的使用，类似python的列表，也可以通过下标来获取指定位置的成员。
// 下标都是从0开始，逐一递增，但是js中的数组不支持切片或者负数下标
var arr7 = ["苹果","香蕉","梨子","水牛"]
console.log(arr7[0]); // 获取第1个成员的值
console.log(arr7[1]); // 获取第2个成员的值
// js的数组同时也可以通过下标来修改对应位置的成员的值。
arr7[0] = "小苹果";
console.log(arr7);
arr7[3] = "大水牛";
console.log(arr7); // ["小苹果", "香蕉", "梨子", "大水牛"]
// js中如果设置-1，实际上并不代表原来的数组的最后一个成员，而是表示新增了一个下标为-1的成员
arr7[-1] = "hello"
console.log(arr7);
// js中的数组是对象，所有数组中的下标实际上就是属性，下标对应的成员值就是属性值
arr7["money"] = 200
console.log(arr7) // ["小苹果", "香蕉", "梨子", "大水牛", -1: "hello", money: 200]
// 获取数组的成员个数，也就是数组的长度，当然，仅仅只是计算下标的成员数量，像负数下标，或字符串格式的下标，会被认为是非数组成员，而是对象的属性。
console.log(arr7.length)
// 所以，建议使用js中的数组时，尽量不要添加负数下标或者字符串下标的成员进来，会影响长度计算。
arr8 = ["小苹果", "香蕉", "梨子", "大水牛"]
console.log(arr8);
// 基于数组的长度，我们就可以随时获取数组的最后一个成员了。
console.log(arr8[arr8.length-1]) // 大水牛
// 数组的成员也可以新增或追加
// 通过指定新的下标来新增数组成员
arr9 = ["苹果"]
arr9[1] = "香蕉"
arr9[2] = "葡萄"
arr9[5] = "梨子" // 注意：尽量不要跳数字下标添加数组成员，否则跳过的数字下标会被认为空成员记录到数组，影响数组的长度计算。
console.log(arr9) // ["苹果", "香蕉", "葡萄", empty × 2, "梨子"]
// 建议追加数组成员
arr10 = ["苹果"]
arr10[arr10.length] = "香蕉"
arr10[arr10.length] = "哈密瓜"
console.log(arr10)
// 通过数组提供的push方法来追加数组成员
arr11 = ["苹果"]
arr11.push("香蕉")
arr11.push("梨子", "水牛")
console.log(arr11) // ["苹果", "香蕉", "梨子", "水牛"]
// 通过数组提供的unshift方法在数组的左边插入成员
arr12 = ["苹果"]
arr12.unshift("香蕉")
arr12.unshift("梨子", "水牛")
console.log(arr12) // ["梨子", "水牛", "香蕉", "苹果"]
// 删除成员[不要使用delte删除，不干净，会影响计算数组长度]
arr13 = ["A", "B", "C", "D"]
delete arr13[1]
console.log(arr13)
// 使用数组提供的方法删除成员
arr14 = ["A", "B", "C", "D"]
arr14.shift() // 删除左边第一个成员
arr14.shift() // 删除左边第一个成员
console.log(arr14) // ["C", "D"]
// 删除数组的最后一个成员
arr15 = ["A", "B", "C", "D"]
arr15.pop()
console.log(arr15) // ["A", "B", "C"]
// 删除数组的指定下标的指定数量成员
arr16 = ["A", "B", "C", "D"]
arr16.splice(2,1) // 从下标为2开始删除1个成员，当然splice是一个高级函数，提供了数组的删除操作以后，还有新增，替换等功能
console.log(arr16)
// 嵌套数组，js中的数组与python一样，可以嵌套多层
arr17 = [
[1,2,3],
[4,5,6],
[7,8,9]
]
console.log(arr17)
console.log(arr17[1]) // 访问第一个成员
console.log(arr17[1][2]) // 访问第一个成员数组的第二个成员
</script>
</body>
</html>
（5）Object类型
表示的是一个事物或者有一个概念相关的数据.对象内部有对应事物或者概念的特征[属性]和行为[方法]
对象的方法/动作，就是函数。
对象的特征/属性，就是变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 与python不一样，js的对象不需要不依赖于类的创建，也就是说可以直接创建对象，也可以使用类创建对象。
// 常用的声明对象的方式有4种。
// 1. 通过花括号字面量来声明
// 空对象，没有任何属性或方法的对象
var obj0 = {}
console.log(obj0);
// 有属性，但没有方法的对象
money = 100
var obj1 = {
name: "晓明",
age: 30,
sex: true,
money, // money: money, 当对象的属性值是一个变量，并且变量与属性名一样，则可以简写
lve: ["苹果","香蕉","雪梨","水牛"], // 对象的属性成员可以是任意类型，也可以是数组或其他对象
gf: {
name: "小白",
age: 28,
sex: false,
},
}
console.log(obj1);
// 有属性，有方法的对象
var obj2 = {
name: "晓明",
age: 30,
sex: true,
lve:["苹果","香蕉","雪梨","水牛"],
say(){ // 对象的方法，js中声明函数类似与python，但是def换成function
return "hello world";
},
walk(){ // 对象的方法的简写方式，walk: function(){ 的简写
return "我在走路！！"
}
}
console.log(obj2);
// 2. 通过Object来创建对象
var obj3 = Object(); // 空对象
// 对象可以追加属性或方法的
obj3.name = "小白";
obj3.age = 28;
obj3.sex=false;
obj3.say = function(){
return "hello world";
}
obj3.walk = ()=>{ // function() { 的 简写方式，但是与普通的函数声明有细微区别，后面学到函数的时候我们再讲
return "我在走路！！"
}
console.log(obj3);
// 2.1 通过new Object来创建对象
var obj4 = new Object(); // 空对象
// 对象可以追加属性或方法的
obj4.name = "小黑";
obj4.age = 16;
obj4.sex=true;
obj4.say = function(){
return "hello world";
}
obj4.walk = ()=>{ // function() { 的 简写方式，但是与普通的函数声明有细微区别，后面学到函数的时候我们再讲
return "我在走路！！"
}
console.log(obj4);
// 3. 通过构造函数来创建
function Humen(name, age, sex){ // 类似以前在python里面的__init__方法。
this.name=name; // this，一个代表当前对象的伪变量，类似python的self
this.age=age;
this.sex=sex;
this.say=function(){
return "hello world";
}
}
var obj5 = new Humen("小红",27,false);
console.log(obj5);
// 4. 先有类，后有对象
class Person{ // Humen类名，相当于上面的函数名
constructor(name, age, sex) { // constructor，构造函数，相当于python的__init__方法
// js对象的初始化属性操作全部写在这里
this.name = name;
this.age = age;
this.sex = sex;
}
say(){ // js中的对象方法
return "hello world";
}
walk(){
return "我在走路";
}
desc(){
// 当前对象调用自身的方法或属性，直接使用this调用即可
return `我叫${this.name}，我今年${this.age}岁。`
}
}
// 基于类创建对象
obj6 = new Person("小兰", 18, false)
console.log(obj6)
// 对象的属性调用
console.log(obj6.name)
// 对象的方法调用
console.log(obj6.desc())
// 对象的属性可以更改
obj6.name = "李小兰"
console.log(obj6.desc())
</script>
</body>
</html>
（6）undefined类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// undefined表示未定义，在js中，变量为undefined的情况有2种：
// 1. 声明了一个变量，但是没有给变量进行赋值
var num;
console.log(num, typeof num); // undefined "undefined"
// 2. 对一个变量的值，明确定义为undefined
var data = undefined;
console.log(data, typeof data); // undefined "undefined" 这种情况往往用于删除var或let关键字声明的变量
// 3. 特殊情况，当如果一个变量出现时没有使用var或let关键字进行声明时，
// 此时如果通过delete关键字删除变量，则变量就会被删除掉。同时该变量的类型就会变成undefined
age = 16;
console.log(age, typeof age); // 16 "number"
delete age;
console.log(typeof age); // undefined
// console.log(age); // 此处报错，被delete删除的age，不能直接被使用了。
// 补充，delete是js用于提供给开发者删除属性或者成员的关键字
// delete可以删除对应的属性或者数组的成员
data = [1,2,3,4]
delete data[2]
console.log(data) // [1, 2, empty, 4] 被删除的成员为空
console.log(data[2], typeof data[2]); // undefined "undefined"
// js中的对象与json格式类似，但是与json不一样的时，json的属性必须是字符串，而js中的属性可以是任意类型的数据
var obj = {"name":"小明", "age": 16, 1:2}
console.log( obj, typeof obj)
console.log(obj[1]); // 当如果对象中存在字符串以外的属性，则获取当前属性可以通过中括号来提取，操作类似python的字典
delete obj.name
console.log(obj.name, typeof obj.name); // undefined "undefined"
// 换句话说，就是访问一个不存在的数组成员或者对象的属性时，值为undefined
console.log(obj.sex, typeof obj.sex); // undefined "undefined"
// 为什么delete不能删除var或者let声明的变量，但是可以删除不使用var或let声明的变量呢？
// money = 200; // 实际上，这个根本就不是在声明一个变量，而是声明了一个对象的属性
this.money = 200; // 上一句代码相当于当前这句代码
console.log(money); // 200
// 那么，这个this代表的对象是谁呢？
console.log(this);
// Window对象。叫浏览器窗口对象，
// 实际上我们在打开HTML网页时，由浏览器引擎会自动创建浏览器窗口页，那么管理这个窗口页的对象，就是window对象
console.log(window); // window是一个超全局对象，我们所编写的js代码实际上就是写给window的。
// 因此，我们声明的变量，实际上就是给window添加了一个属性
</script>
</body>
</html>
（7）null类型
- 空，相当于python的None，就是什么都没有。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 表示，什么都没有。
// 类似python里面的None
// 在js中，除了明确给一个变量赋值给null，才有null存在，用于变量的初始化
var v1 = null;
console.log(v1); // null
console.log(typeof v1) // object，typeof也无法查看null类型
</script>
</body>
</html>