JavaScript函数参数详解:类型、数量与arguments对象

作者:青柠时间:2026-10-29 12:29:40浏览:420

本文详解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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

作者最新文章