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

晴空闲云
• 阅读 969

本节目标

  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. 基本数据类型和引用数据类型有什么区别?
点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。 1、使用解构获取json数据let jsonData   id: 1, status: "OK", data: ['a', 'b'] ; let  id, status, data: number   jsonData; console.log(id, status, number )
Jacquelyn38 Jacquelyn38
1年前
面试官:JavaScript的数据类型你了解多少?
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型: 概念 检测方法 转换方法 概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Ob
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
LinMeng LinMeng
1年前
js之传值与传址/undefined和null/严格模式
传值与传址 基本数据类型有五种Undefined、Null、Boolean、Number和String 引用数据类型有两种object,array,fn 两种数据类型的区别: 1. 存储位置不同 原始数据类型直接存储在栈(stack)中简单数据段,占据空间小,大小固定,属于被频繁使用的数据,所以存储在栈中; 引用数据类型直接存
晴空闲云 晴空闲云
1年前
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写
晴空闲云 晴空闲云
1年前
javascript实践教程-03-变量
本节目标1. 掌握声明变量的方式。2. 掌握var和let的区别。 内容摘要本篇讲解了变量声明的两种方式var和let,并对比var和let声明变量的差别,最后对变量名名称规则进行了总结。阅读时间1015分钟 变量基础js中声明变量可以使用var和let关键词。其中var是es5的语法,let是es6的语法。 var声明变量var可以用来声明局部变量和全局变
Karen110 Karen110
1年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:Thu Feb 02 2019 09:59:51 GMT+0800 (中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。 1\. 显示日期使用
Stella981 Stella981
11个月前
Android So动态加载 优雅实现与原理分析
> 背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载. ![](https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png) 点击上方“蓝字”关注我
Wesley13 Wesley13
11个月前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序 select * from table_name order id desc; 2.按照指定(多个)字段排序 select * from table_name order id desc,status desc; 3.按照指定字段和规则排序 selec
helloworld_34035044 helloworld_34035044
2个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为
晴空闲云
晴空闲云
Lv1
教师
专注前端,把复杂的编程讲简单,又不失深度。@公众号:晴空闲云
26
文章
3
粉丝
2
获赞