JavaScript(简称JS)是一种广泛应用于网页开发的脚本语言,它可以通过在HTML页面中嵌入<script>标签来实现。
在JavaScript中,函数是一段可重复执行的代码块,通过给函数提供参数,我们可以在需要的时候调用函数并传入不同的数据。函数可以执行特定的任务,并且可以返回一个值。
函数在JavaScript中非常重要,几乎所有的程序都是由多个函数组成的。函数可以被定义为全局函数(在整个脚本中都可访问)或局部函数(只能在特定的代码块中访问)。
创建函数的语法如下:
function functionName(parameter1, parameter2, ...){
// 函数体
// 可以包含多条语句
return value; // 可选,用于返回值
}
- functionName:函数的名称,可以根据需要起名。
- parameter1, parameter2:函数的参数,用于接收传递给函数的值,参数可以有多个,多个参数之间用逗号分隔。
- 函数体:函数中要执行的代码,可以包含多条语句。
- return value:可选项,用于指定函数的返回值,当函数需要返回结果时使用。
调用函数的语法如下:
functionName(argument1, argument2, ...);
- functionName:要调用的函数的名称。
- argument1, argument2:传递给函数的实际值,参数的值是按照顺序传递的。
函数的调用会执行函数体中的代码,并且可以通过return语句返回一个值。
1-初识函数
在JavaScript中,函数是一段可重复使用的代码块。下面是一个简单的函数定义和调用的例子:
// 定义一个名为"greet"的函数,它接受一个参数"name"
function greet(name) {
// 函数体:返回一个包含问候语的字符串
return "Hello, " + name + "!";
}
// 调用函数并传递参数
let message = greet("Alice");
// 输出函数执行结果
console.log(message); // 输出:"Hello, Alice!"
在这个例子中:
greet
是一个函数,它接收一个参数name
。- 在函数体内,我们使用
return
关键字来指定该函数应该返回什么样的值(在这里是拼接好的问候语)。- 当调用
greet("Alice")
时,name
参数被赋值为"Alice"
,然后函数执行并返回相应的问候语。- 将返回的问候语赋值给变量
message
。- 最后通过
console.log
输出变量message
的内容。
2-函数实现九九乘法表
当然,下面是一个使用JavaScript编写九九乘法表的函数示例:
// 定义一个名为 printMultiplicationTable 的函数
function printMultiplicationTable() {
// 循环遍历1到9(九九乘法表的最大数)
for (let i = 1; i <= 9; i++) {
// 内层循环用于打印每一行
for (let j = 1; j <= i; j++) {
// 打印当前单元格的乘积
console.log(`${j} * ${i} = ${i * j}`);
}
// 在打印完一行后换行,准备打印下一行
console.log(""); // 空字符串表示换行
}
}
// 调用函数来打印九九乘法表
printMultiplicationTable();
当你运行这段代码时,它将在控制台输出经典的九九乘法表。每行显示从1到该行对应数字的乘法结果,并在每个结果之间以及行末添加换行以形成表格效果。
3-函数的参数
在JavaScript中,函数可以接受任意数量和类型的参数。下面是一个简单的示例,展示了一个接受两个数字作为参数并返回它们之和的函数:
// 定义一个名为addNumbers的函数,它接受两个参数a和b
function addNumbers(a, b) {
// 函数体内部计算两个数的和
let sum = a + b;
// 返回结果
return sum;
}
// 调用函数,并传入具体的参数值
let result = addNumbers(3, 5);
// 输出函数执行的结果
console.log(result); // 输出:8
在这个例子中:
addNumbers
函数接收两个参数a
和b
。- 在函数体内,我们创建了一个变量
sum
并赋值为a
和b
的和。- 使用
return
关键字将计算结果返回给调用者。- 当调用
addNumbers(3, 5)
时,a
的值是 3,b
的值是 5,函数会计算它们的和(即 8),并将这个结果返回给变量result
。
4-函数的参数案例
下面是一个JavaScript函数参数使用实例,该函数接受两个字符串作为参数,并将它们连接在一起:
// 定义一个名为concatenateStrings的函数,它接受两个参数:str1和str2
function concatenateStrings(str1, str2) {
// 函数体内部将两个字符串拼接在一起
let result = str1 + " " + str2;
// 返回拼接后的字符串结果
return result;
}
// 调用函数,并传入具体的字符串参数值
let combinedString = concatenateStrings("Hello", "World");
// 输出函数执行的结果
console.log(combinedString); // 输出:"Hello World"
在这个例子中:
concatenateStrings
函数接收两个字符串类型的参数str1
和str2
。- 在函数体内,我们创建了一个新的变量
result
,并将str1
、空格以及str2
连接起来形成一个新的字符串。- 使用
return
关键字将拼接好的字符串返回给调用者。- 当调用
concatenateStrings("Hello", "World")
时,函数会将 “Hello” 和 “World” 拼接成 “Hello World”,并将这个结果赋值给变量combinedString
。
5-函数的返回值
在JavaScript中,函数可以通过return
语句返回一个值。下面是一个简单的示例,该函数接受两个数字作为参数并返回它们的和:
// 定义一个名为calculateSum的函数,它接受两个参数a和b
function calculateSum(a, b) {
// 在函数体内计算两个数的和
let sum = a + b;
// 使用return关键字将计算结果返回给调用者
return sum;
}
// 调用函数,并接收返回值
let result = calculateSum(3, 5);
// 输出函数执行的结果
console.log(result); // 输出:8
在这个例子中:
calculateSum
函数接收两个参数a
和b
。- 函数内部计算
a
和b
的和,并将其存储在变量sum
中。- 使用
return sum;
将sum
变量的值作为函数的返回值。- 当调用
calculateSum(3, 5)
时,函数计算 3 加上 5 的和(即 8),并将这个结果作为返回值赋给result
变量。- 最后,我们通过
console.log(result);
输出函数返回的计算结果。
6-函数return案例
// 定义一个函数,该函数接收两个参数并返回它们的和
function addNumbers(num1, num2) {
// 计算两个数的和
let sum = num1 + num2;
// 使用return语句将计算结果返回给调用者
return sum;
}
// 调用addNumbers函数并将返回值赋给result变量
let result = addNumbers(5, 7);
// 输出函数返回的结果
console.log(result); // 输出:12
// 上述代码中:
// 函数addNumbers接受两个参数num1和num2,计算它们的和,并通过return语句返回这个和。
// 当调用addNumbers(5, 7)时,函数内部执行加法运算得到12,然后将这个结果作为返回值。
// 最后,我们将返回值12存储在result变量中,并打印出来。
在这个案例中,return
关键字用于从函数内部向调用者传递计算结果。当JavaScript引擎执行到return sum;
这行时,函数会立即停止执行剩余的代码,并将sum
的值作为函数调用的结果返回。
7-再谈函数-预解析
JavaScript函数的预解析是指在代码执行前,引擎会先读取整个作用域内的声明(变量和函数),并对它们进行处理。对于函数而言,即使函数定义出现在调用它的代码之后,只要函数是在同一个作用域内,那么该函数也能正常被调用。
下面是一个关于函数预解析的例子:
console.log(greeting()); // 输出 "Hello, World!"
function greeting() {
return "Hello, World!";
}
// 此时,尽管函数greeting的定义在调用它之后,
// 但由于JavaScript的函数预解析机制,此处仍能正确调用并输出结果。
在这个例子中,虽然greeting()
函数的调用在函数定义之前,但JavaScript引擎在执行代码前已经预解析了整个作用域,因此能够识别并正确执行greeting()
函数。不过,在实际编程中,为了提高代码可读性,通常建议将函数定义放在调用之前。
8-再谈函数-重名问题
在JavaScript中,函数的作用域分为全局作用域和局部作用域。在同一作用域内,如果定义了两个同名的函数,则后定义的会覆盖前一个定义,但在不同作用域内(例如全局作用域和函数作用域),则不会出现重名问题,而是根据作用域链查找。
以下是一个关于函数重名问题的例子:
// 全局作用域中的函数
function myFunction() {
console.log("这是全局作用域中的myFunction");
}
// 在同一全局作用域中重新定义该函数
myFunction = function() {
console.log("这是后定义的全局作用域中的myFunction");
};
// 调用时将输出 "这是后定义的全局作用域中的myFunction"
myFunction();
// --------------------------------------------
// 局部作用域中的重名函数示例
function outerFunction() {
// 局部作用域内的函数定义
function myFunction() {
console.log("这是局部作用域中的myFunction");
}
// 尝试在局部作用域内重定义myFunction
myFunction = function() {
console.log("这是尝试在局部作用域内重定义的myFunction,但并不会影响外部调用");
};
// 调用局部作用域内的myFunction
myFunction(); // 输出 "这是局部作用域中的myFunction"
// 尝试在局部作用域外部调用myFunction,由于局部作用域结束,这里的myFunction指向的是全局作用域中的myFunction
}
outerFunction();
myFunction(); // 输出 "这是后定义的全局作用域中的myFunction"
从这个例子可以看出,在全局作用域中,同名函数会被后面的定义覆盖。而在局部作用域中定义的函数,即使与全局作用域中的函数同名,它们也是相互独立的,互不影响。当局部作用域结束后,调用的仍然是全局作用域中的函数。
9-作用域-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// console.log()
var myname = "kerwin"
function test(){
console.log(nickname,myname)
var nickname = "rtjf"
console.log("test",nickname)
}
console.log(nickname)
</script>
<script>
console.log(myname)
// console.log(test)
test()
</script>
</body>
</html>
10-作用域-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var num = 100
function test1(){
// var num = 200
function child1(){
// var num = 300
num = 40
console.log(num)
}
child1()
}
// console.log("修改前,",num)
test1()
console.log("修改后,",num)
function test2(a,b){
return a+b
}
var res = test2(1,2)
console.log(res)
var result
function test3(a,b){
result = a+b
}
test3(1,2)
console.log(result)
</script>
</body>
</html>
最后求点赞,求分享,求抱抱…