javaScript基础学习 - 5 - JavaScript运算符(操作符)-案例代码
2020-08-18 14:11
344 查看
javaScript基础学习 - 5 - JavaScript运算符(操作符)-案例代码
- 1. 算数运算符
- 2. 表达式和返回值
- 3. 前置递增运算符
- 4. 后置递增运算符
- 5. 递增运算符练习
- 6. 比较运算符
- 7. 逻辑运算符
- 8. 逻辑运算符练习
- 9. 短路运算(逻辑中断)
- 10. 赋值运算符
- 11. 运算符优先级
1. 算数运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> console.log(1 + 1); // 2 console.log(1 - 1); // 0 console.log(1 * 1); // 1 console.log(2 / 13); // 0.6666666666666666 // 1. % 取余 (取模) console.log(4 % 2); // 0 console.log(5 % 3); // 2 console.log(3 % 5); // 3 // 2. 浮点数 算数运算里面会有问题 console.log(0.1 + 0.2); // 0.30000000000000004 console.log(0.07 * 100); // 7.000000000000001 // 3. 我们不能直接拿着浮点数来进行相比较 是否相等 var num = 0.1 + 0.2; console.log(num == 0.3); // false </script> </head> <body> </body> </html>
2. 表达式和返回值
<script> // 是由数字、运算符、变量等组成的式子 我们称为表达式 1 + 1 console.log(1 + 1); // 2 就是返回值 // 1 + 1 = 2 // 在我们程序里面 2 = 1 + 1 把我们的右边表达式计算完毕把返回值给左边 var num = 1 + 1; </script>
3. 前置递增运算符
<script> // 1. 想要一个变量自己加1 num = num + 1 比较麻烦 var num = 1; num = num + 1; // ++num num = num + 1; console.log(num); // 3 // 2. 前置递增运算符 ++ 写在变量的前面 var age = 10; ++age; // 类似于 age = age + 1 console.log(age); // 3. 先加1 后返回值 var p = 10; console.log(++p + 10); </script>
4. 后置递增运算符
<script> var num = 10; num++; // num = num + 1 ++num; console.log(num); // 1. 前置自增和后置自增如果单独使用 效果是一样的 // 2. 后置自增 口诀:先返回原值 后自加1 var age = 10; console.log(age++ + 10); console.log(age); </script>
5. 递增运算符练习
<script> var a = 10; ++a; // ++a 11 a = 11 var b = ++a + 2; // ++a 12 a = 12 console.log(a); // 12 console.log(b); // 14 var c = 10; c++; // c++ 11 c = 11 var d = c++ + 2; // c++ = 11 c = 12 console.log(d); // 13 var e = 10; var f = e++ + ++e; // 1. e++ = 10 e = 11 2. e = 12 ++e = 12 console.log(f); // 22 // 后置自增 先表达式返回原值 后面变量再自加1 </script>
6. 比较运算符
<script> console.log(3 >= 5); // false console.log(2 <= 4); // true //1. 我们程序里面的等于符号 是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以 console.log(3 == 5); // false console.log('小李子' == '东北F4'); // flase console.log(18 == 18); // true console.log(18 == '18'); // true console.log(18 != 18); // false // 2. 我们程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以 true console.log(18 === 18); console.log(18 === '18'); // false </script>
7. 逻辑运算符
<script> // 1. 逻辑与 && and 两侧都为true 结果才是 true 只要有一侧为false 结果就为false console.log(3 > 5 && 3 > 2); // false console.log(3 < 5 && 3 > 2); // true // 2. 逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是true console.log(3 > 5 || 3 > 2); // true console.log(3 > 5 || 3 < 2); // false // 3. 逻辑非 not ! console.log(!true); // false </script>
8. 逻辑运算符练习
<script> var num = 7; var str = "一起来~学习~"; console.log(num > 5 && str.length >= num); // true console.log(num < 5 && str.length >= num); // false console.log(!(num < 10)); // false console.log(!(num < 10 || str.length == num)); // false </script>
9. 短路运算(逻辑中断)
<script> // 1. 用我们的布尔值参与的逻辑运算 true && false == false // 2. 123 && 456 是值 或者是 表达式 参与逻辑运算? // 3. 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1 console.log(123 && 456); // 456 console.log(0 && 456); // 0 console.log(0 && 1 + 2 && 456 * 56789); // 0 console.log('' && 1 + 2 && 456 * 56789); // '' // 如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN // 4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2 console.log(123 || 456); // 123 console.log(123 || 456 || 456 + 123); // 123 console.log(0 || 456 || 456 + 123); // 456 // 逻辑中断很重要 它会影响我们程序运行结果 var num = 0; console.log(123 || num++); console.log(num); // 0 </script>
10. 赋值运算符
<script> var num = 10; // num = num + 1; num++ // num = num + 2; // num += 2; // num += 2; num += 5; console.log(num); var age = 2; age *= 3; console.log(age); </script>
11. 运算符优先级
<script> // ++num !num 2 + 3 console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) var num = 10; console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); console.log('-------------------'); var a = 3 > 5 && 2 < 7 && 3 == 4; console.log(a); var b = 3 <= 4 || 3 > 1 || 3 != 2; console.log(b); var c = 2 === "2"; console.log(c); var d = !c || b && a; console.log(d); </script>
相关文章推荐
- javaScript基础学习 - 6 - JavaScript流程控制 - 案例代码
- javaScript基础学习 - 10 - JavaScript函数 - 案例代码
- javaScript基础学习 - 14 - JavaScript内置对象 -案例代码
- javaScript基础学习 - 9 - JavaScript数组 - 案例代码
- javaScript基础学习 - 7 - JavaScript循环 - 案例代码
- javascript学习(2)——[基础回顾]运算符、表达式、流程控制语句
- Set、Map集合案例代码实现-Java基础学习总结
- 【学习笔记】javascript 基础篇 变量 运算符 函数
- JavaScript 基础学习笔记 运算符合集
- JAVASCRIPT基础学习篇(7)--ECMAScript Basic3(EcmaScript 运算符)
- JavaScript基础学习笔记(二)——JavaScript 注释、JavaScript 变量、JavaScript运算符
- 日常学习记录 JavaScript--js基础 + 案例99乘法表
- 通过一段代码学习javascript基础知识系列
- JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
- javascript学习(2)——[基础回顾]运算符、表达式、流程控制语句
- PHP基础学习代码案例
- JavaScript基础学习笔记(二)——操作符、语句、函数
- 代码干货 | Javascript基础学习之基本语法
- Javascript基础学习(2)_表达式和运算符
- JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符