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

晴空闲云
• 阅读 1507

本节目标

  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. 基本数据类型和引用数据类型有什么区别?
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
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:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
3年前
javascript实践教程-02-javascript入门
本节目标1.掌握如何编写javascript代码。2.掌握javascript的3个弹框。3.掌握javascript的注释。4.掌握浏览器的调试工具控制台。内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。script标签如果我们需要在网页中编写
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
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
3年前
面试官:JavaScript的数据类型你了解多少?
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型:概念检测方法转换方法概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Ob
LinMeng LinMeng
3年前
js之传值与传址/undefined和null/严格模式
传值与传址基本数据类型有五种Undefined、Null、Boolean、Number和String引用数据类型有两种object,array,fn两种数据类型的区别:1.存储位置不同原始数据类型直接存储在栈(stack)中简单数据段,占据空间小,大小固定,属于被频繁使用的数据,所以存储在栈中;引用数据类型直接存
劳伦斯 劳伦斯
3年前
前端面试题自检 JS CSS 部分
JS类型JavaScript的简单数据类型Number,String,Boolean,Undefined,Null,Symboltypeof操作符的返回值numberstringbooleanundefinedobjectfunction
Stella981 Stella981
3年前
JavaScript的深拷贝和浅拷贝
一、数据类型数据分为基本数据类型(String,Number,Boolean,Null,Undefined,Symbol)和对象数据类型。、1.基本数据类型的特点:直接存储在栈(stack)中的数据2.引用数据类型的特点:存储的是该对象在栈中引用,真实的数据放在堆内存里。引用数据类型在栈中存储了指针,该指针指向堆中该实
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
晴空闲云
晴空闲云
Lv1
男 · 软件工程师
专注计算机科学,阅读、思考、写作。
文章
26
粉丝
8
获赞
35