JavaScript 基础学习——第四节：数据类型
文章目录
- 1.学习目标
- 2.数据类型简介
- 3.简单数据类型
-
- 3.1变量的数据类型
- 3.2数字型
-
- 3.2.1 八进制
- 3.2.2 十六进制
- 3.3 数字型范围
-
- 3.3.1 JavaScript中数值的最大和最小值
-
- 3.3.1.1 JavaScript中数值的最大值
- 3.3.1.2JavaScript中数值的最小值
- 3.4 数字型三个特殊值
- 3.5 isNaN() 方法
- 3.6 字符串型
-
- 3.2.1 字符串引号嵌套
- 3.2.2 字符串转义符
- 案例练习：弹出网页警示框
- 3.2.3 字符串长度
- 3.2.4 字符串的拼接
- 案例：显示年龄
- 3.7 布尔型
-
- 3.7.1 Underfined和Null
- 4.获取变量数据类型
-
- 4.1 通过 typeof 关键字检测数据类型
- 4.2 字面量
-
- 4.2.1 注意：
- 5.数据类型转换
-
- 5.1 为什么需要类型转换？
- 5.2 转换的方式
-
- 5.2.1 转换为字符串
- 5.2.2 转换为数字型（重点）
- 5.2.3 转换为布尔型
- 5.3 隐式转换
- 5.4 显式转换
-
-
- 5.4.1 Number
-
- 案例1：计算年龄
- 案例2：简单加法器
-
-
-
- 案例分析：
- 代码如下：
-
-
1.学习目标
- 能够说出5种简单数据类型
- 能够使用typeof获取变量的类型
- 能够说出1~2种转换为数值型的方法
- 能够说出1~2种转换为字符型的方法
- 能够说出什么是隐式转换
2.数据类型简介
计算机世界中的万事成物都是数据。
计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型.为什么要给数据分类？
- 更加充分和高效的利用内存
- 也更加方便程序员的使用数据
3.简单数据类型
JS 数据类型整体分为两大类：
基本数据类型
引用数据类型
3.1变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型:
3.2数字型
var num=10;//num数字型
var PI=3.14;//PI数字型
3.2.1 八进制
var num1=010；
console.log(num1);// 010 八进制 转换为 10进制 就是8
- 八进制 0 ~7 我们程序里面数字前面加0,表示八进制
3.2.2 十六进制
var num2=0x9；
console.log(num2);// 0x9
- 十六进制 范围：0~ 9以及 a ~ f #f f f f f f 数字的前面加 0x 表示十六进制
3.3 数字型范围
3.3.1 JavaScript中数值的最大和最小值
3.3.1.1 JavaScript中数值的最大值
<script>
console.log(Number.MAX_VALUE);
script>
运行的结果：
3.3.1.2JavaScript中数值的最小值
<script>
console.log(Number.MIN_VALUE);
script>
运行的结果：
3.4 数字型三个特殊值
<script>
console.log(Number.MIN_VALUE*2);//-Infinity 无穷小
script>
<script>
console.log(Number.MAX_VALUE*2);//Infinity 无穷大
script>
<script>
console.log('小明'-100);//NaN
script>
3.5 isNaN() 方法
这个方法用来判断非数字,―并且返回一个值,如果是数字返回的是 false 如果不是数字返回的是true
<script>
// isNaN();这个方法用来判断非数字,―并且返回一个值,如果是数字返回的是 false 如果不是数字返回的是true
console.log(isNaN(20));//false
console.log(isNaN('小明'));//ture
script>
3.6 字符串型
通过单引号（ ’ '） 、双引号（ " "）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，
推荐使用单引号。
注意事项：
- 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
- 必要时可以使用转义符 \，输出单引号或双引号
3.2.1 字符串引号嵌套
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)
3.2.2 字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是\开头的，常用的转义符及其说明如下:
案例练习：弹出网页警示框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
alert('酷热难耐，火辣的太阳底下，我挺拔的身姿,成为了最为独特的风景。\n我审视四周,这里是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声:"收破烂啦~"');
script>
head>
<body>
body>
html>
3.2.3 字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
<script>
var str='hucao d d d ';
console.log(str.length);
script>
3.2.4 字符串的拼接
多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
+号总结口诀:数值相加，字符相连
案例：显示年龄
弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年x岁啦”（xx表示刚才输入的年龄)
案例分析：
这是利用S编写的一个非常简单的交互效果程序。
那么，我们以表白为案例吧！
交互编程的三个基本要素:
1．你喜欢我吗?→这是用户输入
2．女孩想了想→这是程序内部处理
3. 最后说答应一这是输出结果
那么在程序中要如何实现呢?
- 弹出一个输入框（ prompt)，让用户输入年龄（用户输入)
- 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接（程序内部处理)
- 使用alert语句弹出警示框(输出结果)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
var age =prompt('请输入您的年龄');
var str ='您今年已经'+age+'岁了';
alert(str);
script>
head>
<body>
body>
html>
3.7 布尔型
布尔类型有两个值: true和false ，其中 true表示真(对)，而false表示假（错)。
布尔型和数字型相加的时候，true的值为1 ，false的值为0。
3.7.1 Underfined和Null
- 一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)
- 一个声明变量给null值，里面存的值为空（学习对象时，我们继续研究null)
4.获取变量数据类型
- typeof 可用来获取检测变量的数据类型
控制台输出语句：
运行结果：
- 控制台语句经常用于测试结果来使用。
- 可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色
4.1 通过 typeof 关键字检测数据类型
4.2 字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
- 数字字面量:8,9,10
- 字符串字面量:‘黑马程序员’;“大前端”
- 布尔字面量: true , false
4.2.1 注意：
- 控制台语句经常用于测试结果来使用。
- 可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色
5.数据类型转换
5.1 为什么需要类型转换？
JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
注意： 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。此时需要转换变量的数据类型。
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。
5.2 转换的方式
我们通常会实现3种方式的转换∶
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
5.2.1 转换为字符串
运行结果：
- toString0和String()使用方式不一样。
- 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。
5.2.2 转换为数字型（重点）
运行结果：
- 注意parseInt和 parseFloat单词的大小写，这2个是重点
理解弱类型语言的特征，掌握显式类型转换的方法
在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。
5.2.3 转换为布尔型
● 代表空、否定的值会被转换为false ,如"、0、NaN、null、undefined”
● 其余值都会被转换为true
5.3 隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换title>
head>
<body>
<script>
let num = 13; // 数值
let num2 = '2'; // 字符串
// 结果为 132
// 原因是将数值 num 转换成了字符串，相当于 '13'
// 然后 + 将两个字符串拼接到了一起
console.log(num + num2);
// 结果为 11
// 原因是将字符串 num2 转换成了数值，相当于 2
// 然后数值 13 减去 数值 2
console.log(num - num2);
let a = prompt('请输入一个数字');
let b = prompt('请再输入一个数字');
alert(a + b);
script>
body>
html>
注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。
补充介绍模板字符串的拼接的使用
5.4 显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
5.4.1 Number
通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换title>
head>
<body>
<script>
let t = '12';
let f = 8;
// 显式将字符串 12 转换成数值 12
t = Number(t);
// 检测转换后的类型
// console.log(typeof t);
console.log(t + f); // 结果为 20
// 并不是所有的值都可以被转成数值类型
let str = 'hello';
// 将 hello 转成数值是不现实的，当无法转换成
// 数值时，得到的结果为 NaN （Not a Number）
console.log(Number(str));
script>
body>
html>
案例1：计算年龄
此案例要求在页面中弹出一个输入框，我们输入出生年份后，能计算出我们的年龄。
- 弹出一个输入框( prompt)，让用户输入出生年份（用户输入）
- 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理)
- 弹出警示框( alert),把计算的结果输出（输出结果)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
var year = prompt("请输入您的出生年份");
var age = 2018 - year;
alert('您今年已经' + age + '岁了');
script>
head>
<body>
body>
html>
案例2：简单加法器
计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。
案例分析：
- 先弹出第一个输入框，提示用户输入第一个值保存起来
- 再弹出第二个框，提示用户输入第二个值保存起来
- 把这两个值相加，并将结果赋给新的变量(注意数据类型转换)
- 弹出警示框( alert)，把计算的结果输出（输出结果)
代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
var num1=prompt('请您输入第一个值:');
var num2=prompt('请您输入第二个值:');
var result =parseFloat(num1)+parseFloat(num2);
alert('您的结果是:'+result);
script>
head>
<body>
body>
html>