函数
2025-02-17
概述
- 使用一个带有一对圆括号
()的代码块的 js 结构
函数是 JavaScript 中的基本构建块，它是一段可重用的代码块，用于执行特定任务。函数的特点：
- 代码复用
- 参数传递
- 返回值
- 作用域隔离
浏览器内置函数
字符串操作
// 替换字符串
const myText = "Hello world"
const newString = myText.replace("world", "earth")
console.log(newString) // 输出: Hello earth数组操作
// 数组转字符串
const myArray = ["a", "b", "c"]
const madeAString = myArray.join(",")
console.log(madeAString) // 输出: a,b,c数学运算
// 生成随机数
const myNumber = Math.random()
console.log(myNumber) // 输出: 0-1 之间的随机数函数与方法
| 类型 | 说明 | 示例 |
|---|---|---|
| 函数 | 独立的功能块 | function greet() {} |
| 方法 | 对象的成员函数 | object.method() |
更多内置函数和方法：JavaScript 标准内置对象
调用函数
基本语法
function myFunction() {
alert("你好")
}
myFunction() // 调用函数函数参数
参数类型
| 类型 | 说明 | 示例 |
|---|---|---|
| 必需参数 | 必须传入的参数 | function(a, b) {} |
| 可选参数 | 可以省略的参数 | function(a, b = 1) {} |
| 剩余参数 | 接收多个参数 | function(...args) {} |
参数示例
// 默认参数
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
// 多个参数
function add(a, b = 0) {
return a + b;
}匿名函数和箭头函数
匿名函数
命名函数
function myFunction() {
alert("hello")
}匿名函数
// 基本形式
(function () {
alert("hello")
})
// 作为参数
element.addEventListener("click", function() {
alert("Clicked!");
});事件处理示例
// 命名函数方式
function logKey(event) {
console.log(`You pressed this "${event.key}"`)
}
textBox.addEventListener("keydown", logKey)
// 匿名函数方式
textBox.addEventListener("keydown", function (event) {
console.log(`You pressed this "${event.key}"`)
})箭头函数
基本语法
// 完整语法
textBox.addEventListener("keyword",(event)=>{
console.log(`You pressed this "${event.key}"`)
})
// 单参数简写
textBox.addEventListener("keyword", event => {
console.log(`You pressed this "${event.key}"`)
})
// 单行返回值简写
const originals = [1,2,3]
const doubled = originals.map(item=>item*2)
console.log(doubled) // 输出: [2,4,6]等价写法
// 箭头函数完整写法
const double = (item) => {
return item * 2;
};
// 传统函数写法
function doubleItem(item) {
return item * 2
}实际应用示例
<input id='textBox' type="text" />
<div id="output"></div>// 实时显示用户输入
const textBox = document.querySelector("#textBox")
const output = document.querySelector("#output")
textBox.addEventListener("keydown", (event) => {
output.textContent = `You pressed this "${event.key}"`
})