本节目标
- 掌握js中7种数据类型。
- 掌握5种基本数据类型number、string、boolean、null、undefined的声明。
- 掌握js中数组的声明和数组相关的方法。
- 掌握js中对象的声明和属性、方法的使用。
内容摘要
本篇介绍了js中的7种数据类型，其中5种基本数据类型：number、string、boolean、null、undefined，2种引用类型：array和object。
阅读时间30~40分钟。
数据类型
前面我们学习了变量和常量。其中有这样的代码：
let x = 1;
这边变量x等于1，1是一个整数，如果我们需要存储用户的姓名、需要存储金钱、需要存储若干商品数据等等，我们就需要用到其他数据类型。
在js中数据类型包含如下几种：
基本数据类型（值类型）
1. number（数字）
2. string（字符串）
3. boolean（布尔值）
4. null（空）
5. undefined（未定义）
引用数据类型
1. array（数组）
2. object（对象）
下面依次讲解各个数据类型。
number（数字）
和java不同，js中数字就包含整数和浮点数。
示例1，声明若干个数字：
let i = 10;
let f = 1.101;
let x = -5;
在js中可以使用typeof查看数据类型：
console.log(typeof i); // 输出number
console.log(typeof f); // 输出number
console.log(typeof x); // 输出number
string（字符串）
如果说我们要表示一个人的姓名、一句话，我们可以用字符串类型。js中的字符串可以用双引号 " 包裹，也可以用单引号 ’ 包裹。
示例1，声明若干字符串：
let str = "js is useful.";
console.log(str);
console.log(typeof str); // string
let name = "晴空闲云";
console.log(name);
console.log(typeof name); // string
boolean（布尔值）
如果要表示一个事物是否怎么样的时候，比如说：
1. 是否完成？
2. 是否理解？
3. 是否出现错误？
4. 浏览量是否超过上万？
5. 粉丝数是否上万？
6. 等等
在这个场景下，我们可以用布尔值来表示，js中的布尔值就两个：
1. true
2. false
其中：
true表示为真，中文可以理解为是，英文可以理解为yes。
false表示为假，中文可以理解为否，英文可以理解为no。
示例1，声明若干布尔值：
let isOK = true;
console.log(isOK);
console.log(typeof isOK); // boolean
let isFinish = false;
console.log(isFinish);
console.log(typeof isFinish); // boolean
null（空值）
null在很多语言都有相应语法，比如php、数据库、java等等，表示为空的意思。
示例1，声明几个变量：
let n = null;
console.log(n); // null
console.log(typeof n); // object ?
思考：
这边如果用 typeof 查看null的类型，为什么是object呢？
解答：
大家还记的第一章的时候说过javascript用10天就开发出来了吗？对，就是早期的系统的一个bug。
undefined（未定义）
js中如果直接使用一个没有定义的变量，那么该变量就是 undefined 的。
示例1，打印一个未定义的变量：
let i;
console.log(i); // undefined
console.log(typeof i); // undefined
我们有可以直接给变量声明为 undefined，不过这个一般没有什么意义。
let j = undefined;
console.log(j); // undefined
console.log(typeof j); // undefined
array（数组）
数组就是用来存储一堆数据的数据类型，数组的两个基本要素：
1. 元素，数组中的数据，和java不同，js中的数组可以存储任意类型的数据。
2. 下标，用来记录每个元素的位置，用来取值和赋值。
网上有三要素的说法，还有一个要素是：长度，就是指数组内元素的个数，因为这个长度根据元素变化，所以叫做要素有点牵强。
数组定义
在js中，数组可以用[]和new Array()进行声明：
// []方式
let 数组名 = [元素1, 元素2, 元素3, ...];
// new Array()方式
let 数组名 = new Array(元素1, 元素2, 元素3, ...);
示例1，用两种方法声明一个数组存储任意数据：
let arr = [1, 'hello', true, null, undefined];
console.log(arr); // (5) [1, 'hello', true, null, undefined]
console.log(typeof arr); // object
let arr2 = new Array("tom", "", 0, 10, {});
console.log(arr2); // (5) [1, 'hello', true, null, undefined]
console.log(typeof arr2); // object
在js中，数组的归属是对象object。
思考：，参考如下代码，请问数组的长度是多少？
let arr = [5];
console.log(arr); // 数组长度是？
let arr2 = new Array(5);
console.log(arr2); // 数组长度是？
通过这个思考题可以发现，new Array()和[]的区别，实务中一般用[]的多。
上面只是对数组做一个简单示例，虽然js数组中可以存储不同类型的数据，只是在实务中，一般数组都是存储有规则的一堆数据。
示例2，声明一个数组存储蔬菜：
let vegetables = ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "佛手瓜"];
console.log(vegetables); // (6) ['西蓝花', '西红柿', '洋葱', '秋葵', '丝瓜', '佛手瓜']
console.log(typeof vegetables); // object
数组既然包含了多个元素，那么必然要能实现增加、删除、修改、查询操作，下面我们对数组的增删改查做一个讲解。
增删改查
1）增加元素
增加元素是使用数组对象的push方法，会将新增加的元素加到数组末尾。
let vegetables = ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "佛手瓜"];
vegetables.push("南瓜"); // 增加元素到数组末尾
console.log(vegetables); // (7) ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "佛手瓜", "南瓜"]
2）删除元素
删除元素是使用数组对象的splice方法，指定下标进行删除。
let vegetables = ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "佛手瓜"];
vegetables.splice(1, 1); // 从第几个开始删除几个元素
console.log(vegetables); // (5) ["西蓝花", "洋葱", "秋葵", "丝瓜", "南瓜"]
3）修改元素
修改元素直接用下标索引，重新赋值即可。
let vegetables = ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "佛手瓜"];
vegetables[5] = "南瓜";
console.log(vegetables); // (6) ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "南瓜"]
4）查询元素
直接用下标即可查询元素：
let vegetables = ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "佛手瓜"];
console.log(vegetables[1]); // 输出?
通过for循环遍历元素：
let vegetables = ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "佛手瓜"];
for (let i in vegetables) {
console.log(i + ": " + vegetables[i]);
}
遍历元素后面我们讲解循环的时候，会再细讲。
数组长度
通过length属性，可以获取到数组的长度。
let vegetables = ["西蓝花", "西红柿", "洋葱", "秋葵", "丝瓜", "佛手瓜"];
console.log(vegetables.length); // 输出？
二维数组
如果数组中还有数组，我们称呼为二维数组。
示例1，声明一个数组存储不同类型的蔬菜：
let vegetables = [
["西蓝花", "黄花菜", "菜花", "韭菜花"],
["西红柿", "洋葱", "秋葵"],
["丝瓜", "佛手瓜", "南瓜", "冬瓜", "黄瓜"],
];
二维数组的增删改查和一维数组类似，通过下标即可索引，我们看几个简单的示例，就不再赘述。
console.log(vegetables[0]); // 输出？
console.log(vegetables[1][2]); // 输出？
vegetables[2][1] = "苦瓜";
object（对象）
js中对象是一组属性与方法的集合，这里说的对象和后面要讲解的面向对象不一样，这边说的对象是一个数据类型，面向对象是一种编程思想。
声明对象
js中声明对象有两种方式：
// 1. new Object();
// 2. {}
示例1，使用new Object()和{}各声明一个对象。
1）使用new Object()声明人物：id为1，name为李逍遥，description为仙剑1主角。
let human = new Object();
human.id = 1;
human.name = "李逍遥";
human.description = "仙剑1主角";
console.log(human); // {id: 1, name: '李逍遥', description: '仙剑1主角'}
2）使用{}声明人物：id为2，name为赵灵儿，description为仙剑1女主。
let human2 = {id: 2, name: '赵灵儿', description: '仙剑1女主'};
console.log(human2); // {id: 2, name: '赵灵儿', description: '仙剑1女主'}
这个例子我们是给对象增加了一些属性，当然我们也可以给对象增加一些方法。
示例2，接上例，我们给对象增加一些方法。
1）给李逍遥增加打怪的方法：
human.attack = function() {
console.log(this.name + "使用万剑诀");
}
2）给赵灵儿增加回血的方法：
human2.addHP = function() {
console.log(this.name + "使用五气朝元，全体回血");
}
这边我们还没有讲解过方法，只要知道对象可以有属性，也可以有方法即可。
调用对象属性和方法
对象声明了之后，其中的属性和方法可以直接调用。
示例3，接上例，我们调用对象的属性和方法。
1）打印出李逍遥的描述，李逍遥发起攻击：
console.log(human.description);
human.attack(); // 李逍遥使用万剑诀
2）打印出赵灵儿的描述，赵灵儿发动回血技能：
console.log(human2.description);
human.addHP(); // 赵灵儿使用五气朝元，全体回血
遍历对象属性和方法
除了数组可以遍历，js中的对象也可以遍历，遍历也可以用for in语法。
在遍历之前，我们有一个知识点需要提一下，js中获取对象属性，可以通过点.符号获取，也可以和数组一样通过下标获取。
示例4，接上例，打印human的姓名：
console.log(human['name']); // 李逍遥
js就是这么神奇，玩出了其它语言没有的花样，知道这个之后，我们用for in进行遍历。
示例5，接上例，遍历human：
for (let i in human) {
console.log(i + ": " + human[i]);
}
其中：
i是属性。
human[i]就是对应的值。
这边对象我们更多的是知道有这个类型，在后续面向对象的章节中，我们将进行更加详细的介绍。
本节总结
- js中有7种数据类型：5种基本类型，2种引用类型。
- 5种基本类型：number、string、boolean、null、undefined。
- 2种引用类型：array、object。
练习题
- js中整数最小值、最大值分别是多少？为什么呢？
- 字符串类型是对象吗？如果是对象，有哪些属性和方法？
- 声明相关的布尔值，表示今天是否下雨、是否适合出游等。
- 我们typeof null是object，这个bug是怎么产生的，请查阅相关资料，并说明。
- null和undefined有什么区别？
- 声明数组，并存储若干水果，计算其长度，并遍历打印输出。
- 遍历数组的时间复杂度是多少？遍历二维数组呢？
- 请选择一款你喜欢的游戏，尝试声明游戏里的事物，如人物、道具等等，至少5个。
- 基本数据类型和引用数据类型有什么区别？
