JavaScript条件语句
在JavaScript中,条件语句用于基于某个条件执行不同的代码块。最常用的条件语句是if
语句,但它也有其他变体,如if...else
、if...else if...else
、switch
等。
1. if
语句
if
语句用于在条件为真时执行代码块。
var s = 70;
if (s >= 60) {
console.log("通过考试");
}
2. if...else
语句
if...else
语句用于在条件为真时执行一段代码,否则执行另一段代码。
var s = 55;
if (s >= 60) {
console.log("通过考试");
} else {
console.log("未通过考试");
}
3. if...else if...else
语句
if...else if...else
语句用于检查多个条件,并根据第一个为真的条件执行相应的代码块。
var s = 75;
if (s >= 90) {
console.log("优秀");
} else if (s >= 60) {
console.log("通过考试");
} else {
console.log("未通过考试");
}
4. switch
语句
switch
语句用于基于不同的案例值执行不同的代码块。虽然switch
主要用于比较字符串或数值常量,但它也可以与更复杂的表达式一起使用。
var grade = "B";
switch (grade) {
case "A":
console.log("优秀");
break;
case "B":
console.log("良好");
break;
case "C":
console.log("中等");
break;
case "D":
console.log("及格");
break;
default:
console.log("成绩无效");
}
在switch
语句中,break
关键字用于防止代码自动执行到下一个case
。如果不使用break
,则会出现“穿透”(fall-through)行为,即执行完一个case
的代码后,会继续执行下一个case
的代码,直到遇到break
或switch
语句的末尾。
注意:在使用switch
语句时,通常建议为所有case
都添加break
,以避免意外的穿透行为。但是,在某些情况下,你可能想要利用穿透行为来执行多个case
的代码块。在这种情况下,你可以省略某些case
后面的break
。
JavaScript函数
函数的基本结构
在JavaScript中,函数是一段可重用的代码块,它执行特定的任务。函数的基本结构包括function
关键字、函数名、参数列表(可选)和函数体。以下是JavaScript函数的基本结构:
function functionName(parameter1, parameter2, ...) {
// 这里是函数体,即函数要执行的代码
// 可以使用参数(如果有的话)
// ...
// 函数体结束
return returnValue; // 可选,用于返回函数执行的结果
}
function
:这是声明函数的关键字。functionName
:这是你给函数起的名字,也就是函数标识符。你可以使用这个名字来调用函数。parameter1, parameter2, ...
:这些是函数的参数,它们是可选的。在函数被调用时,这些参数会接收传入的值。在函数体内,你可以使用这些参数。functionBody
:这是函数体,包含了函数要执行的代码。你可以在这里定义变量、调用其他函数、执行计算等。return returnValue;
:这也是可选的。return
语句用于从函数中返回一个值。returnValue
是你要返回的值。如果函数没有return
语句或return
语句没有返回值,那么函数将返回undefined
。
下面是一个简单的示例,这个函数接受两个参数并返回它们的和:
function addNumbers(num1, num2) {
var sum = num1 + num2;
return sum;
}
// 调用函数并打印结果
console.log(addNumbers(5, 3)); // 输出:8
函数的调用
在JavaScript中,定义函数之后,你需要通过函数名来调用它。调用函数时,你需要使用圆括号()
,并在其中传递任何必要的参数(如果函数需要的话)。函数被调用时,它的代码块会执行,并且可以返回一个值(如果函数有return
语句的话)。
下面是一些函数调用的例子:
不带参数的函数调用
function sayHello() {
console.log("Hello, world!");
}
// 调用函数
sayHello(); // 输出:Hello, world!
带参数的函数调用
function greet(name) {
console.log("Hello, " + name + "!");
}
// 调用函数并传递参数
greet("Alice"); // 输出:Hello, Alice!
greet("Bob"); // 输出:Hello, Bob!
调用带有返回值的函数
function add(a, b) {
return a + b;
}
// 调用函数并接收返回值
var result = add(5, 3);
console.log(result); // 输出:8
链式调用(如果函数返回对象)
在一些情况下,函数会返回一个对象,你可以在这个返回的对象上立即调用另一个方法,这称为链式调用。
function createPerson(name) {
return {
name: name,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
}
// 链式调用
createPerson("Charlie").greet(); // 输出:Hello, my name is Charlie
函数作为参数(高阶函数)
在JavaScript中,函数也可以作为参数传递给其他函数。
function callFunction(fn, arg) {
fn(arg);
}
function printNumber(num) {
console.log(num);
}
// 调用callFunction,并将printNumber作为参数传递
callFunction(printNumber, 42); // 输出:42
立即执行的函数表达式(IIFE)
你也可以定义并立即调用一个函数,这通常用于创建局部作用域和避免全局变量污染。
(function() {
var localVariable = "I'm local!";
console.log(localVariable); // 输出:I'm local!
})();
// 尝试访问localVariable将会失败,因为它在函数作用域内
// console.log(localVariable); // ReferenceError: localVariable is not defined
构造函数调用(使用new
关键字)
当函数用作构造函数并创建新对象时,可以使用new
关键字。
function Person(name, age) {
this.name = name;
this.age = age;
}
// 使用new关键字调用构造函数
var john = new Person("John", 30);
console.log(john.name); // 输出:John
console.log(john.age); // 输出:30
函数的返回值
在JavaScript中,函数可以返回一个值给调用它的代码。这个返回值是由函数体中的return
语句指定的。如果函数没有return
语句,或者return
语句后面没有跟任何值,那么函数将返回undefined
。
下面是一些关于函数返回值的例子:
简单的返回值
function add(a, b) {
return a + b;
}
var sum = add(5, 3); // sum 现在是 8
console.log(sum); // 输出:8
没有返回值的函数
function sayHello() {
console.log("Hello, world!");
}
var result = sayHello(); // sayHello 被调用,但没有返回值,所以 result 是 undefined
console.log(result); // 输出:undefined
返回多个值(通过对象或数组)
虽然JavaScript函数不能直接返回多个值,但你可以通过返回一个对象或数组来模拟这个行为。
function getPersonInfo() {
return {
name: "Alice",
age: 30,
city: "New York"
};
}
var info = getPersonInfo(); // info 是一个对象,包含了多个“返回值”
console.log(info.name); // 输出:Alice
console.log(info.age); // 输出:30
console.log(info.city); // 输出:New York
函数提前返回
return
语句不仅可以用于返回值,还可以用于提前退出函数。这在某些条件下非常有用,比如当你想在函数执行完所有逻辑之前停止它时。
function checkAge(age) {
if (age < 18) {
return "You are too young.";
}
// 只有在 age 大于等于 18 时才会执行以下代码
return "You are old enough.";
}
var message = checkAge(15); // message 现在是 "You are too young."
console.log(message); // 输出:You are too young.
返回值与异步操作
需要注意的是,对于异步操作(如AJAX请求、setTimeout等),函数可能不会立即返回最终的结果。在这些情况下,你通常会使用回调函数、Promises或async/await来处理异步返回值。
// 使用 Promise 的例子
function fetchData() {
return new Promise((resolve, reject) => {
// 模拟异步操作,如AJAX请求
setTimeout(() => {
resolve("Data fetched successfully!");
}, 1000);
});
}
fetchData().then(data => {
console.log(data); // 输出:Data fetched successfully!(在1秒后)
});