第 5 天：掌握 javascript 函数
日期：2024 年 12 月 12 日
欢迎来到 javascript 学习之旅的第五天！今天，我们将探讨 javascript 最基本、最强大的方面之一——函数。函数使我们能够封装逻辑、提高可重用性并有效地组织代码。读完本文后，您将深入掌握如何定义、调用和使用函数，并了解它们的作用域和闭包。
1.什么是函数？
函数是一个可重用的代码块，旨在执行特定任务。函数可以帮助您避免重复的代码，使您的程序更干净、更高效。
语法：
function functionname(parameters) {
// function body
return value; // optional
}
示例：
Ajax是目前比较流行的网站建设技术，尤其作为网站建设者来说，掌握它十分有必要，如果用原生Javascript开发则比较困难，还好有强大的Jquery加持，开发则变的十分简单和容易。
function greet(name) {
return `hello, ${name}!`;
}
console.log(greet("arjun")); // output: hello, arjun!
2.定义和调用函数
函数声明
函数是使用 function 关键字声明的。
立即学习“Java免费学习笔记（深入）”；
示例：
function add(a, b) {
return a + b;
}
console.log(add(3, 4)); // output: 7
函数调用
调用函数会执行其代码。
示例：
function sayhello() {
console.log("hello, world!");
}
sayhello(); // output: hello, world!
3.函数表达式
函数表达式将函数分配给变量。这允许像任何其他变量一样对待函数。
示例：
const multiply = function (x, y) {
return x * y;
};
console.log(multiply(5, 6)); // output: 30
4.箭头函数
箭头函数为编写函数提供了简洁的语法。它们在回调和较短的函数定义中特别有用。
语法：
const functionname = (parameters) => {
// function body
};
示例：
const divide = (a, b) => a / b; console.log(divide(10, 2)); // output: 5
如果函数只有一个参数或只有一个 return 语句，则可以省略括号和 return 关键字。
示例：
const square = x => x * x; console.log(square(4)); // output: 16
5. javascript 中的作用域
作用域 确定变量在代码中的可访问位置。
全球范围
在任何函数或块之外声明的变量都是全局作用域的。可以在脚本中的任何位置访问它。
示例：
let globalvar = "i am global";
function showglobalvar() {
console.log(globalvar);
}
showglobalvar(); // output: i am global
本地范围
函数内声明的变量的作用域为该函数的本地范围。
示例：
function showlocalvar() {
let localvar = "i am local";
console.log(localvar);
}
showlocalvar(); // output: i am local
// console.log(localvar); // error: localvar is not defined
块范围
使用 let 和 const，变量的作用域限于声明它们的块。
示例：
if (true) {
let blockscoped = "block scope!";
console.log(blockscoped); // output: block scope!
}
// console.log(blockscoped); // error: blockscoped is not defined
6.关闭
closure 是一个函数，即使在外部函数完成执行之后，它也会记住其封闭范围中的变量。
示例：
function outerfunction() {
let count = 0;
return function innerfunction() {
count++;
return count;
};
}
const counter = outerfunction();
console.log(counter()); // output: 1
console.log(counter()); // output: 2
console.log(counter()); // output: 3
这里，即使在outerfunction执行之后，innerfunction也会“记住”count变量。
7.现实世界的例子
示例1：温度转换
function celsiustofahrenheit(celsius) {
return celsius * 9/5 + 32;
}
console.log(celsiustofahrenheit(30)); // output: 86
示例 2：使用计数器闭包
function createcounter() {
let count = 0;
return {
increment: () => ++count,
decrement: () => --count,
};
}
const counter = createcounter();
console.log(counter.increment()); // output: 1
console.log(counter.decrement()); // output: 0
示例 3：数组中的箭头函数
const numbers = [1, 2, 3, 4]; const squares = numbers.map(num => num * num); console.log(squares); // Output: [1, 4, 9, 16]
8.要点
- 函数：封装逻辑并提高可重用性。
- 函数类型：声明、表达式和箭头函数。
- 作用域：了解全局、局部和块作用域，以便更好地管理变量。
- 闭包：利用闭包实现强大、内存高效的代码结构。
第五天练习
- 编写一个计算数字阶乘的函数。
- 创建一个基于闭包的计数器，它可以自行递增和重置。
- 使用箭头函数将温度列表从摄氏度转换为华氏度。
后续步骤
在第 6 天，我们将探索 数组和对象，这是 javascript 中的两种基本数据结构。敬请期待2024年12月13日！
