JavaScript 函数

最新推荐文章于 2023-06-08 19:53:43 发布

原创最新推荐文章于 2023-06-08 19:53:43 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了JavaScript函数的使用，从基本语法到高级特性，包括函数定义、参数传递、函数调用、可变参数、返回值处理及递归计算等。通过具体案例展示了如何利用函数简化代码、提高复用性和增强程序逻辑处理能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript 面向对象其实很好的，有的人说不支持是错误的，面向过程是错误的

为什么需要函数

看一个实际的需求:

① 输入两个数,再输入一个运算符(+,-,*,/)，得到结果.

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
var num1=window.prompt("请输入一个数");
var num2=window.prompt("请输入2个数");
var oper=window.prompt("输入运算符号");
//把num1, num2转成float
num1=parseFloat(num1);
num2=parseFloat(num2);
var res=0;
switch(oper){
case "+":
res=num1+num2;
break;
case "-":
res=num1-num2;
break;
case "*":
res=num1*num2;
break;
case "/":
res=num1/num2;
break;
default:
window.alert("输入的运算符号错误");
}
window.alert("res="+res);
</script>
</html>

如果我们在a.html, b.html, c.html我们都需要做这个计算.

用代码来实现，上面的分析:

1. 写一个js文件,在该文件中封装函数

2. 在需要的地方引入js文件即可.

比如在a.html中使用

代码:

funs.js码

//必然需要传入参数[num1,num2,oper]
function jiSuan(num1,num2,oper){
//把num1, num2转成float
num1=parseFloat(num1);
num2=parseFloat(num2);
var res=0;
switch(oper){
case "+":
res=num1+num2;
break;
case "-":
res=num1-num2;
break;
case "*":
res=num1*num2;
break;
case "/":
res=num1/num2;
break;
default:
window.alert("输入的运算符号错误");
}
//return 语句表示返回? 返回给哪个!(谁调用就返回给谁)
return res;
}

a.html:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!--在使用函数前，引入js文件-->
<script type="text/javascript" src="funs.js"></script>
<script type="text/javascript">
var num1=window.prompt("请输入一个数");
var num2=window.prompt("请输入2个数");
var oper=window.prompt("输入运算符号");
window.alert("res="+jiSuan(num1,num2,oper));
</script>
</html>

u js函数的分类

1. 自定义函数

① 基本用法是:

function 函数名(参数列表){
//语句
//return 语句
}

参数列表千万不要带var ,php函数的可以带$，但是JavaScript不需要

说明:

(1) 函数的规范问题, 可以用字母开头, 不要用数字开头. 可以包括字母/数字/_/$

(2) 参数列表可以多个(js支持可变参数)

(3) return 语句可以有，也可以没有. 最多只能有一个return

Javascript 参考手册--->Javascript函数参考手册-->js函数

2. 系统函数(js语句本身提供)

u 函数的调用方式

① 函数名(参数值); (通过函数名调用)

function test(val){
window.alert(val);
}
test(“hello”);

② 通过函数指针去调用

基本用法

var 变量=函数名;

变量(参数列表);

代码

function test(num1,num2){
return num1+num2;
}
//window.alert(test);
//如果以后看JavaScript框架，就会看到 ，c++是这么用
//下面的话，相当于把test的函数指针，赋给了my这个变量.
//因此my也执行test函数的代码 
var my=test;
window.alert(my);
    var res=my(67,90);
window.alert("00"+res);

特别说明 :

1. 如果一个函数有返回值，你可以接收后再使用,也可以直接使用.

2. 如果一个函数没有返回值，但是你却使用，则会提示 undefined;

u js的函数调用过程

基本调用原则:

一个测试题，加深大家对函数调用机制理解

function abc(num1){

if(num1>3){

abc(--num1);

}

document.writeln(num1);

}

abc(5);

执行的结果是:

3 3 4

分析图是:

函数调用:

使用递归的方法来计算 n!

//非递归
function test1(n){
var res=1;
for(var i=1;i<=n;i++){
res*=i;
}
}

//递归
function test2(n){
if(n==1){
return 1;
}else{
return test2(n-1)*n;
}
}
使用递归的方法计算 f(n)=2*f(n-1)+3  , 已知 f(1)=1;
f(3000)
编写一个函数，接收n,计算其值.
function fun1(n){
if(n==1){
return 1;
}else{
return 2*fun1(n-1)+3;
}
}

js使用小结

①函数的参数列表可以是多个

②参数列表可以是多个,并且数据类型可以是任意的类型

③js函数支持可变参数

代码:

function test4(){
//window.alert(arguments.length);
var res=0;
for(var i=0;i<arguments.length;i++){
//document.write(arguments[i]+"--");
res+=arguments[i];
}
return res;
}

//需求我希望test4函数可以计算我给出的数的结果和(但是我给的参数个数不确定)

document.write(test4(45,89,90,78.8));

通过这段代码，我们可以得出这样的结论：在同一个作用域(在同一个页面) js函数是不能有重复名字, 同时我们也知道 js 函数不支持函数的重载.