目录
一:for循环
1.for循环
1.概念:做重复的事情,通常和数字关联
2.for循环的基本结构(两个分号不可以省略)
for(;;){}
3.for(1初始值;2结束条件;4更新变量){
//3 执行的for循环代码
}
// for(初始化条件;结束条件;更新条件){
// 执行语句
// }
for(var i=1; i<=6;i++){
console.log("我正在跑第"+i+"圈");
}
2.for循环注意点
- 是否满足条件:(如果不满足:代码一次不执行)
- 是否有结束条件(如果没有,就是一个死循环(无限循环))
- 浏览器15秒还没有反应过来,就会自动崩溃
3.break结束整个循环
在for循环中只要break代码被执行
for循环立即终止
4.continue结束本次循环,继续下一次循环
continue 当次循环continue关键字以后的代码不执行
执行下一次循环
<script>
// for循环
// 初始条件是:1
// 结束条件是:10
// 执行代码: 问喝水不?喝水就这一圈不跑了,不和就跑完这一圈
// 更新循环变量 i++
for(var i=1;i<=10;i++){
var flag = window.confirm("哥是否喝瓶水?");
// 如果不喝就继续跑
if(flag){ continue; }
console.log("我正在跑第"+i+"圈");
}
// continue结束当次循环,后面的代码不执行,执行下一次循环
</script>
二:函数
1.函数定义
1.在js中可以理解为重复使用的代码块
2.函数是由事件来进行驱动的,(关于事件的学习可以在我后面的JS事件中去学习),或者直接被调用时执行的可重复使用的代码块
2.函数的作用
1.可以重复使用
2.能够将代码功能以模块的形式进行分离,提高代码的可读性,建立模块化编程的思想
3.函数的调用
01 在js中直接调用 fun()
02 可以html事件属性<h1 οnclick="fun()">
03 dom 1级事件注册btn.onclick = fun
04 dom2级事件注册btn.addEventListener("click",fun)
05 函数中调用函数
function play(){
check();
.....
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 onclick="fun()">函数-方法</h1>
<p>函数:一块可以重复执行的代码,函数可以被多次调用</p>
<button type="button">调用</button>
<script>
/* function 名称 (){
要执行的代码
} */
function fun(){
console.log("养羊");
console.log("喂马!");
console.log("劈柴");
console.log("射雕!");
}
</script>
</body>
</html>
4.函数的参数
1.function say(name){
alert("我喜欢"+name)
}
执行
say("小红")
say("苹果")
2.name 是形式上的参数(形参) 定义时候
"小红","苹果" 实际的参数(实参) 执行的时候
函数在执行的时候会把实参代入函数替换形参执行代码
3.参数列表:函数有个特殊变量arguments,类似数组的变量
存储函数传入参数列表
4.函数默认参数
定义函数参数默认值,没有传入参数时候,默认使用这个值
function send(name="lili"){
....
}
send () 没有传入name值,默认name等于lili
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>多个参数</h1>
<script>
// 定义函数add,求参数的和
function add(){
// console.log(arguments,arguments.length,arguments[0])
var sum = 0; //总数
// for循环:初始i=0;结束i<arguments.length;i++
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
alert(sum);
}
add(1,3,5,1);
// 定义函数 add 参数a,b 累加的和
/* function add(a,b){
// 存储累加的值
var sum = 0;
for(var i=a;i<=b;i++){
sum+=i;
}
alert(sum);
// 初始 i=a;结束i<=b;
// 执行代码累加 sum+=i;
// 更新变化 i++;
}
add(2,5); */
// 定义函数 add 参数a,b求两个参数的和
// function add(a,b){
// alert(a+b);
// }
// add(2,3);
</script>
</body>
</html>
5.函数的返回值
1.函数默认返回 undefined
2.用return 关键字可以定义函数返回值
3.return后面的代码 函数不会执行的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>函数返回值</h1>
<script>
// 内置函数confirm执行完,赋值给re
// 函数执行完,可以返回一个值,被变量接收
// 自定义函数默人,默认返回undefined
// 关键字return可以定义函数执行完的返回值
// var re =confirm("你确定?");
// console.log(re);
// 函数执行完,返回参数相加的结果
// 当函数遇到return 就不再往下执行了
function add(a,b){
return a+b;
alert(a+b);
}
var re = add(3,4);
console.log(re);
</script>
</body>
</html>
6.匿名函数(没有名字的函数)
- 在事件注册el.onclick = function(){}
- 当做回调函数
list.forEach(function(item){}) - 匿名函数自执行
;(function(){ ...})()
!function(){ ...}() - 赋值给变量
var abc = function(){ ...}
先声明后执行
7.变量的提示
js再执行代码前,会把当前作用域的函和变量提升到最前面
把变量赋值为undefined
再执行其他代码
8.变量的作用域
- 变量的可以使用方法
- 全局作用域(在js任意地方可以访问):1. 在script 用var声明的变量2. window的全局属性3. 在任意地方没有用关键字声明的变量也是全局变量
- 函数作用域:在当前函数,子函数可以访问,在当前函数声明的变量
- 函数可以访问其父函数作用域 /全局作用域变量
在函数外部不能访问函数内部变量 - if,switch,else,for没有作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function say(){
b = 12;
alert(b);
}
say();
alert(b);
</script>
</body>
</html>