前端研习录(18)——JavaScript运算符合集
版权声明
- 本文原创作者:清风不渡
- 博客地址:https://blog.csdn.net/WXKKang
重拾前端记忆,记录学习笔记,现在进入JavaScript运算符部分
一、typeof运算符
typeof运算符可以判断变量的数据类型,为提高准确性,一般用于判断基本数据类型
数值类型返回:number
字符串类型返回:string
布尔值类型返回:boolean
示例如下:
<!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>清风不渡</title>
</head>
<body>
<script>
var num = 10;
console.log("num的数据类型为:"+ typeof num);
var str = "这是一个字符串"
console.log("str的数据类型为:"+ typeof str)
var isman = true;
console.log("isman的数据类型为:"+ typeof isman)
var user = {
username : "admin",
password : "123"
}
console.log("user的数据类型为:"+ typeof user)
console.log("null的数据类型为:"+ typeof null)
</script>
</body>
</html>
结果如下:
可以看到,当数据类型为对象或者null时,返回的都是object,所以为提高准确性,一般用于判断基本数据类型
二、算术运算符
1、加减乘除运算符
加减乘除运算符就是最基本的数学运算符,示例如下:
<!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>清风不渡</title>
</head>
<body>
<script>
var num = 10+10;
console.log("10+10="+ num);
num = 10-10;
console.log("10-10="+ num);
num = 10*10;
console.log("10*10="+ num);
num = 10/10;
console.log("10/10="+ num);
</script>
</body>
</html>
结果如下:
2、余数运算符
余数运算符即是取余数,示例如下:
<!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>清风不渡</title>
</head>
<body>
<script>
var num = 15%10;
console.log("15/10的余数为:"+ num);
</script>
</body>
</html>
结果如下:
3、自增、自减运算符
自增、自减运算符(一元运算符),即是在本身基础上进行加1或者减1,示例如下:
<!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>清风不渡</title>
</head>
<body>
<script>
var num_1 = 10;
var num_2 = 15;
console.log("10自增一次后结果为:"+ ++num_1);
console.log("15自减一次后结果为:"+ --num_2);
</script>
</body>
</html>
结果如下:
注意:++a即表示先自增后返回,a++表示先返回再自增;自减同理
三、赋值运算符
我们可以通过赋值运算符给变量进行赋值,常见的赋值运算符有以下几种:
运算符 | 表达式 |
---|---|
= | 将等号右边的值直接赋值给左边的变量 |
+= | x+=y等同于x=x+y |
-= | x-=y等同于x=x-y |
*= | x*=y等同于x=x*y |
/= | x/=y等同于x=x/y |
%= | x%=y等同于x=x%y |
示例如下:
<!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>清风不渡</title>
</head>
<body>
<script>
var x = 15;
var y = 10;
console.log("x的值为:"+x);
console.log("y的值为:"+y);
x+=y;
console.log("x+=y的值为:"+ x);
x = 15;
x-=y;
console.log("x-=y的值为:"+ x);
x = 15;
x*=y;
console.log("x*=y的值为:"+ x);
x = 15;
x/=y;
console.log("x/=y的值为:"+ x);
x = 15;
x%=y;
console.log("x%=y的值为:"+ x);
</script>
</body>
</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>清风不渡</title>
</head>
<body>
<script>
var num_1 = 10;
var num_2 = "10";
console.log("num_1是否小于num_2:")
console.log(num_1<num_2);
console.log("num_1是否大于num_2:")
console.log(num_1>num_2);
console.log("num_1是否小于或等于num_2:")
console.log(num_1<=num_2);
console.log("num_1是否大于或等于num_2:")
console.log(num_1>=num_2);
console.log("num_1是否等于num_2:")
console.log(num_1==num_2);
console.log("num_1是否严格等于num_2:")
console.log(num_1===num_2);
console.log("num_1是否不等于num_2:")
console.log(num_1!=num_2);
console.log("num_1是否严格不等于num_2:")
console.log(num_1!==num_2);
</script>
</body>
</html>
结果如下:
五、布尔运算符
布尔运算符包括以下三种:
布尔运算符 | 描述 |
---|---|
! | 取反运算符 |
&& | 且运算符(多个条件都要满足) |
|| | 或运算符(满足一个条件即可) |
注意:对于非布尔值,取反运算符会将其转换为布尔值,以下六个值取反后为true,其余都为false。
undefined null false 0 NaN 空字符串(“”)
示例如下:
<!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>清风不渡</title>
</head>
<body>
<script>
console.log("----------以下为布尔值取反------------")
console.log("true的相反值为:")
console.log(!true);
console.log("false的相反值为:")
console.log(!false);
console.log("----------以下为其他非布尔值取反------------")
console.log("undefined的相反值为:")
console.log(!undefined);
console.log("null的相反值为:")
console.log(!null);
console.log("false的相反值为:")
console.log(!false);
console.log("0的相反值为:")
console.log(!0);
console.log("NaN的相反值为:")
console.log(!NaN);
console.log("空字符串的相反值为:")
console.log(!"");
console.log("123的相反值为:")
console.log(!123);
console.log("非空字符串的相反值为:")
console.log(!"welcome");
console.log("----------以下为且运算符------------")
var num_1 = 10;
var num_2 = 10;
console.log("num_1等于num_2且num_1大于num_2");
console.log(num_1==num_2 && num_1>num_2);
console.log("----------以下为或运算符------------")
console.log("num_1等于num_2或num_1大于num_2");
console.log(num_1==num_2 || num_1>num_2);
</script>
</body>
</html>
结果如下: