算术运算符
+ - * / % ++ --
注意:
1.由于js中的小数和整数都是number类型,不存在类似整数除以整数还是整数的结论。
2.字符串和其他的数据使用+号运算,会连接成一个新的字符串。
3.字符串使用除了+以外的运算符:如果字符串本身是一个数字,那么会自动转成number进行运算
,否则就会返回一个NaN的结果,表示这不是一个数字。NaN:not a number
<script>
alert(1234 / 1000 * 1000); // 1234
let a = "12";
a -= 10;
alert(a); // 2
let a = "aa";
a -= 10;
alert(a); // NaN Not a Number 不是一个数字
let a = "12";
a += 10;
alert(a); // 1210
</script>
关系(比较)运算符
> >= < <= !=
== 等于(只比较内容) === 恒等于(比较内容的同时还要比较数据类型)
注意:关系运算符返回的结果只有两个:true / false
<script>
// 请问1 : 3 > 5, 结果为 ?
alert(3 > 5); // false
// 请问2 : “22” == 22 结果为 ?
alert("22" == 22); // true (仅仅判断数值)
// 请问3 : “22” === 22 结果为 ?
alert("22" === 22); // false (恒等于, 数值和类型都要相等)
</script>
逻辑运算符
&& 与 true&&false ====>false
|| 或 true||false ====>true
! 非 !true ====>false
false(理解):false, 0, null, undefined
true(理解):true, 非0, 非null, 非undefined
针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)
演示一:
<script>
// 短路与 (一假即假)
// 口诀 : 找第一个为假的值.
// 请问1 : 8 < 7 && 3 < 4, 结果为 ?
alert(8 < 7 && 3 < 4); // false
// 请问2 : -2 && 6 + 6 && null 结果为 ?
alert(-2 && 6 + 6 && null); // null
// 请问3 : 1 + 1 && 0 && 5 结果为 ?
alert(1 + 1 && 0 && 5); // 0
</script>
演示二:
<script>
// 短路或 : 一真即真.
// 口诀 : 找第一个为真的值.
// 请问1 : 0 || 23 结果为 ?
alert(0 || 23); // 23
// 请问2 : 0 || false || true 结果为 ?
alert(0 || false || true); // true
// 请问3 : null || 10 < 8 || 10 + 10结果为 ?
alert(null || 10 < 8 || 10 + 10); // 20
// 请问4 : null || 10 < 8 || false结果为 ?
alert(null || 10 < 8 || false); // false
</script>
三元运算符:
条件?表达式1:表达式2
如果条件为true,返回表达式1的结果
如果条件为false,返回表达式2的结果
演示:
<script>
// 请问1 : 3 ? “aaa” : “bbb” 结果为 ?
alert(3 ? "aaa" : "bbb"); // aaa
// 请问2 : 0 ? “ccc” : “ddd” 结果为 ?
alert(0 ? "ccc" : "ddd"); // ddd
</script>
if条件语句
这个和Java中if语句一样。
演示:
<script>
let score = 59;
if (score >= 90) {
alert("优秀");
} else if (score >= 80) {
alert("良好");
} else if (score >= 60) {
alert("及格");
} else {
alert("不及格");
}
</script>
switch分支结构
这个和java中switch结构一样。只是Java中表达式为:常量 整型(去long)、字符、字符串
演示:
<script>
let score = 59;
// 需求 : 将需要一个整型数值, 不想要小数点.
// window 对象的 parseInt 方法.
score = window.parseInt(score / 10 + "");
// alert(score);
switch (score) {
case 10:
case 9:
alert("优秀!");
break;
case 8:
alert("良好!");
break;
case 7:
case 6:
alert("及格!");
break;
default:
alert("不及格!");
break;
}
</script>
循环结构 while、do-while. for;
while(循环条件){循环体;}
do{循环体;}while(循环条件);
for(循环变量赋初值;循环条件;循环变量增值){循环语句;}
console.log(...); 以日志的形式在控制台输出结果!
演示:
<script>
// 需求 : 统计 1~100 之间能够被3和7整除的数字个数
let count = 0;
// 1. 遍历 1~100 之间的所有整型数值
for (let i = 1; i <= 100; i++) {
// 2. 判断
if (i % 3 == 0 && i % 7 == 0) {
// alert(i);
console.log(i);
// 3. 累加个数
count++;
}
}
// 4. 查看结果
// alert(count);
console.log(count);
循环嵌套
演示案例9*9乘法表
<style>
table {
/* 将 table 表格的线变成了细线 */
border-collapse: collapse;
/*color: red;*/
border-color: red;
}
</style>
<script>
// 需求 : 九九乘法口诀表
document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
document.write("<caption>九九乘法口诀表</caption>");
for (let i = 1; i <= 9; i++) {
document.write("<tr>");
for (let j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "*" + i + "=" + (j*i) + " ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
自定义函数
函数是命名的独立的语句段,这个语句段可以被当作一个整体来引用和执行:
格式:
function 函数名(形式参数){函数体}
调用函数:函数名(实际参数);
函数只有被调用后才会执行
如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型
<script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}
// 调用函数 :
alert(demo2());
</script>
如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可
<script type="text/javascript">
// 定义一个函数 : function
function demo3(a, b) {
return a + b;
}
// 调用函数 :
alert(demo3(10, 20));//显示30
</script>
js中出现二个重名的函数名、后者会把前面的覆盖掉
对比java、java有重载(同名不同参)、重写(同名同参同返回值类型、方法体不一样)
演示:
<script type="text/javascript">
// 定义一个函数 : function
function demo4(a, b) {
alert("调用1...");
}
function demo4() {
alert("调用2...");
}
demo4(10, 20);
demo4();
</script>
匿名函数
匿名函数是没有名字的函数
function(形式参数){函数体}
调用方式:将匿名函数赋值给一个变量,通过变量名调用函数
定义函数并赋值给变量:let fn = function(形式参数){函数体}
调用函数:fn(实际参数);
演示:
<script type="text/javascript">
// 匿名函数 : 没有名称的函数
let func = function(i, u) {
alert(i + " love " + u);
}
// 调用函数 :
func("李狗蛋", "张翠花");//显示李狗蛋love张翠花
</script>