JavaScript 教程之JS函数+JS运算符+JS比较和逻辑运算符

最新推荐文章于 2024-07-04 18:25:41 发布

原创最新推荐文章于 2024-07-04 18:25:41 发布 · 540 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript 函数 #JavaScript 运算符 #调用带参数的函数 #带有返回值的函数 # 比较和逻辑运算符

Flutter 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了JavaScript中的函数概念及使用方法，包括无参函数、带参数的函数、返回值函数、局部与全局变量的区别；同时讲解了算术运算符、赋值运算符、比较运算符和逻辑运算符等基本运算符的用法。

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

一.JavaScript 函数

1.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

代码

<!DOCTYPE html>
<html>
	<head>
		<script>
			function myFunction() {
				alert("Hello World!");
			}
		</script>
	</head>

	<body>
		<button onclick="myFunction()">点击这里</button>
	</body>
</html>

效果

2.JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
这里是要执行的代码
}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

3.调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
这里是要执行的代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

代码

<!DOCTYPE html>
<html>
	<body>

		<p>点击这个按钮，来调用带参数的函数。</p>

		<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>

		<script>
			function myFunction(name, job) {
				alert("Welcome " + name + ", the " + job);
			}
		</script>

	</body>
</html>

效果

4.带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

语法

function myFunction()
{
var x=5;
return x;
}

上面的函数会返回值 5。

整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。

代码

<!DOCTYPE html>
<html>
	<body>

		<p>本例调用的函数会执行一个计算，然后返回结果：</p>

		<p id="demo"></p>

		<script>
			function myFunction(a, b) {
				return a * b;
			}

			document.getElementById("demo").innerHTML = myFunction(4, 3);
		</script>

	</body>
</html>

效果

5.局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

6.全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

7.JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

8.向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

二.JavaScript 运算符

1.JavaScript 算术运算符

算术运算符用于执行变量与/或值之间的算术运算。

给定 y=5，下面的表格解释了这些算术运算符：

2.JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

3.用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

在以上语句执行后，变量 txt3 包含的值是 "What a verynice day"。

4.对字符串和数字进行加法运算

代码

<html>
	<body>

		<script type="text/javascript">
			x = 5 + 5;
			document.write(x);
			document.write("<br />");
			x = "5" + "5";
			document.write(x);
			document.write("<br />");
			x = 5 + "5";
			document.write(x);
			document.write("<br />");
			x = "5" + 5;
			document.write(x);
			document.write("<br />");
		</script>

		<h3>规则是：</h3>

		<p><strong>如果把数字与字符串相加，结果将成为字符串。</strong></p>

	</body>
</html>

效果

原则

如果把数字与字符串相加，结果将成为字符串。

三.比较和逻辑运算符

比较和逻辑运算符用于测试 true 或 false。

1.比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

给定 x=5，下面的表格解释了比较运算符：

2.逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

3.条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2

例子

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。