做网站抬头,asp怎么新建网站,站长统计网站统计,专业网站建设课程文章导读#xff1a;AI 辅助学习前端#xff0c;包含入门、进阶、高级部分前端系列内容#xff0c;当前是 JavaScript 的部分#xff0c;瑶琴会持续更新#xff0c;适合零基础的朋友#xff0c;已有前端工作经验的可以不看#xff0c;也可以当作基础知识回顾。
上篇文章…文章导读AI 辅助学习前端包含入门、进阶、高级部分前端系列内容当前是 JavaScript 的部分瑶琴会持续更新适合零基础的朋友已有前端工作经验的可以不看也可以当作基础知识回顾。
上篇文章中瑶琴带大家学习和使用了函数看了上篇文章即使是小白的你也能自己创建简单的函数了解函数的基础定义和使用以及函数的作用这篇文章瑶琴带大家拆解 javascript 函数中重要的元素之一函数的参数。本篇文章内容较干建议配合热水食用。
函数的参数是在函数定义和调用时用于传递信息的一种机制。JavaScript 中的函数可以接受零个或多个参数这些参数可以用来定制函数的行为。
参数的本质是将实参传给形参。 1.函数参数的定义
函数参数是在函数声明或函数表达式中定义的变量它们被包含在圆括号 () 内。参数的个数可以是零个或多个。
function exampleFunction(param1, param2, param3) {// 函数体
}
2.函数参数的类型
JavaScript 中的函数参数不需要声明类型可以接受任意类型的值包括基本类型和对象。
function add(x, y) {return x y;
}console.log(add(2, 3)); // 输出 5
console.log(add(Hello, World)); // 输出 Hello World
3.默认参数
ES6 引入了默认参数允许为函数参数指定默认值。 function greet(name Guest) {console.log(Hello, ${name}!);
}greet(); // 输出 Hello, Guest!
greet(John); // 输出 Hello, John! 上面的例子给参数 name 设置了一个默认值 Guest调用函数时没有传入参数时会使用默认值
4. 剩余参数
剩余参数允许将不确定数量的参数表示为一个数组。剩余参数使用三个点 ... 后跟一个参数名。这个参数会成为包含了所有传递给函数的多余参数的数组。
1.剩余参数提供了更灵活、易读的方式来处理不定数量的参数。
2.剩余参数是真正的数组可以直接使用数组的方法。
function sum(...numbers) {
// numbers 是一个包含了所有传递给函数的多余参数的数组return numbers.reduce((total, num) total num, 0);
}console.log(sum(1, 2, 3, 4, 5)); // 输出 15
可以将剩余参数与普通参数一起使用但要确保普通参数位于剩余参数之前。
例子
function exampleFunction(arg1, arg2, ...rest) {console.log(arg1); // 第一个参数console.log(arg2); // 第二个参数console.log(rest); // 剩余的参数数组
}
剩余参数的使用场景 处理不确定数量的参数当函数需要接受任意数量的参数时剩余参数非常有用。 替代 arguments 对象在ES6之前通常使用 arguments 对象处理不定数量的参数而现在剩余参数提供了更灵活、易读的替代方案。
5. arguments 对象
在函数内部可以使用 arguments 对象访问所有传递给函数的参数即使在函数定义时没有明确列出这些参数。
arguments是每一个函数中独有的arguments是不会跨函数的 function showArguments() {for (let i 0; i arguments.length; i) {console.log(arguments[i]);}
}showArguments(1, two, [3, 4]); // 输出 1, two, [3, 4]
注意
arguments 不是一个真正的数组它是一个对象。要使用数组方法需要将其转换为数组Array.from(arguments) 或 Array.prototype.slice.call(arguments)。
6. 函数参数的顺序
函数参数的顺序很重要调用函数时要按照函数定义的顺序传递参数。
function fullName(firstName, lastName) {return ${firstName} ${lastName};
}console.log(fullName(John, Doe)); // 输出 John Doe
7.高阶函数和回调函数
高阶函数Higher-Order Function 高阶函数是指接受其他函数作为参数或者将函数作为返回值的函数。
JavaScript 中函数是一等公民因此可以作为参数传递给其他函数也可以从函数返回所以高阶函数在 JavaScript 中非常常见。
// 高阶函数示例
function multiplyBy(factor) {return function (number) {return number * factor;};
}const double multiplyBy(2);
const triple multiplyBy(3);console.log(double(5)); // 输出 10
console.log(triple(5)); // 输出 15 在上面的例子中multiplyBy 就是一个高阶函数它返回一个新的函数。
回调函数Callback Function
回调函数是作为参数传递给其他函数的函数它在异步操作完成或特定事件发生时被调用。在 JavaScript 中回调函数通常用于处理异步操作事件处理或者实现某种延迟执行。
// 回调函数示例
function fetchData(url, callback) {// 模拟异步请求setTimeout(function () {const data { name: John, age: 30 };callback(data);}, 1000);
}function displayData(data) {console.log(data);
}// 调用 fetchData并传递 displayData 作为回调函数
fetchData(https://example.com/api/data, displayData); 在这个例子中displayData 就是一个回调函数它在 fetchData 异步操作完成后被调用。
总结
高阶函数 是一个函数它可以接受函数作为参数或者返回一个函数。
回调函数 是作为参数传递给其他函数的函数用于在特定事件发生时被调用通常用于异步编程。
这两个概念经常一起使用因为高阶函数常常会接受回调函数作为参数。在 JavaScript 中它们是实现许多复杂功能和处理异步代码的重要工具。
8.arguments 和剩余参数的区别 arguments 对象是一个类数组对象包含了函数调用时传递的所有参数。 剩余参数是一个真正的数组包含了函数调用时传递的多余的参数。
function example() {console.log(arguments); // 输出类数组对象
}function example2(...rest) {console.log(rest); // 输出数组
}
区别总结 arguments 是对象剩余参数是数组。 剩余参数提供了更方便的语法和更好的可读性。 剩余参数只能出现在函数参数的最后而 arguments 对象中的参数顺序和数量与调用时的参数一致。
这篇文章干活满满对于初学者来说需要一定的时间消化学习相关知识点时一定要将文中的例子放在编辑器中执行自己动手实践能帮助你更好的理解。如果有什么不理解的地方可以给我留言瑶琴一定知无不言。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师加油。
最后啰嗦一句好记性不如烂笔头希望大家在学习的过程中养成做笔记的习惯形成自己的知识体系。
