JavaScript学习笔记3—数据类型和运算符

最新推荐文章于 2024-05-17 13:52:13 发布

云卷云舒_jing

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量485

点赞数

分类专栏： JavaScript笔记文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/qq_45709187/article/details/125125154

版权

JavaScript笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、数据类型

1.变量的数据类型

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

//js中的数据类型是根据等号右边的值来判断的
var str='helloworld';//字符串型
var num=10;//数字型

var x=10;//数字型
x='good';//字符串型

2.数据类型的分类

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

3.数字型（数值型） Number

JavaScript 数字型既可以用来保存整数值，也可以保存小数(浮点数）。

var num=10;
var PI=3.14;

3.1数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

在数字前面加0表示八进制，0~7
在数字前加0x表示十六进制，0~9以及A~F

//八进制：在数字前面加0表示八进制
var num1=010;
console.log(num1);//010八进制转换为十进制是8
var num2=012;
console.log(num2);

//十六进制 在数字前加0x
var num3=0x9;
console.log(num3);
var num4=0xa;
console.log(num4);

3.2数字型范围

JavaScript中数值的最大和最小值

最大值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

//数字类型最大值和最小值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

3.3 数字型三个特殊值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

console.log(Number.MAX_VALUE*2);//无穷大
console.log(Number.MIN_VALUE*2); //无穷小

3.4非数字类型isNaN()

isNaN()用来判断一个变量是否为非数字的类型，x是非数字类型。

isNaN(x)中x是数字，返回false
isNaN(x)中x不是数字，返回true

console.log(isNaN(12));//false
console.log(isNaN('HELLO'));//true

4.字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号''。

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

4.1字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

//引号嵌套
var str1='他是一个"优秀"的学生';//他是一个"优秀"的学生
var str2="他是一个'优秀'的学生";//他是一个'优秀'的学生
console.log(str1);
console.log(str2);

4.2字符串转义符

转义符都是 \ 开头的，常用的转义符及其说明如下：

\n：换行符，n 是 newline 的意思
\ \：斜杠 \
\'：”双引号
\"：”双引号
\t：tab 缩进
\b：空格，b 是 blank 的意思

// 转义符
var str3='窗前明月光\n疑是地上霜';
console.log(str3);

4.3字符串长度

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

//字符串长度
var str4='i am a student';
console.log(str4.length);//14

4.4字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串。
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串。
‘+’号总结口诀：数值相加，字符相连
我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值。
变量是不能添加引号的，因为加引号的变量会变成字符串。

//字符串拼接，只要有字符串和其他的拼接，最后就是字符型的
console.log('坚持'+'不懈');//坚持不懈
console.log('年方'+18);//年方18
console.log(12+12);//24
console.log('12'+12);//1212
console.log('她今年年方'+18+'岁');//她今年年方18岁

var age=18;
console.log('她今年年方'+age+'岁');//她今年年方18岁
console.log('age');//age  变量age加引号视为字符串


//无论什么和字符串相加，最后都会变成字符串
var variable=undefined;
console.log(variable+'HELLO');//undefinedHELLO   
//undefined和数字相加，最后的结果是NaN
console.log(variable+1);//NaN   

//null空值和字符串相加，最后也会变成字符串
var space=null;
console.log(space+'HELLO');//nullHELLO
//空值与数字的时候看作数字0
console.log(space+1);//1

4.5案例

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<script>
			var age=prompt('请输入您的年龄：');
			var str='您的年龄是'+age+'岁';
			alert(str);
		</script>
	</head>
	<body>
	</body>
</html>

5.布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

var flag1=true;
var flag2=false;
console.log(flag1);//true
console.log(flag2);//false
console.log(flag1+1);//2  true参与运算当1看
console.log(flag2+1);//1  false参与运算当0看

6.Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 注意相连或相加结果）
一个声明变量给 null 值，里面存的值为空

// Undefined 和 Null
//变量不赋值，值的类型是undefined
var str1;
console.log(str1);//undefined
var str2=null;
console.log(space);//undefined


//无论什么和字符串相加，最后都会变成字符串
//1.undefined和字符串相加，变字符串
var variable=undefined;
console.log(variable);//undefined
console.log(variable+'HELLO');//undefinedHELLO   

//2.null和字符串相加，最后也会变成字符串
var space=null;
console.log(space);//null
console.log(space+'HELLO');//nullHELLO

//3.undefined和数字相加，最后的结果是NaN
console.log(variable+1);//NaN   

//4.null与数字相加时,null看作数字0
console.log(space+1);//1

7.检测数据类型

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

prompt输入是内容是字符串类型的

//检测数据类型
var num=10;
console.log(typeof num);//number
var str='hello';
console.log(typeof str);//string
var flag=true;
console.log(typeof flag);//boolean
var vari=undefined;
console.log(typeof vari);//undefined
var empty=null;
console.log(typeof empty);//object

//prompt输入是内容是字符串类型的
var age=prompt('输入年龄：');//输入18
console.log(age);//18
console.log(typeof age);//string

8.数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

8.1转换为字符串

三种转换方式：

toString()
String()
加号拼接字符串（隐式转换）

//转换为字符串型
//1.数字型转换为字符串型
var num =10;
var str=num.toString();
console.log(str);//10
console.log(typeof str);//string
//2.利用String(变量)
console.log(String(num));//10
//3.利用拼接字符串方法
console.log(num+'');//10

8.2转换为数字型

parseInt(变量)可以把字符型转换为数字型，得到是整数
parseFloat(变量)可以把字符型转化为数字型，得到是小数浮点数
利用Number(变量)强制准换
利用算数运算 - * / 隐式转换，算数运算的时候，自动转换了数据类型

//转换为数字型
//1.parseInt(变量)可以把字符型转换为数字型，得到是整数
var age= prompt('输入年龄');
console.log(typeof age);//string
var num1=parseInt(age);
console.log(num1);//10
console.log(typeof num1);//number
console.log(parseInt('3.14'));//3取整  里面是字符型，所以加引号
console.log(parseInt('120px'));//120 去单位
console.log(parseFloat('rem120px'));//NaN 首字符不是数字无法转换

// 2.parseFloat(变量)可以把字符型转化为数字型，得到是小数 浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px'));//120
console.log(parseFloat('rem120px'));//NaN 必须以数字开头，否则无法转换

// 3.利用Number(变量)
var str='123';
console.log(Number(str));//123
console.log(Number('12'));//12

//4.利用算数运算 - * / 隐式转换
console.log('12'-0);//12
console.log('123'-'120');//3
console.log('123'*1);//123

8.3案例

例子1：用户输入出生年份，浏览器alert把年龄输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算年龄案例</title>
		<script>
			//用户输入出生年份，浏览器输出年龄
			var year=prompt('您是哪一年出生的？');
			var age=2022-year;//year取过来是字符串型，但是有减号（隐式转换）成数值型		
			alert('您的年龄是'+age+'岁');
		</script>
	</head>
	<body>
	</body>
</html>

例子2：用户输入值1后，弹窗并继续输入值2，最后通过弹窗显示两值相加的结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例：两数相加</title>
		<script>
			//用户输入两个数，浏览器输出相加的结果
			var num1=prompt('请输入一个数字：');
			var num2=prompt('再输入一个数字：');
			var result=parseFloat(num1)+parseFloat(num2);
			alert('相加结果是：'+result);
		</script>
	</head>
	<body>
	</body>
</html>

9.转换为布尔型

Boolean()函数转换
代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
其余值都会被转换为 true

console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false

console.log(Boolean(1));//true
console.log(Boolean('你好'));//true
console.log(Boolean('123'));//true

10案例

依次获取用户的姓名、年龄、性别，并打印用户信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var userName=prompt('请输入您的姓名');
			var age=prompt('请输入您的年龄');
			var sex=prompt('请输入您的性别');
			alert('您的姓名是：'+ userName+'\n'+'您的年龄是：'+age+'岁'+'\n'+'您的性别是：'+sex);
		</script>
	</head>
	<body>
	</body>
</html>

二、运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

1.算术运算符

1.1算术运算符概述

算术运算使用的符号，用于执行两个变量或值的算术运算。

加+
减-
乘*
除/
余%

// 加减乘除
console.log(1+1);//2
console.log(1-1);//0
console.log(1*1);//1
console.log(1/1);//1

//%取余
console.log(4%2);//0
console.log(5%3);//2
console.log(3%5);//3

1.2浮点数的精度问题

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

所以：不要直接判断两个浮点数是否相等 !

// 浮点数  精度有误差
console.log(0.1+0.2);//0.30000000000000004
console.log(0.07*100);//7.000000000000001
// 不能直接拿浮点数来进行相比较是否相等
var num =0.1+0.2;
console.log(num==0.3);//false

1.3表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合。

简单理解：是由数字、运算符、变量等组成的式子。

表达式最终都会有一个结果，返回给我们，成为返回值。

2.递增和递减运算符

2.1递增和递减运算符概述

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。

在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

2.2前置递增运算符

++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。

使用口诀：先自加，后返回值

// 前置递增运算符
var age1=10;
++age1;
console.log(age1);//11
var x=10;
console.log(++x + 10);//21

2.3后置递增运算符

num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。

使用口诀：先返回原值，后自加

//后置运算符
var age2=10;
age2++;
console.log(age2);//11
var y=10;
console.log(y++ + 10);//20

3.比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

符号：> < >= <= == != === !==

//比较运算符
console.log(3>=5);//false
console.log(3==5);//false
// ==判断 数值相等即可
console.log(10==10);//true
console.log(10=='10');//true  默认转换数据类型，会把字符串型自动转换为数字型
console.log(20!='20');//false
// ===全等，除了数值，数据类型也要一致
console.log(18===18);//true
console.log(18==='18');//false

4.逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

4.1与或非

逻辑与&&：两边都是 true才返回 true，否则返回 false
逻辑或 ||：两边都为 false 才返回 false，否则都为true
逻辑非！：逻辑非（!）也叫作取反符，如 true 的相反值是 false

// 逻辑运算符
//逻辑与&&，两个都是true，结果才是true
console.log(3>5 && 3>2);//false
console.log(3<5 && 3>2);//true
//逻辑或|| 两侧都为false，结果才是false
console.log(3>5 || 3>2);//true
console.log(3>5 || 3<2);//false
//逻辑非!
console.log(!true);//false

4.2短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

①逻辑与

语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

//短路运算
//逻辑与短路运算，如果表达式1为真，则返回表达式2，如果表达式1位假，则返回表达式1
// 0  ''  null  undefined  NaN都是假
console.log(123 && 456);//456
console.log(0 && 456);//0
console.log(0 && 456 && 789);//0

②逻辑或

语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2


// 逻辑或短路运算
// 如果表达式1为真，则返回表达式1，如果表达式1为假，则返回表达式2
console.log(123||456);//123
console.log(0||456);//456
console.log(0||456||789);//456
var number=0;
console.log(123||number++);//123
console.log(number);//0

5.赋值运算符

概念：用来把数据赋值给变量的运算符。

//赋值运算符
var num1=10;
num1 += 2;//即为num1=num1+2;
num1 -= 2;//即为num1=num1-2;
num1 *= 2;//即为num1=num1*2;

6.运算符优先级

优先级从高到低排序：

（1）小括号

（2）一元运算符：++ -- ！

（3）算数运算符：先* / %后+ -

（4）关系运算符：> >= < <=

（5）相等运算符：== !== === !==

（6）逻辑运算符：先&&后||

（7）赋值运算符：=

（8）逗号运算符：，

学习来源：黑马pink老师视频

根据视频内容整理出的学习笔记，用于复习查看。

云卷云舒_jing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记3—数据类型和运算符

目录一、数据类型1.变量的数据类型2.数据类型的分类3.数字型（数值型） Number3.1数字型进制3.2数字型范围3.3 数字型三个特殊值3.4非数字类型isNaN()4.字符串型 String4.1字符串引号嵌套4.2字符串转义符4.3字符串长度4.4字符串拼接4.5案例5.布尔型 Boolean6.Undefined 和 Null7.检测数据类型8.数据类型转换8.1转换为字符串8.2转换为数字型8.3案例9.转换为布尔型10案例二、运算符1.算术运算符1.1算术运算符概述1.2浮点数的精度问题1.
复制链接

扫一扫