1 流程控制
1.1 条件语句 分支结构
单向分支
if (条件表达式) {
code
双向分支
if (条件表达式){
} else {
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同志交友</title> <style> input { width: 300px; padding: 10px; font-size: 16px; border: 1px solid #ccc; } button { padding: 10px 20px; border: 1px solid #ccc; background: #f5f5f5; } #res { margin-top:20px; width: 300px; min-height: 100px; padding: 10px; border:1px solid #ccc; } </style> </head> <body> <h1>同志交友</h1> <hr> <h3>请输入您的成绩：</h3> <!-- 通过id来获取用户输入的值 --> <input type="number" id="score"> <!-- 触发事件，也就是为了通过提交按钮，来触发该函数的执行 --> <button onclick="makeScore()">提交</button> <!-- 通过id来将函数中逻辑运算的结果显示到div元素中 --> <div id="res"></div> <script> //声明函数 function makeScore() { //获取用户输入的成绩 var score = Number(document.getElementById('score').value); //对成绩进行判断 if (score > 60) { var resContent = '你的成绩及格, 来快活吧'; } else { var resContent = '您的成绩你不及格，去死吧'; } //先定位到id，然后在点innerHTML，把结果写入到div中 id=res document.getElementById('res').innerHTML = resContent; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>语句简写</title> </head> <body> <script> var score = 10; if (score > 100) console.log('OK') //条件不成立只有这一条语句会被执行 console.log('哈哈哈') //执行if语句这一句也会被执行，因为他其实并不是if语句内的代码，js中缩进并没有意义 console.log('直接来这里') </script> </body> </html>
多向分支
if (条件表达式) {
} else if(条件表达式) {
} else if (条件表达式) {
} else {
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同志交友</title> <style> input { width: 300px; padding: 10px; font-size: 16px; border: 1px solid #ccc; } button { padding: 10px 20px; border: 1px solid #ccc; background: #f5f5f5; } #res { margin-top:20px; width: 300px; min-height: 100px; padding: 10px; border:1px solid #ccc; } </style> </head> <body> <h1>同志交友</h1> <hr> <h3>请输入您的成绩：</h3> <input type="number" id="score"> <button onclick="makeScore()">提交</button> <div id="res"></div> <script> //声明函数 function makeScore() { //获取用户输入的成绩 var score = Number(document.getElementById('score').value); //对成绩进行判断 var resContent = ''; //空字符串 声明定义 变量 if (score >= 90) { resContent = '不错哦，小同志，很优秀'; //修改变量的值,也就是对定义的变量进行重新赋值 } else if (score >= 80) { resContent = '小同志，还行'; } else if (score >= 60) { resContent = '小同志，及格了'; } else { resContent = '你不是我的同志'; } //把结果写入到div中 id=res document.getElementById('res').innerHTML = resContent; } </script> </body> </html>
switch (条件表达式) {
case 表达式可能的结果：code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同志交友</title> <style> input { width: 300px; padding: 10px; font-size: 16px; border: 1px solid #ccc; } button { padding: 10px 20px; border: 1px solid #ccc; background: #f5f5f5; } #res { margin-top:20px; width: 300px; min-height: 100px; padding: 10px; border:1px solid #ccc; } </style> </head> <body> <h1>同志交友</h1> <hr> <h3>请输入您的生日：</h3> <input type="date" id="yearInput"> <!-- 触发事件，本质就是点击按钮，会调用该函数的执行 --> <button onclick="makeFn()">提交</button> <div id="res"></div> <script> //声明函数 function makeFn() { //获取用户输入的日期 var date = document.getElementById('yearInput').value; //从日期中获取年 并且转换为Number var year = Number(date.split('-')[0]); //判断 var animal = ''; switch (year % 12) { case 0: animal = '猴'; break; case 1: animal = '鸡'; break; case 2: animal = '狗'; break; case 3: animal = '猪'; break; case 4: animal = '鼠'; break; case 5: animal = '牛'; break; case 6: animal = '虎'; break; case 7: animal = '兔'; break; case 8: animal = '龙'; break; case 9: animal = '蛇'; break; case 10: animal = '马'; break; case 11: animal = '羊'; break; default: animal = '驴'; //前面的条件都不满足 } //把结果显示到页面中 document.getElementById('res').innerHTML = '您的生肖是： '+animal; /* year % 12 -- 0 ~ 11 鼠 4 2008 奥运会 + 12 （2020） 牛 5 2009 虎 6 2010 兔 7 龙 8 蛇 9 马 10 羊 11 猴 0 鸡 1 狗 2 猪 3 */ } //console.log(2020 % 12) </script> </body> </html>
嵌套分支
if (条件表达式) {
if (条件表达式) {
} else {
}
} else {
if (条件表达式) {
}
}
1.2 循环语句
while循环
while (循环条件) {
//循环体
}
do...while 循环
do {
//循环体
} while (循环条件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS循环</title> </head> <body> <h1>同志交友</h1> <hr> <!-- 三种循环方式： --> <script> //循环输出 0-10 //方式一：while循环 var m = 0; while (m <= 10) { console.log(m); m ++; // m += 1 m累加 } console.log(''); //方式二：do ... while 循环 var n = 0; do { console.log(n) n ++; // n += 1 n累加 } while(n <= 10); console.log('') //方式三：for 循环 for (var i = 0; i <= 10; i ++) { console.log(i); } </script> </body> </html>
for 循环
for (变量定义；循环条件; 变量变化) {
//循环体
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for循环</title> </head> <body> <h1>同志交友</h1> <hr> <script> // 输出 0 到 10之间的偶数，循环的次数比下面的一种方法多，可以通过console。count（）查看循环的次数 for (var a = 0; a < 11; a ++) { if (a % 2 === 0) { console.log(a) } } console.log(''); // 输出 0 到 10之间的偶数 for (var i = 0; i < 11; i += 2) { console.log(i) } console.log(''); console.log(i); //12 因为i每次是加2 console.log(a) //11 因为i每次是加1 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九九乘法表</title> <style> body { color: #333; } table { width: 900px; table-layout: fixed; border-collapse: collapse; } td { border: 1px solid #ccc; padding: 10px; } </style> </head> <body> <h1>九九乘法表</h1> <hr> <script> //JavaScript生成九九乘法表 document.write('<table>'); //循环 输出tr 行 for (var i = 1; i <= 9; i ++) { document.write('<tr>'); //输出 td 单元格 for (var j = 1; j <= i; j ++) { document.write(`<td>${i}×${j} = ${i * j}</td>`); } document.write('</tr>'); } document.write('</table>'); </script> </body> </html>
1.3 其他语句
跳转语句
continue; 跳出当前循环 继续下一次
break; 结束循环
return; 结束函数
异常
try {
} catch(err) {
}
try {
} catch(err) {
} finally {
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常语句</title> </head> <body> <script> try { console.log(username) } catch(err) { console.log(err) } finally { //无论怎么都执行 } </script> </body> </html>
catch相当于python的except
严格模式
//写在所有代码的最前面
//开启严格模式
‘use strict’
-
严格模式下 声明不加
var会报错 -
eval()在严格模式不能用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>严格模式</title> </head> <body> <script> //js存在严格格式 //开启严格模式 'use strict' var username = '小丽丽'; //userage = 100; //严格模式下 声明变量必须加 var,不加var就会报错 console.log(username) </script> </body> </html>
1.4 注意
-
当分支语句和循环语句 结构体(
{}内) 只有一行代码的时候，可以省略{}
if (条件)
代码
2 函数
2.1 定义函数
//function 关键字方式
function 函数名(参数1, 参数2) {
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS如何定义函数</title> </head> <body> <script> //定义函数 多种方式 demo(); //函数提升 （特殊情况） //fn(); //不存在变量提升 //方式一：function 关键字方式 def function demo (a, b) { console.log('demo'); } //方式二：表达式方式 --------相当于将一个匿名函数赋值给了一个变量 var fn = function(a, b){ console.log('fn'); } console.log('') demo(); fn(); var a = demo; a(); console.log(typeof demo) //函数也是一种数据类型(对象类型) console.log(typeof fn) console.log(typeof fn()) console.log('') //方式三：第三种函数 定义方式 (了解) var myFun = new Function('a', 'b', 'c', 'console.log("myFun")'); myFun(); </script> </body> </html>
2.2 函数特点
-
函数名就是变量名
-
函数调用 必须加
() -
关键字方式定义的函数， 会存在函数提升 （在函数定义的前面 调用函数）
2.3 函数的参数问题
形参和实参
-
实参数量>形参数量 多给的实参会被忽略
-
实参数量<形参梳理 多出的形参，默认值
undefined
参数默认值
//ES6 新增的语法
function demo(a, b=默认值) {
}
//有默认值的参数 一定在后面
可变数量的参数
arguments对象 可以获取所有的实参
只能在函数中使用
arguments是类数组对象，用法同数组，可以使用for循环遍历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数的参数</title> </head> <body> <h1>同志交友</h1> <hr> <script> //形参和实参数量 //定义函数 function demo(a, b) { /* ES6之间 默认值的写法 了解 if (b === undefined) { b = '默认值' }*/ console.log(a+' 和 '+b+' 正在一起交友'); } demo('小丽丽', '小刚刚'); demo('大丽丽', '大刚刚', '大花花'); //多给的实参 会被忽略 demo('老丽丽'); //如果少给了实参。 有个形参没有对应的实参，该形参默认值 undefined demo(); //不传实参也不会报错，默认的形参都是undefined console.log('') //参数默认值 function fn(a, b='小梅梅') { console.log(`${a} 和 ${b} 一起跳舞`); } fn('小刚刚'); fn('小刚刚', '小丽丽'); console.log(''); //可变数量的参数 //声明函数 实现 所有参数累加的和 function sum() { //arugments 只能在函数里面用 var s = 0; //遍历 arguments 取出其中的每一个值,arguments.length统计传入参数的长度 for (var i = 0; i < arguments.length; i ++) { s += arguments[i] } //返回，调用函数拿到返回值，但是要打印一下才能在控制台进行显示 return s; } console.log(sum(1,2,3,4)) console.log(sum(1,2,3,4,123,123,1231231,123123123123)) </script> </body> </html>
2.4 return
-
return 可以结束函数
-
return返回值
-
js return 只能返回一个值
2.5 回调函数
一个函数就可以接收另一个函数作为参数，这种函数就称之为回调函数(高阶函数)
-
函数的参数 还是 函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS回调函数</title> </head> <body> <script> //回调函数 （高阶函数）-------我们为f1和f2传入的不是连个具体的值，而是两个函数 function fn(f1, f2) { return f1(1)+f2(1) } function demo(n) { return n * 100; } console.log(fn(Math.abs, demo)) console.log(''); //有名函数 从小到大 function mySort(v1,v2) { /*if (v1 > v2) { return 5 //换过来 只要是正数 就会交换 } else { return -7 //不变 只要是负数 就不换 }*/ return v1 - v2; } //有些方法的参数 要求就是函数 var list = [10,23,1,456,8,3,5]; //数组 Array console.log(list); //排序 字符串排序---------即按位进行比较，然后在进行排序 //list.sort(); //按照自然排序 //list.sort(mySort) list.sort(function(v1, v2){ return v1 - v2; }) console.log(list); </script> </body> </html>
2.6 自调函数
函数声明完直接调用
(function(){
})();
(function 函数名(){
})()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自调函数</title> </head> <body> <script> // 就是将函数整体放到小括号中进行调用，有名函数 (function demo() { console.log('啊，我被调用了'); })(); // 既然整体放到小括号中被执行，所以可以将器设置为匿名函数，然后在加小括号进行调用 (function(){ console.log('啊，我也被调用了') })() </script> </body> </html>
//如果多个自调函数连续写， 中间必须加 ; 否则报错
//产生局部作用域
//有效避免全局变量污染
2.7 递归
函数内部调用自己就是递归函数，
//用递归 实现阶乘
function multiply(n) { if (n == 1) { return 1 } return n * multiply(n - 1) }总结
-
流程控制 分支： 单向分支 双向分支 多向分支(else if switch..case) 嵌套分支
-
流程控制 循环： while循环 do...while循环 for循环
-
其他控制语句： 跳转、异常、严格模式
-
函数 （定义、特点、参数 、自调、回调、递归）