函数
JS函数的概念
函数就是把特定功能的代码抽取出来，使之成为程序中的一个独立实体
正如函数的概念, 我们可以根据需要, 将特定的功能用函数来包裹(封装)
使用函数的好处
1, 函数可以在同一个程序或其他程序中多次重复使用（通过函数名调用）
2, 使程序变得更简短而清晰 ， 提高可读性
3, 有利于程序维护
函数可以分为: 系统函数 内置函数 和 自定义函数
js, (浏览器,nodejs服务器)
内置函数 (其他场景也有)
系统函数 (该场景才有)
自定义函数 (重点)
是用户自己定义的函数, 用户可以根据实际需求, 对特定的功能使用函数来封装
函数的简单定义
定义函数的语法格式:
function 函数名() {
代码块;
}
1, 必须使用function关键字, 且为小写, 函数名可以自己给定
2, 函数名的命名规则和变量名一致
3, 函数名后必须写圆括号()
console.log()
var res = console.log("你好"); // 有参数,无返回值
console.log(res);
alert("你好")
document.write("你好")
var res = parseInt(12.3);
console.log(res);
parseFloat()
Number()
Boolean()
isNaN()
Math.random()
toString()
prompt("请输入一个数")
toFixed()
typeof()
var res = confirm("你确定要删除吗?");
console.log(res);
Math.round()四舍五入
函数的调用
函数的调用方式: 函数名()
如 : 调用下面的函数: printOut()；
function printOut(){
document.write(“Hello World!”);
}
注意:
1, 调用函数后会执行函数内部的代码块;
2, 函数在不调用的情况下是不会执行的, 只有调用后函数中的代码才会执行
大分部情况,有参数,有返回值
有参数,无返回值 (少)
无参数,无返回值 (少见)
无参数,有返回值 (少)
形参:当有不定的值,就用形参处理(输入函数体内的局部变量)
函数的标准定义
定义函数的语法格式:
function 函数名(参数1，参数2，……)
{
执行语句;
return 返回值;
}
注意: 1, 函数名后圆括号()中的参数数量不定, 也可以没有; (根据功能需要)
2, return关键字的作用是将某个值返回, 如果没有返回值则默认返回undefined;同时停止return后面的代码.
定义一个函数sum
function sum(one, two){
var s = one + two;
return s;
}
调用上面的函数:
var result = sum(2, 8);
console.log(result);
形参:
形参就是在函数定义时，函数名后面的参数;
函数的形参跟变量是一样使用,且不能用var修饰
实参:
实参就是调用时，函数名后面的参数
函数中的arguments数组:
JS中函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型，在调用函数时也未必一定要传递指定数量的参数，原因是 ECMAScript 中的参数在内部是用一个数组(arguments)来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。
arguments可以判断参数的个数，arguments是个数组(后面会详细讲解数组)。
我们可以使用arguments.length来获取参数的个数
可以使用arguments[i] 的方式来访问数组中的第i个参数(i为自己给定的整数下标)
- 它只能在函数内部出现
- 它是伪数组
- 就是用于接受实参
function calc() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(calc(10, 20, 8, 30));
作用域
就是起作用的范围。或者说有效范围
局部变量: 定义在函数内部的变量，这个变量只能在函数内部使用，即作用域范围只是函数内部，另外，形参也是局部变量.
全局变量: 全局变量就是定义在函数外部的变量，这个变量在任何函数中都有效，即作用域范围是当前文件的任何地方.
注意: 在定义变量时, 如果不写关键字var也是合法的, 且是全局变量,在函数体内不写var,变量也会变成全局变量.但是这样写不安全,容易在其他地方被更改, 所以我们在函数中写变量要加上var
若全局和局部变量同时存在,先考虑局部变量.
变量提升:在函数体中,var声明变量后(无论赋值与否及声明的位置),声明直接提升至函数体头部.
function fn1(m) {
var n = m = 200;
console.log(m);//200
console.log(n);//200
}
函数的创建方式有3种
1. 普通函数
function cale(n, m) {
return n + m;
}
console.log(cale(10, 20));
2.匿名函数
var cale = function (n, m) {
return n + m;
}
console.log(cale(5, 10));
3.构造函数创建函数 (构造函数条件反射 思考到 new)
使用的比较少
var fn = new Function("n", "m", "return n+m");
console.log(fn(100, 200));
函数的嵌套:
函数内部可以再包含其他函数;
函数之间允许相互调用，也允许向外调用, 但是不可以调用同级函数的嵌套函数;不能调用另外函数体内部的函数.
function fn1(year) {
//1.给我的年份,假设是平年
var flag = true;// true 平年,false闰年
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = false;//false闰年
}
return flag //如果flag最终的结果是true 平年.否则就是闰年
}
var res = fn1(2020);
var result = res ? "平年" : "闰年";
console.log(result);
事件驱动
因为函数不会主动执行, 只有当调用的时候才会执行函数中的代码, 在前面的dom操作示例中,我们点击了按钮才触发函数调用
所有的函数，没有调用不会执行，那么在我们浏览器中函数调用的源头在何处，就是事件, 只有使用事件去驱动, 函数才被调用; 如: onclick: 点击事件
click,mosueenter,mouseleave 去执行 代码
事件驱动编程
事情执行函数
1.获取指定按钮
var oBtn = document.getElementById("btn") //通过id获取文档里的元素
2.给按钮绑定点击事件 (绑定,不代码执行)
onclick 点击
事件也可以帮忙执行函数
oBtn.onclick = function () {
3.执行事件,逻辑代码
console.log("台上的男人真帅!");
}
1.鼠标点击页面的按钮,也执行函数
2.还可以直接执行函数,把 onclick当做函数名对待
oBtn.onclick();
<body>
<button>我是按钮1</button>
<button>我是按钮2</button>
<button>我是按钮3</button>
<button>我是按钮4</button>
<button>我是按钮5</button>
<script>
循环 同步代码
事件 异步代码
一口气拿到 页面上所有的按钮
var oBtns = document.querySelectorAll("button");
遍历5个按钮
for (var i = 0; i < oBtns.length; i++) {
console.log(i);
给每一个按钮绑定点击事件
oBtns[i].onclick = function () {
获取下标
console.log(i);
}
}
console.log(i); 可以将var改为let;
制作简易计算器:
<input id="num1" value="">
<select id="opts">
<option value="请选择">请选择</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input id="num2">
<button id="btn">=</button>
<input id="num3">
<script>
function calc(n, m, opt) {
var res;
switch (opt) {
case "+":
res = Number(n) + Number(m);
break;
case "-":
res = n - m;
break;
case "*":
res = n * m;
break;
case "/":
res = n / m;
break;
case "%":
res = n % m;
break;
default:
alert("请选择操作符!");
break;
}
return res;
}
var oNun1 = document.getElementById("num1");
var oNun2 = document.getElementById("num2");
var oNun3 = document.getElementById("num3");
var oOpts = document.getElementById("opts");
var oBtn = document.getElementById("btn");
//1.给按钮绑定点击事件.
oBtn.onclick = function () {
//在点击事件里,获取 oNun1,oNun2 操作符3个参数,
var num1 = oNun1.value;
var num2 = oNun2.value;
var opt = oOpts.value;
//把3个参数导入都 calc函数 得到结果 ,赋给num3
oNun3.value = calc(num1, num2, opt)
}
</script>
递归调用
函数可以自己调用自己,必须要有结束条件,称为函数的递归调用;
递归调用的方式:
- 首先去找临界值，即无需计算，获得的值(一般是返回该值)。
- 找这一次和上一次的关系(一般从后往前找)
- 假设当前函数已经可以使用，调用自身计算上一次的运行结果，再写出这次的运行结果。
循环能做的事,递归都能实现
// 1 到100的和使用递归实现?
function fn(n) {
if (n == 1) {
return 1;//终止函数,并返回结果
}
return n + fn(n - 1);
}
console.log(fn(100));
