本文详解JavaScript函数参数机制。JS不检查参数类型，允许任意值传入；参数不足时值为undefined，多余参数被忽略。通过arguments对象可处理任意数量参数，需注意其非数组特性。此外，函数可作为对象传递，利用length属性可获取形参定义数量，实现高阶函数调用。
JavaScript函数参数概述
本文整理自金旭亮老师网易云课堂的课程笔记，旨在记录关键知识点以便后续复习。
函数的参数
参数类型与数量处理机制
在JavaScript中，函数对传入的参数值不进行类型检查，任何类型的数据均可作为参数传递。若调用时提供的参数数量少于定义数量，未赋值的参数将默认为undefined；若提供的参数数量多于定义数量，超出部分的参数将被自动忽略。
//调用函数时传入的实际参数
function add(num1, num2) {
return num1 + num2;
}
//一切正常的调用方式
console.info(add(1, 2)); //3
//不检查参数的类型，字串和数字可以混用
console.info(add("1", 2)); //12
//多余参数被忽略
console.info(add(1, 2, 3)); //3
//少的参数被视为undefined
//1+undefined=NaN
console.info(add(1)); //NaN
参数缺失检测与默认值处理
检测参数是否缺失 判断是否为 undefined
//检测参数是否缺失
function sayHello(name, message) {
if (typeof message === 'undefined') {
message = '你好!';
}
console.info(name + "，" + message);
}
sayHello("贾君鹏", "你妈喊你吃饭");
sayHello("贾君鹏"); //贾君鹏,你好!
arguments对象与任意参数处理
保存参数的arguments对象
利用arguments对象，可以编写支持任意数量参数的函数。虽然arguments在外观上类似数组，但它并非真正的Array实例，因此无法直接使用数组原型上的方法。
//保存参数的arguments对象
function sumNumbers() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
console.info(sumNumbers(1, 2)); //3
console.info(sumNumbers(1, 2, 3)); //6函数length属性与实参形参对比
函数对象的length属性
arguments.length 函数接收的实参个数 函数名.length 函数定义的形参
//函数对象的length属性
function sayName(name){
console.info(name);
}
function sum(num1, num2){
return num1 + num2;
}
function sayHi(){
console.info("hi");
}
console.info(sayName.length); //1
console.info(sum.length); //2
console.info(sayHi.length); //0
函数作为参数的高阶应用
作为参数的函数对象 函数是一个对象，可以作为另一个函数的参数
//作为参数的函数对象
function callSomeFunction(func, argu) {
return func(argu);
}
function getGreeting(name) {
return "Hello, " + name;
}
var result = callSomeFunction(getGreeting, "jxl");
console.info(result); //Hello,jxl
使用命名/匿名函数作为函数参数
var callTwice = function (otherFunc) {
otherFunc();
otherFunc();
};
callTwice(function () {
console.info("this is a function");
});
函数作为参数实例:
<script>
var button = document.getElementById('btnClick');
var result = document.getElementById('result');
var clickCount = 0;
button.addEventListener('click', function () {
clickCount++;
result.setAttribute('value', clickCount+': Hello,world!');
})
</script>
以上所述就是本文的全部内容了，希望大家能够喜欢。