通过前面三节的讲解，我们已经知道如何声明并调用函数，可是，我们发现一个问题，当函数声明后，每次调用的结果都是一样的，而我们最终想要达到的目的是，通过给函数体传递参数来控制函数的输出结果。
本节我们就来讲一下如何给函数传参的问题。
下面我们再封装一个函数，该函数的功能是：计算1到100之间数字相加的和，如下：
function fn(){
var total = 0;
for(var i=1; i<=100; i++){
total += i;
}
console.log(total);
}
fn();
可以看到，该函数的执行结果为5050
假如，现在我们想要算出1到200之间数字的和怎么办呢？我们可以这样做，如下：
function fn(n){
var total = 0;
for(var i=1; i<=n; i++){
total += i;
}
console.log(total);
}
//调用函数并且传参数
fn(100); // 1-100
fn(200); // 1-200
解释一下：
- 上面我们在定义函数时，声明了一个参数n 。调用函数时给函数传了一个值，函数体内又使用了这个值，这就相当于给函数体内的n赋值了，这就是传参的全过程。
- 定义函数时，放在函数名称小括号中的，叫做形参（形式参数）,个数随意
- 调用函数时，放在函数名称小括号中的值，叫做实参（实际参数）,个数随意
- 多个参数用逗号隔开，实参和形参按照顺序 一一对应
下面，我们继续优化上面的函数，让它实现计算m到n之间数字的和。通过本实验，希望大家可以彻底理解函数传参的完整原理，如下：
//定义一个函数，计算 m - n 之间的数的和
//定义函数时，声明形参m和n，调用函数时，传入实参，等同于给参数m和n赋值
function fn(m,n){
// console.log(m, n);
var total = 0;
for(var i=m; i<=n; i++){
total += i;
}
console.log(total);
}
//调用函数并且传参数
// var a = 100, b=200;
// fn(a,b);
fn(100, 200);
fn(200, 300);
//形参和实参个数，可以不相同
//实参少传了，函数本身语法没错，但是函数里面的代码可能报错
fn(200, 300, 400);
fn();
到此，关于函数传参的问题就讲完了，下面我们看一下参数默认值的问题。
关于默认值的设置分为ES5语法的设置方法和ES6的设置方法。
ES5的参数默认值
<!DOCTYPE html>
<html>
<head>
<title>ES5中参数默认值的设置方法</title>
</head>
<body>
<script type="text/javascript">
//ES5中，调用时如果不传实参，形参的值是undefined，所以可以在函数内做一个判断，如果是undeifned则给形参赋个值。
function f2(username){
var username = username || 'tom';
console.log(username)
}
f2();
f2('berry');
</script>
</body>
</html>
ES6的参数默认值
//定义函数时给形参赋值，意思是：当没有实参传入时，这个值就是默认调用的值。
function fn(m=100,n=200){
// console.log(m, n);
var total = 0;
for(var i=m; i<=n; i++){
total += i;
}
console.log(total);
}
//传入实参，按照实参进行运算
fn(200, 300);
//不传实参，按照默认参数进行运算
fn();
ok，本节到此结束，以上所讲的内容，大家务必扎实掌握，我们讲的这些都是最基本的语法规则。
|
窥视卡
雷达卡
发表于 2023-1-22 13:14:30
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-15 03:40:17
