【js】超详细js函数基础

简介: 【js】超详细js函数基础


函数的返回值 —return

函数:函数是被设计为执行特定任务的代码块

函数的返回值:

  • 当调用某个函数,函数就会返回一个结果
  • 当函数需要返回数据时,用return关键字
  • 语法:
`        function fn( ){
           return 20;
        }`

注意:

1.return 后面的代码不会被执行

2. return能立即结束当前函数,return 不能换行写

3.return 函数没有return,函数默认返回undefined

函数返回值练习

1.求和函数的写法

//求和函数的写法
        function getTotalPrice(x, y) {
            return x + y;
            //return 后面的代码不会被执行
            //return 不能换行写 
            //return 函数没有return,函数默认返回undefined
        }
        let sum = getTotalPrice(1, 2);
        console.log(sum);

2.求任意数组中的最大值并且返回这个最大值

//求任意数组中的最大值并且返回这个最大值
        function getArrMax(arr = []) {
            //先准备一个max变量存储数组的第一个值
            let max = arr[0];
            //2.遍历比较
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i];
                }
            }
            //返回值
            return max
        }
      let max =  getArrMax([1, 3, 5, 7, 9]);
     console.log(max);

什么是箭头函数?

箭头函数:是一种更简洁的匿名函数写法。

param1表示参数列表

statements表示函数内的语句块

expression表示函数内包含一个表达式

没有参数时,需要用空的小括号表示

0=>{statements}

语法:

function (param1,param2,paramN){//param1表示参数列表
        return expressions;
      }
  1. 更简短的函数并且不绑定this
  2. 箭头函数不绑定Arguments 对象

箭头函数案例

//使用箭头函数定义一个求平方的函数
      var fn=function(x){
        return x*x;
      }

函数调用有哪些

1.方法调用

点语法调用对象obj方法:increment()

var obj={
        value :0,
        increment:function(inc){
          this.value+=typeof inc === 'number' ? inc:1;
        }
      }
      obj.increment();
      console.log(obj.value);//1
      obj.increment(2);
      console.log(obj.value)//3

2. 动态调用

  1. call()方法
    语法:function.call(thisobj,args...)
    function:表示调用该函数
    thisobj:表示绑定对象
    args:表示将传递给被函数的参数
    call:只能接收多个参数列表
  2. apply()
    语法:function.apply(thisobj,[args])
    apply:只能接收一个数组或者伪类数组,数组元素将作为参数列表传递给被调用的函数

实例

//动态调用Math的max()方法计算数组的最大值元素
      var a = [23,54,98,55,33] //声明并初始化数组
      var m = Math.max.apply(Object,a)//调用系统函数max
      console.log(m);//98

函数的参数

  1. 形参:声明函数时写在函数名右边小括号里
  2. 实参:调用函数写在函数名右边小括号里的
    实例:
function f(a,b){//设置形参a和b
        return a+b;
       }
       var x=1,y=2;//声明并初始化变量
       console.log(f(x,y));//返回3,调用函数并传递实参

如何使用arguments?

定义:

⏺️ 在函数内部天生自带变量

⏺️ 表示所有实参的集合

arguments的属性

⏺️length:表示长度,arguments 里面有多少个数据

其实就是你的函数调用多少个实参

它是一个读写的属性

读取的时候就是读取arguments的长度

设置的时候是设置arguments的长度

🍐

`//使用for循环遍历arguments
   function fn(){//m定义没有形参的函数
    for(var i=0;i<arguments.length;i++){//遍历arguments对象
        console.log(arguments[i])//显示制定下标的实参的值
        }
   }
   fn(4,5,7,9)//显示每个传递的实参

注意:arguments对象 是一个伪类数组,不能够继承Array的原型方法,可以使用数组下标的形参访问,如arguments[0] 表示第一个实参,下标值从0开始,直到arguments.length-1,length是arguments对象的属性,表示函数包含的实参个数,arguments对象可以允许更新其包含的实参值

什么是剩余参数?

剩余参数:如果一个函数最后一个形参以…为前缀,则他表示剩余参数,将传递的所有剩余的实参组成一个数组,传递给形参args

语法:

` function (a,b,...,args){
   //函数体
   }`

剩余参数与arguments对象之间的区别:

✨ 剩余参数只包含没有对应形参的实参,而arguments对象包含所有实参

✨arguments对象是一个伪类数组,而剩余参数是真正的数组类型

✨ arguments对象有自己的属性,如callee

🍐:使用剩余参数设计一个求和函数

var fn = (x, y, ...rest) => {
            var i, sum = x + y;
            for (var i = 0; i < rest.length; i++) {
                sum += rest[i]
            }
            return sum;
        }

函数的作用域

⏺️全局作用域

⏺️局部作用域

🍐:

var var1=1;//全局变量
    function add(){
        var var2=2; //局部变量
        document.write("add函数内,全局变量var1="+var1+"<br>");//add函数内,全局变量var1=1
        document.write("add函数内,全局变量var2="+var2+"<br>");//add函数内,全局变量var2=2
    }
    add();
    document.write("add函数外,局部变量var1="+var1);//add函数外,局部变量var1=1
    document.write("add函数外,局部变量var2="+var2);//add函数外,局部变量var2=2

定义作用域

作用域表示变量的作用范围,可见区域

⏺️词法作用域:根据代码结构关系确定作用域,可确定每个变量的可见范围和有效区域

⏺️执行作用域:当代码被执行时,才能够确定变量的作用范围和可见性,它是动态作用域

函数的私有量

  • 函数参数
  • arguments
  • 局部变量
  • 内部函数
  • this

注意:this> 局部变量>形参>arguments> 函数名

函数作用域是静态的,函数的调用是动态的

什么是闭包函数?

闭包函数:他是一个持续存在的函数上下文运行环境,典型的闭包体是一个嵌套结构函数。内部函数应用外部函数的私有变量,同时内部函数又被外界引用,当外部函数被调用后,就形成闭包,这个函数就被称为闭包函数

🍐典型的闭包结构如下8

function f(x){//外部函数
        return function(y){//内部函数,通过返回内部函数,实现外部引用
            return x+y;//访问外部函数的参数
        }
       }
       var c=f(5)//调用外部函数,获取应用内部函数
       console.log(c(6))//11  调用内部函数,跟外层函数的参数继续存在

总结

✨函数是JS编程中相当重要的一部分,它可以让我们封装代码并重复使用。当定义一个函数时,我们需要指定它的名字、参数和函数体;当调用一个函数时,我们需要传递参数并获取其返回值。希望通过这篇博客让你对JS函数有更好的了解。😄😊

目录
相关文章
|
4天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
4天前
|
JavaScript 前端开发 网络架构
函数柯里化:JavaScript中的高级技巧
函数柯里化:JavaScript中的高级技巧
|
4天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
4天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
4天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
5天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
5天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
12 0
|
5天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
15 1
|
5天前
|
JavaScript 前端开发 网络架构
JavaScript中的箭头函数是一种新的函数表达形式
【5月更文挑战第9天】JavaScript的箭头函数以简洁语法简化函数定义,其特性包括:1) 不绑定自身this,继承上下文的this,适合回调和事件处理;2) 没有arguments对象,需用剩余参数语法访问参数;3) 不能用作构造函数,无new调用;4) 没有prototype属性,不支持基于原型的继承。箭头函数在特定场景下优化了this处理,但使用时要注意与普通函数的差异。
12 2
|
5天前
|
JavaScript 前端开发
js的一些内置函数
js的一些内置函数
8 1