javascript实践教程-05-数据类型

晴空闲云 等级 609 0 0

本节目标

  1. 掌握js中7种数据类型。
  2. 掌握5种基本数据类型number、string、boolean、null、undefined的声明。
  3. 掌握js中数组的声明和数组相关的方法。
  4. 掌握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]就是对应的值。

这边对象我们更多的是知道有这个类型,在后续面向对象的章节中,我们将进行更加详细的介绍。

本节总结

  1. js中有7种数据类型:5种基本类型,2种引用类型。
  2. 5种基本类型:number、string、boolean、null、undefined。
  3. 2种引用类型:array、object。

练习题

  1. js中整数最小值、最大值分别是多少?为什么呢?
  2. 字符串类型是对象吗?如果是对象,有哪些属性和方法?
  3. 声明相关的布尔值,表示今天是否下雨、是否适合出游等。
  4. 我们typeof null是object,这个bug是怎么产生的,请查阅相关资料,并说明。
  5. null和undefined有什么区别?
  6. 声明数组,并存储若干水果,计算其长度,并遍历打印输出。
  7. 遍历数组的时间复杂度是多少?遍历二维数组呢?
  8. 请选择一款你喜欢的游戏,尝试声明游戏里的事物,如人物、道具等等,至少5个。
  9. 基本数据类型和引用数据类型有什么区别?
收藏
评论区

相关推荐

js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写
JS 折线图
JS 折线图  echarts 折线图。需要引入:echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8" type="text/javascript"></script> JS调用后台方法,得到数据 Map<String, Obj
JSON学习笔记(二、语法)
#### JSON和js关系 欲学JSON先学js,那么JSON和js的关系是什么样的呢? .JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。 .JSON 语法是 JavaScript 语法的子集 #### 基本语法 .数据在名称/值对中 .数据由逗号分隔 .大括号保存对象 .中括号保
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
JS的常用属性
JS-------定义:基于事件和对象驱动,并具有安全性能的脚本语言。 引入:<script  type=”text/javascript”>具体js代码</script> <script  type=”text/javascript” src=”js文件”></script> 大小写敏感:例如:A与a是两个不同的东东 注释://  单
java中ajax的用法简单案例
1.index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-2.1.0.js">
D3.js selectAll()函数与enter()函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="d3.v3.js"></script> </head> <body>
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/gallery.js"></script>    二、Html结构 <div id="wrapper"> <div id="mai
JQValidate使用说明
JQuery Validate使用总结: 一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则
JQuery
一、jq简介 jq其实就是js的一个文件。 二、jq书写步骤 1、先引入jq文件(min的文件) <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script> 2、换新的一行写js代码 <script type="text/javascri
JavaScript prototype原型用法
JavaScript对象原型 -------------- 所有JavaScript对象都从原型继承属性和方法。 <!DOCTYPE html> <html> <meta charset="utf-8"> <title>js</title> <body> <h2>JavaScript 对象</h2
Javascript基础知识学习(三)
**前言:** javascript是一种轻量的、动态的脚本语言,我们为什么要使用javascript ?对于一个网页的设计,.html用来放置网页的内容,.css则用来设计网页的样式和布局,那么.js它主要是使网页能够产生交互,意思就是能够通过代码动态的修改HTML、操作CSS、响应事件、获取用户计算机的相关信息等。javascript不是所有的浏览器
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"