首页 > 其他分享> > 小虎前端学习笔记-JS基础篇(二)

小虎前端学习笔记-JS基础篇(二)

2022-03-20 17:00:57 作者：互联网

数据类型

文章目录

数据类型简介
变量的数据类型
获取变量数据类型
数据类型转换

一、数据类型简介

在计算机中，不同的数据所占的存储空间不同，为了便于把数据分成所需内存大小的不同数据，充分利用存储空间，于是定义了不同的数据类型

二、变量的数据类型

1.简单数据类型：

String：字符串类型，字符串都必须带有引号
Number：数字型，包含整型值和浮点型值
Boolean：布尔值类型，如true、false，等价于1和0
Undefined：var a;声明变量a但不赋值，此时a = undefined
Null：var a = null;声明变量a为空值

2.复杂数据类型：

Object：

JS中的变量数据类型只有程序在运行的过程中根据等号右边的值才能确定

var num;//这的num无法确定其属于哪种数据类型
var num = 10;//这的num可以确定属于数字型
var str = "代码";//str属于字符串型

JS拥有动态类型，意味着相同的变量可作为不同的数据类型

var a = 6;//a为数字
var a = "six";//a为字符串

数字型 Number

数字型的进制：JS中八进制数字前加0，十六进制数字前加0x

//八进制 0-7 数字型类型数字前加0 表示八进制
var num1 = 010;//八进制的10转换为十进制的8
console.log(num1);//控制台输出结果为8
//十六进制 0-f 数字型类型数字前加0x 表示十六进制
var num2 = 0xA;//十六进制的A转换为十进制的10
console.log(num2);//控制台输出结果为10

数字型的范围：JS中数值有最大值和最小值

var num1 = Number.MAX_VALUE;
console.log(num1);//最大值为1.7976931348623157e+308
var num2 = Number.MIN_VALUE;
console.log(num2);//最小值为5e-324

数字型三个特殊值

Infinite：无穷大
-Infinite：无穷小
NaN：Not A Number 非数字

var num1 = Number.MAX_VALUE*2;
console.log(num1);//Infinity，表示无穷大，大于任何数值
var num2 = -Number.MAX_VALUE*2;
console.log(num2);//-Infinity，表示无穷小，小于任何数值
var num3 = "HELLO" - 10;
console.log(num3);//NaN：Not A Number，代表一个非数字

isNaN()用来判断一个变量是否为非数字的类型，并返回一个值，若是数字返回false，若不是数字返回true（可用来判断用户端输入的是否为数字）

console.log(isNaN(10));//false
console.log(isNaN(HELLO));//true

字符串型 String

字符串型可以是引号中的任意文本，语法为（“”）双引号或（‘’）单引号；鉴于HTML标签中的属性用的是双引号，故JS中推荐使用单引号

字符串引号嵌套：JS可以用单引号嵌套双引号或双引号嵌套单引号 （外双内单或内双外单）

var str1 = "你猜'我'是谁";//外双内单
var str2 = '你猜"我"是谁';//内双外单
console.log(str1);//你猜'我'是谁
console.log(str2);//你猜"我"是谁

字符串转义符：

转义符	解释说明
\n	换行符（n=newline）
\\	斜杠 \
\'	单引号
\"	双引号
\t	tab缩进
\b	空格（b=blank）

字符串长度：字符串是由若干个字符组成，这些字符的数量就是字符串的长度，通过字符串的length属性可获取整个字符串的长度

//检测获取字符串的长度 length属性
var str = "HELLO WORLD!";//空格也算是字符
console.log(str.length);//12个字符

字符串拼接：多个字符串之间可以使用 + 进行拼接，语法：字符串 + 任何类型拼接前会把字符串相加的任何数据类型转变成字符串，最后拼接成一个新的字符串

console.log("HELLO" + "WORLD");//字符串 + 字符串：HELLOWORLD
console.log("圆周率近似为" + 3.1415926);//字符串 + 数字：圆周率近似为3.1415926
console.log("It's" + " " + true);//字符串 + 布尔值：It's true
console.log("23" + "23");//数字字符串相加：2323
console.log(23 + 23);//数字 + 数字：46
console.log("23" + 23);//字符串 + 数字:2323
//总结：数值相加 字符相连

字符串拼接加强：

var age = 23;
console.log("我今年" + age + "岁");//我今年23岁
//变量不能写到字符串里面，要通过 + 和字符串相连的

eg：显示年龄案例

1、//弹出一个输入框，让用户输入年龄（用户输入）
var age = prompt("请输入您的年龄");
2、//把用户输入的年龄保存到变量age里，再将age变量与所要输出的字符串拼接（程序处理）
var str = "您的年龄为" + age + "岁";
3、//使用alert语句弹出警示框（输出结果）
alert(str);

