4.js仔必备的函数八股-CSDN博客

本文链接：https://blog.csdn.net/m0_58085188/article/details/136468156

本文介绍了JavaScript中的函数定义、参数处理（包括`arguments`对象）、递归概念、斐波那契数列的实现、作用域规则、函数声明与表达式、头等函数、回调函数的应用以及立即执行函数的作用。

摘要由CSDN通过智能技术生成

1.手写一个函数要求有参数有返回值

function foo(num1,num2){
    var total = 0
    total = num1 + num2
    return total
}

 console.log(foo(5,10));

2.讲讲arguments参数以及使用场景(这点会在后续进行补充)

默认情况下，arguments对象是所有（非箭头）函数中都可用的局部变量
该对象中存放着所有的调用者传入的参数，从0位置开始，依次存放
arguments变量的类型是一个object类型，不是一个数组，但和数组的用法看起来相似

如果调用者传入的参数多于函数接收的参数，可以通过arguments去获取所有的参数

function foo(name,age){
    console.log("传入的参数",name,age);
    console.log("................");
    console.log(arguments);
    console.log("................");
    console.log(arguments[0])

    // 现在我对arguments进行遍历 把他的东西都写出来
    for(var i = 0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
}

foo("why",20,"广东",9)

结果显示如下

举个例子：

 function sum(){
        var tatal = 0
      for(var i = 0 ;i<arguments.length;i++){
        var num = arguments[i]
        tatal += num
      }
      console.log(tatal);
    }


    console.log(sum(23,3,23));
    
  //输出的结果为49

3.讲一讲什么是递归

举个很简单的例子，就是自己调用自己
在语言方面去解释递归：从前有座山，山上有座庙，庙里有个老和尚，正在和小和尚讲故事，讲的是什.....
递归是一个重要的编程思想：讲一个复杂的人物，转化成可以重复执行的相同任务
递归必须要有一个约束条件否则会栈溢出，消耗大量内存。
递归的思想来源于数学的一个 x^n = x * x^(n-1)

这个是没有给递归约条件的代码
// 递归调用
// 默认情况下会产生无限调用的情况
    function foo() {
      console.log("foo函数被执行了")
      foo()
    }

    foo()
    
 运行结果如下图所示 他会无限调用，到了栈溢出 消耗大量内存的时候，便出现了bug

请用递归实现斐波那契数列

首先说一下什么是斐波那契数列 就是如下
  数列: 1 1 2 3 5 8 13 21 34 55  ... x
  位置: 1 2 3 4 5 6 7  8  9  10  ... n
  
    function fibonacci(n){
        if(n === 1 ||  n ===2 ) return 1
        return fibonacci(n-1) + fibonacci(n-2)
    }
    console.log(fibonacci(6));

4.讲一讲ES5之前的局部变量和外部变量以及你对作用域的理解

作用域表示一些标识符的作用有效范围，作用域表示在函数内部定义的变量，只有函数内部可以访问
局部变量：函数内部的变量
外部变量：函数外部的变量

5.讲一讲访问变量的顺序

    var message = "Hello World"

    function sayHello() {
      // var message = "Hello Coderwhy"

      function hi() {
        // var message = "Hi Kobe"
        console.log(message)
      }
      hi()
    }

    sayHello()

先从函数内部寻找变量，找不到依次往外找

6.讲一讲函数声明和函数表达式的区别

函数表达式的写法如下
    var bar = function() {
      console.log("bar函数被执行了~")
    }
    bar()

函数表达式就是把函数当变量，function后面可以不加函数名
函数声明和函数表达式的区别在于
- 函数声明:在主代码流中声明为单独的语句的函数
- 函数表达式：在一个表达式或另一个语法结构中创建函数
- 注意函数声明的话，在被定义之前就可以被调用，这是因为内部算法的原因，解释如下：当js运行脚本的时候，会在脚本中寻找全局函数声明，并创建这些函数，但是函数表达式不属于函数声明

7.讲一讲JavaScript头等函数

js头等函数指的是函数在js语言中被视为一等公民
意味着函数可以像其他基本数据类型（变量，对象）一样被对待
可以赋值成一个变量

let myFunction = function() {
    console.log('Hello, World!');
};

可以作为参数传递

function callFunction(fn) {
    fn(); // 调用传递进来的函数
}

callFunction(myFunction); // 输出: Hello, World!

可以作为返回值
甚至可以存储在数据结构中
通常我们对头等函数的编程方式称之为函数式编程

8.讲一讲回调函数以及作用举个例子

回调函数就是利用了js的头等函数的思想，允许将一个函数作为参数传递给另一个函数
回调函数的作用主要体现在
- 异步操作处理：在执行如网络请求、文件读写等耗时的异步操作时，回调函数可以在操作完成后执行，以处理结果或执行后续操作。
- 事件处理：在事件驱动的编程中，回调函数用于响应用户操作或其他事件，如点击、滚动等。
以下是我手写的一个回调函数

        function foo(fn){
            fn()
        }
        function foo1(){
            console.log("foo1被调用了");
        }
       foo(foo1)

以下是我从网上找的对回调函数思想比较好理解的例子


    // 这是一个模拟的“做菜”函数
   function cookDish(callback) {
  // 模拟做菜需要一些时间
  setTimeout(function() {
    // 假设菜做好了，调用回调函数
    callback();
  }, 3000); // 假设做菜需要3秒
}

// 这是一个模拟的“取菜”函数
function pickUpDish() {
  console.log("菜做好了，可以吃了！");
}

// 你点了菜，并告诉服务员做好后叫你
cookDish(pickUpDish);

// 同时，你可以做其他事情，比如聊天
console.log("等待中，先和朋友聊天...");

9.讲一讲立即执行函数的作用，并手写一个

立即执行函数会创建一个独立的执行上下文环境，可以避免外界访问或修改内部的变量，也避免了对内部变量的修改
立即执行函数的话必须是一个表达式，不能是函数声明

    (function() { 
      console.log("立即执行函数被调用 ~")
    })()

 // 使用立即执行函数
    var btnEls = document.querySelectorAll(".btn")
    for (var i = 0; i < btnEls.length; i++) {
      var btn = btnEls[i];
      (function(m) {
        btn.onclick = function() {
          console.log(`按钮${m+1}发生了点击`)
        }
      })(i)
    }

    console.log(i)