JavaScript--函数（实例结合）
JavaScript --函数 (实例结合)
⽂章⽬录
函数是由事件驱动的或者当它被调⽤时执⾏的可重复使⽤的代码块
我们⽤实例来初步了解⼀下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实例</title>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点我</button>
</body>
</html>
1.初识函数
函数: ⽤于封装⼀段完成特定功能的代码。
相当于将⼀条或多条语句组成的代码块包裹起来，⽤户在使⽤时只需关⼼参数和返回值，就能完成特定的功能，⽽不⽤了解具体的实现。
下⾯通过⼀段代码演⽰函数的使⽤：
<script>
console.log(parseFloat('7.26e-2'));// 返回解析后的浮点数：0.0726
console.log(isNaN(' '));// 判断是否是NaN：false
console.log(parseInt('15.99'));//返回解析后整数值是15
</script>
parseFloat() ⽤于返回解析字符串后的浮点数。
isNaN() 判断给定参数是否为NaN，判断结果为是，返回true，否则返回false。
parseInt() ⽤于返回解析字符串后的整数值。
除了使⽤内置函数外，JavaScript中还可以根据具体情况⾃定义函数，提⾼代码的复⽤性，
降低程序维护的难度。
具体语法结构如下：
function函数名([参数1，参数2,…])
{
函数体.....
}
function: 定义函数的关键字。
函数名: 由⼤⼩写字母、数字、下划线（_）和$符号组成，但是函数名不能以数字开头，且不能是JavaScript中的关键字。
参数: 是外界传递给函数的值，它是可选的，多个参数之间使⽤“,”分割。
函数体: 是专门⽤于实现特定功能的主体，由⼀条或多条语句组成。
返回值: 在调⽤函数后若想得到处理结果，在函数体中可⽤return关键字返回。
具体来看⼀下⾃定义函数的使⽤ ：
在代码中，定义⼀个id为btn的按钮和-个默认情况下隐藏的< div > 元素。其中，< div >元素的id值为demo。
<button id="btn">单击</button>
<div id="demo" >这是⼀个惊喜！</div> //
<script>// 为按钮添加事件，将隐藏的<div>元素设为可见。
function$(id){// 根据id获取元素对象
ElementById(id);
}
function show(){// 显⽰id为demo的元素
$('demo').style.display ='block';
}
$('btn').onclick = show;
</script>
在上述代码中，第5-7⾏封装的$()函数⽤于根据id获取元素对象，第8-10⾏封装的show()函数⽤于将id为demo的元素设置为可见。第11⾏代码⽤于为按钮添加单击事件，单击⽹页中触发时调show()函数处理。
2.参数设置
⽆参函数: 适⽤于不需要提供任何数据，即可完成指定功能的情况。
<script>
function greet(){
console.log('Hello everybody!');
}
</script>
在⾃定义函数时，即使函数的功能实现不需要设置参数，⼩括号“()”也不能够省略。
有参函数: 适⽤于开发时函数体内的操作需要⽤户传递数据的情况。
形参: 指的就是形式参数，具有特定的含义，在定义有参函数时设置的参数。
实参: 指的是实际参数，也就是具体的值，在函数调⽤时传递的参数。
通过实例1来观察：
<script>
function maxNum(a, b){
a =parseInt(a);
b =parseInt(b);
return a >= b ? a : b;
}
</script>
上述定义的maxNum()函数⽤于⽐较形参a和b的⼤⼩，⾸先在该函数体中对参数a和b
进⾏处理，确保参与⽐较运算的数据都是数值型，接着利⽤return关键字返回⽐较的结果。
通过实例2来观察：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool)</title>
</head>
<body>
<p>请点击其中的⼀个按钮，来调⽤带参数的函数。</p>
<button onclick="myFunction('Tom','Wizard')">点击这⾥</button>
<button onclick="myFunction('Bob','Builder')">点击这⾥</button>
<script>
function myFunction(name,job)
{
alert("Welcome "+ name +", the "+ job);
}
</script>
</body>
</html>
获取函数调⽤时传递的所有实参
适⽤于开发时函数体形参不确定的情况。
实现⽅式: 利⽤arguments对象，在函数体内可获取函数调⽤时传递的实参。
其他操作: length属性可获取实参的总数，具体实参值可利⽤数组遍历⽅式。
<script>
function transferParam(){
console.log(arguments.length);// 获取⽤户实际传递的参数数量
console.log(arguments);// 在控制台输出⽤户调⽤函数时传递的参数
}
</script>
ps: 含有默认值的参数与剩余参数
<script>
function greet(name, say ='Hi, I\'m '){
console.log(say + name);
}
</script>
函数的形参在设置时，还可以为其指定默认值。当调⽤者未传递该参数时，函数将使⽤默认值进⾏操作。
<script>
function transferParam(num1,...theNums){
theNums.unshift(num1);// 在剩余参数数组的头部添加第⼀个参数
console.log(theNums);// 在控制台输出⽤户调⽤函数时传递的参数
}
</script>
<script>
function transferParam(...theNums){
console.log(theNums);// 在控制台输出⽤户调⽤函数时传递的参数
}
</script>
函数定义时，还可⽤“…变量名”的⽅式动态接收⽤户传递的不确定数量的实参。
3.函数的调⽤
当函数定义完成后，要想在程序中发挥函数的作⽤，必须得调⽤这个函数。
函数的调⽤⾮常简单，只需引⽤函数名，并传⼊相应的参数即可。
函数声明与调⽤的编写顺序不分前后。
[参数1，参数2…]是可选的，⽤于表⽰形参列表，其值可以是零个、⼀个或多个。
<script>
function getSum(){// 定义函数
var sum =0;// 保存参数和
for(i in arguments){// 遍历参数，并累加
sum += arguments[i];
}
return sum;// 返回函数处理结果
}
console.log(getSum(10,20,30));// 函数调⽤
</script>
【案例】字符串⼤⼩写转换
代码实现思路:
编写HTML表单，设置两个⽂本框和两个按钮，⽂本框显⽰转换前后数据，按钮⽤于转换。
为按钮添加点击事件，并利⽤函数deal()处理。
编写deal()函数，根据传递的不同参数执⾏不同的转换操作。将转换后的数据显⽰到对应位置。
<!DOCTYPE html>
<html>
javascript全局数组<head>
<meta charset="UTF-8">
<title>字符串⼤⼩写转换</title>
</head>
<body>
<h2>⼤⼩写转换</h2>
<p>原数据：<input id="old"type="text"></p>
<p>
操作：
<input type="button"value="转⼤写"onclick="deal('upper')">
<input type="button"value="转⼩写"onclick="deal('lower')">
</p>
<p>新数据：<input id="new"type="text"></p>
<script>
function deal(opt){
var str = ElementById('old').value;
switch(opt){
case'upper':
str = UpperCase();
break;
case'lower':
str = LowerCase();
break;
}
}
</script>
</body>
</html>
4.变量的作⽤域
思考: 声明变量后就可以在任意位置使⽤该变量吗?
回答: 不是。
举例: 函数内var关键字声明的变量，不能在函数外访问。
<script>
function info(){
var age =18;
}
console.log(age);// 输出结果：Uncaught ReferenceError: age is not defined
</script>
总结: 变量的使⽤是有作⽤域范围的。
作⽤域划分: 全局作⽤域、函数作⽤域和块级作⽤域（ES6提供的）。
不同作⽤域对应的变量: 全局变量、局部变量、块级变量（ES6提供的）。
<script>
var a ='one';// 全局变量
function test(){
var a ='two';// 局部变量
console.log(a);
}
test();
for(let a =0; a <3;++a){// 块级变量（ES6新增）
console.log(a);
}
console.log(a);
</script>
在浏览器中访问demo3.html，运⾏结果如图4-4所⽰。从图中可以看出，调⽤函数test()
的输出结果为“two”，这是因为当局部变量与全局变量重名时，局部变量的优先级⾼于全局变量。
第8~10⾏代码利⽤let关键字定义了–个块级变量a，只在当前for 循环内有效，因此可在控
制台看到输出的结果为0、1和2。⽽第11⾏代码输出的变量a，既⽆权访问块级作⽤域中的值，⼜⽆权访问函数作⽤域内的值，从⽽只能输出第2⾏声明的全局作⽤域变量，结果为“one”。
全局变量：不在任何函数内声明的变量（显⽰定义）或在函数内省略var声明变量(隐式定义）都称为全局变量。
作⽤范围：它在同⼀个页⾯⽂件中的所有脚本内都可以使⽤。
局部变量：在函数体内利⽤var关键字定义的变量称为局部变量，它仅在该函数体内有效。
块级变量:ES6提供的let关键字声明的变量称为块级变量，仅在“蔡”中间有效，
如if、for或while语句等。
ps：垃圾回收机制
在JavaScript中，局部变量只有在函数的执⾏过程中存在，⽽在这个过程中会为局部变量在（栈或堆）
内存上分配相应的空间，以存储它们的值，然后在函数中使⽤这些变量，直到函数结束。⽽⼀旦函数执⾏结束，局部变量就没有存在必要了，此时JavaScript就会通过垃圾回收机制⾃动释放它们所占⽤的内存空间。
在开发中若要保留局部变量的值，可以通过以下两种⽅式实现:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。