布尔值 Boolean

布尔值型有两个值：ture 和 false 布尔值和数字型相加时，true的值为1，false的值为0

console.log(true + 1);//2
console.log(false + 1);//0

未定义数据 Undefined

一个变量声明而不予以赋值则会有一个默认值undefined——未定义数据类型

未定义数据类型与字符串相加

var a;未赋值变量a
console.log(a + "data");//未赋值变量a与字符串相加输出结果：undefineddata

未定义数据类型与数字相加

var a;
console.log(a + 1);//未赋值变量a与数字相加输出结果:NaN

未定义数据类型Undefined与布尔值相加

var a;
console.log(a + true);//未赋值变量a与布尔值相加输出结果:NaN

空值 Null

一个声明变量赋值null，该变量值为空值

空值与字符串相加

var space = null;
console.log(space + "null");//Null与字符串相加即相连：spacenull

空值与数字相加

var space = null;
console.log(space + 1);//Null与数字相加：1

空值与布尔值相加

var space = null;
console.log(space + true);//Null与布尔值相加：1

三、获取变量数据类型

typeof可用来获取检测变量的数据类型

var str = "HELLOWORLD";
console.log(typeof str);//string
var num = 23;
console.log(typeof num);//number
var result = true;
console.log(typeof result);//boolean
var vari = undefined;
console.log(typeof vari);//undefined
var space = null;
console.log(typeof space);//object

字面量：

字符串字面量
数字字面量
布尔字面量
未定义数据字面量
空值字面量

prompt取过来的值转换为字符串型

var age = prompt("请输入您的年龄");
console.log(age);//23
console.log(typeof age);//string （prompt取过来的值转换为字符串型）

控制台输出字体颜色判断输出的数据类型

黑色：字符串
紫色：数字
蓝色：布尔
浅灰色：未定义数据&空值

四、数据类型转换

转换为字符串型

语法	说明	例子
变量.toString( )	转换为字符串	var num = 1; alert(num.toString( ) );
String(变量 )	转换为字符串	var num = 1; alert(String(num) );
加号拼接字符串（隐式转换）	和字符串拼接的结果都是字符串	var num = 1; alert(num + " ");

转换为数字型

//parseInt(变量)将字符串转换为数字型 取整数
console.log(parseInt("3.1415926"));//3
console.log(parseInt("120px"));//120
console.log(parseInt("hello520"));//NaN
//parseFloat(变量)将字符串转换为数字型 取小数（浮点数）     
console.log(parseFloat("3.1415926"));//3.1415926
console.log(parseFloat("120px"));//120
console.log(parseFloat("hello520"));//NaN
//Number（变量）
var str = "1";
console.log(Number(str));//1
//隐式转换
console.log("12" - 0);//12
console.log("123" * 1);//123
console.log("1234" / 1);//1234

eg:计算年龄案例

var year = prompt("请输入出生年份");//弹出输入框（prompt），让用户输入年份（用户输入）
var age = 2022-year;//把用户输入的值用变量存储起来，再用今年的年份减去变量值得到年龄（程序处理）
                    //year取过来时为字符串型，但经过减法运算后自动转换为数字型（隐式转换）
alert("您今年已经" + age + "岁了");//弹出警示框（alert），显示输出结果（输出结果）

eg：简单加法器案例

var num1 = prompt("请输入第一个值");
var num2 = prompt("请输入第二个值");
var sum = parseInt(num1) + parseInt(num2);//两个值相加并赋予新的变量，注意变量数据类型转换
alert("和值为:" + sum);

转换为布尔型

语法	说明	例子
Boolean( )	其它类型转换成布尔值	Boolean("0")

零、空、否定的值都会被转换为false："0、NaN、null、undefined"

其余的值都转换成true

console.log(Boolean(""));//false
console.log(Boolean(" "));//true
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(undefined));//false
console.log(Boolean(null));//false
console.log(Boolean(12));//true
console.log(Boolean("HELLOWORLD"));//true

五、延拓

解释型语言&编译型语言

计算机不能直接理解任何除机器语言外的其它语言，所以必须要把程序所写的程序语言翻译成机器语言才能执行程序，程序语言翻译成机器语言的工具，称之为翻译器 翻译器翻译的方式有两种：编译和解释

编译器是在代码运行之前先进行编译，生成中间代码文件解释器是在代码运行时边运行边解释

标识符
关键字
保留字

标签：小虎,console,log,数据类型,笔记,JS,字符串,var,变量
来源： https://blog.csdn.net/zs875421/article/details/123604341