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