05-数据类型 - HelloWorld开发者社区

本节目标

掌握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个。
基本数据类型和引用数据类型有什么区别？