JS基础循环和函数怎么会写
循环和函数是JavaScript编程中的基础知识，掌握它们有助于提高代码的可读性和可维护性。 循环用于重复执行代码块，函数则是组织代码、实现模块化和复用的重要工具。for循环、while循环、do…while循环、函数声明、函数表达式、箭头函数是其中的几个核心概念。接下来我们将详细探讨这些概念。
一、FOR循环
基本语法和使用场景
for循环是JavaScript中最常用的循环结构之一。它的基本语法如下：
for (initialization; condition; increment) {
// 代码块
}
- initialization（初始化）：在循环开始前执行一次。
- condition（条件）：每次循环迭代前进行评估，当条件为
true时，执行代码块，为false时退出循环。 - increment（增量）：每次循环迭代后执行。
for (let i = 0; i < 10; i++) {
console.log(i);
}
上述代码将从0数到9，每次循环输出一个数字。
嵌套循环
嵌套for循环是指一个for循环内包含另一个for循环，用于处理多维数组等复杂数据结构。
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
console.log(`i = ${i}, j = ${j}`);
}
}
该示例将输出所有 i 和 j 的组合。
二、WHILE循环
基本语法和使用场景
while循环在条件为 true 时持续执行代码块，直到条件为 false。
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
上述代码同样从0数到9，每次循环输出一个数字。
无限循环和跳出
如果条件始终为 true，则会形成无限循环。可以使用 break 语句强制退出循环。
let i = 0;
while (true) {
console.log(i);
i++;
if (i >= 10) break;
}
三、DO…WHILE循环
do...while循环至少执行一次代码块，然后在条件为 true 时继续执行。
let i = 0;
do {
console.log(i);
i++;
} while (i < 10);
该示例将输出从0到9的数字。
四、函数声明和表达式
函数声明
函数声明使用 function 关键字定义，有函数名和参数。
function add(a, b) {
return a + b;
}
函数表达式
函数表达式是将函数赋值给变量。
const add = function(a, b) {
return a + b;
};
五、箭头函数
箭头函数是ES6引入的简洁语法，省略了 function 关键字。
const add = (a, b) => a + b;
箭头函数不绑定自己的 this 值，适用于回调函数和简短的函数。
六、函数作用域和闭包
函数作用域
JavaScript中的函数有自己的作用域，函数内定义的变量在函数外无法访问。
function testScope() {
let x = 10;
console.log(x); // 10
}
testScope();
console.log(x); // Uncaught ReferenceError: x is not defined
闭包
闭包是指函数可以访问其外部作用域的变量，即使这个函数在其外部作用域之外执行。
function makeCounter() {
let count = 0;
return function() {
return count++;
};
}
const counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1
七、递归函数
递归是指函数调用自身，用于解决分治问题。
function factorial(n) {
if (n === 0) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
上述代码计算了5的阶乘。
八、异步函数
回调函数
回调函数是异步编程的基础，用于处理异步操作的结果。
function fetchData(callback) {
setTimeout(() => {
callback('data');
}, 1000);
}
fetchData((data) => {
console.log(data); // 'data'
});
Promise
Promise是ES6引入的异步编程解决方案，可以链式调用。
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
fetchData().then((data) => {
console.log(data); // 'data'
});
async/await
async/await是Promise的语法糖，使异步代码更易读。
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
async function main() {
const data = await fetchData();
console.log(data); // 'data'
}
main();
九、函数式编程
高阶函数
高阶函数是指接受函数作为参数或返回函数的函数。
function map(arr, fn) {
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(fn(arr[i]));
}
return result;
}
console.log(map([1, 2, 3], (x) => x * 2)); // [2, 4, 6]
函数组合
函数组合是将多个函数合并成一个函数，从右到左执行。
const compose = (f, g) => (x) => f(g(x));
const add = (x) => x + 1;
const square = (x) => x * x;
const addThenSquare = compose(square, add);
console.log(addThenSquare(2)); // 9
十、模块化
ES6模块
ES6引入了模块化语法，使代码更易于组织和复用。
// math.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5
CommonJS模块
Node.js使用CommonJS模块系统，通过 require 和 module.exports 实现模块化。
// math.js
function add(a, b) {
return a + b;
}
module.exports = { add };
// main.js
const { add } = require('./math');
console.log(add(2, 3)); // 5
十一、综合示例
以下是一个综合示例，展示了如何使用循环和函数解决实际问题。
// 计算数组中每个数字的阶乘
const numbers = [1, 2, 3, 4, 5];
// 使用函数计算阶乘
function factorial(n) {
if (n === 0) return 1;
return n * factorial(n - 1);
}
// 使用map高阶函数计算每个数字的阶乘
const factorials = numbers.map(factorial);
console.log(factorials); // [1, 2, 6, 24, 120]
结论
掌握循环和函数是JavaScript编程的基础，它们不仅能够简化代码，还能提高代码的可读性和可维护性。通过灵活运用这些基本概念，我们可以解决各种复杂的问题，实现高效的程序设计。
相关问答FAQs：
1. 如何在JavaScript中使用循环？
JavaScript中有多种循环语句可供使用，例如for循环、while循环和do-while循环。你可以根据具体需求选择合适的循环语句来实现重复执行某段代码的功能。
2. 如何在JavaScript中定义和使用函数？
要定义函数，可以使用function关键字后跟函数名、参数列表和函数体的方式。然后，你可以通过函数名调用函数并传递参数来执行函数体中的代码。函数还可以返回值，以便在调用函数时获取结果。
3. JavaScript中的递归函数是什么？如何编写递归函数？
递归函数是指在函数体内调用自身的函数。它可以解决一些需要重复执行相同或类似操作的问题。编写递归函数时，需要定义递归的终止条件，以避免无限循环。递归函数可以通过不断调用自身来处理问题的子问题，直到达到终止条件为止。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3929281
