010|JavaScript函数参数

上一节学习了如何通过变量引用函数。这一节我们来学习函数的另一个重要特性:函数参数。

现在有这样一个需求,有三个学生,名字分别叫David、James、Lucy,你需要写一个脚本,来表示对这三位学生的欢迎。期望输出的结果如下:

Hello David, Welcome to China!
Hello James, Welcome to China!
Hello Lucy, Welcome to China!

一种显示而易见的方案是,分别打印三条字符串。如下:

console.log(Hello David, Welcome to China!)
console.log(Hello James, Welcome to China!)
console.log(Hello Lucy, Welcome to China!)

在 第5课 中我们通过将同样的代码提取到一个函数中来减小代码量。上面这个问题,是否也可能通常将公共代码提取到函数中来完成优化点。请看下面的代码:

function sayHello(aName) // aName是函数参数引用
{
    console.log("Hello "+aName+", welcome to China!")
}

sayHello("David"); // "David"是函数参数
sayHello("James"); // "James"是函数参数
sayHello("Lucy"); // "Lucy"是函数参数

上面的代码中,我们看到函数定义的()(小括号)中加入了一个变量aName,这个变量叫做函数参数。

函数定义时()(小括号)中的变量叫做函数参数

而函数调用的()(小括号)中分别加入了“David”、"James"、"Lucy"变量。

先来看一下脚本运行结果 :

010|JavaScript函数参数_第1张图片
脚本运行结果

可以看到,上面脚本如期的完成的需求,输出了我们需要的字符串。

现在来看一下这背后的语法规则。

  1. JavaScript引擎遇到 “sayHello("Daivid")”调用时,发现这条语句向调用的函数传递了一个参数“David”。
  2. JavaScript引擎真正调用sayHello()函数,引擎将函数中定义的变量aName赋值为调用时传递的参数“David”。
  3. 因此函数体内的aName变量在此次调用时被赋值成了"David"。

当下面分别再次遇到“sayHello("James")”、“sayHell("Lucy")”时,JavaScript引擎同样执行了上面1-3的逻辑,分别将sayHello函数参数aName设置成了"James"以及"Lucy"。

因此,sayHello脚本也如期实现了需求。

传递多个参数

上面的例子每一次调用仅传递了一个参数。现在需改一下,既要输出名字也要输出年龄。如“David is 27 years old”,"James is 18 years old"。这时候就要使用多参数函数了。
多参数函数的语法和单参数类似,只是多个参数间使用,(逗号)分隔。我们来看一下使用多参数来解决此需求的实现:

function sayHello(aName, aAge) // 在aName后添加了,aAge
{
    console.log(aName+" is " +aAge +" years old!")
}

sayHello("David", 27); // 在"David"后面添加了,27
sayHello("James", 18); // 在"James"后面添加了,18
sayHello("Lucy", 20); // 在"Lucy"后面添加了,20

可以看到,多参数仅仅是在加在原参数后方,并与原参数使用,(逗号)分隔。
我们来看一下运行结果:

010|JavaScript函数参数_第2张图片
运行结果

好的,这节课讲解到这里。这节课我们学会了函数参数的初步用法。恭喜你!你越来越强大了!但依旧有许多JavaScript的疑难点等待着你。

什么是函数默认参数?
函数参数数量可以与调用时传参数量不一致吗?

请继续关注我的课程,我将在后续课程中帮大家依次解答上述问题。

想学计算机技术吗?需要1对1专业级导师指导吗?想要团队陪你一起进步吗?欢迎加我为好友!

我的微信

你可能感兴趣的:(010|JavaScript函数参数)