【js】超详细js函数基础

这篇具有很好参考价值的文章主要介绍了【js】超详细js函数基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

个人名片:
😊作者简介:一名大一在校生,web前端开发专业
🤡 个人主页:python学不会123
🐼
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡,学好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函数有更好的了解。😄😊文章来源地址https://www.toymoban.com/news/detail-403681.html

到了这里,关于【js】超详细js函数基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 〖大前端 - 基础入门三大核心之JS篇(53)〗- 构造函数与类

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月02日
    浏览(59)
  • 【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 addEventListener()方法,用于向指定元素添加事件句柄,它可以更简单的控制事件。语 法为: 第一个参数是 事件的类型 (如 “click”

    2024年01月19日
    浏览(44)
  • 零基础学MySQL(五)-- 详细讲解数据库中的常用函数

    提供 student 表 1️⃣count 函数 count 表示返回行的总数 (1)基本语法 (2)基本练习 统计一个班级共有多少学生? 统计数学成绩大于 90 的学生有多少个? 统计总分大于 250 的人数有多少? (3)注意细节 count(*) 和 count(列) 的区别: count(*) 返回满足条件的记录的行数 count(列

    2024年01月19日
    浏览(57)
  • python:基础知识—流程控制—函数与模块—数据结构—类与GUI和Turtle—异常处理与文件,概括全书(上万字最详细版)

    这里是一张夜景,给大家放松一下。 !!无锡南长街 python是一门同时支持 面向过程 与 面向对象 的高级语言,由于开放源码的特性,具有 移植性好,可跨平台,具有丰富的第三方库 。扩展名名为 .py 。 python中常见的数字有三种类型·:整数( integer ),浮点数( float ),与

    2024年02月09日
    浏览(54)
  • js 函数声明和函数表达式的执行结果

    参考:https://juejin.cn/post/7237051958993469496 推荐:看 《你不知道的 JavaScript》,里面有详细的 js 执行细节,看完很有收获。

    2024年02月08日
    浏览(39)
  • JS回调函数(callback)

    在使用Jquery的时候,用到Callback(),回调函数的概念。并且不少。javascript 好比:html 回调函数你们都会用,只是Jquery封装了以后,不能让你们明白回调函数的真正使用。 JS Api 里这样解释:A callback is a function that is passed as an argument to another function and is executed after its parent funct

    2024年02月09日
    浏览(37)
  • 常用js工具函数集合

    判断日期是否为今天 日期转换 当你需要将日期转换为为 YYYY-MM-DD 格式 秒数转换 当你需要将秒数转换为 hh:mm:ss 格式 获取某年某月的第一天 当你需要获取某年某月的第一天 获取某年某月的最后一天 当你需要获取某年某月的最后一天 获取某年月份天数 当你需要获取某年某个

    2024年02月16日
    浏览(35)
  • JS中的构造函数

    1.构造函数 创建一个构造函数,专门用来创建一个指定的对象的 构造函数就是普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写 构造函数和普通函数的区别就是调用方式不同 普通函数是直接调用的,而构造函数需要使用 new 来调用 构造

    2023年04月09日
    浏览(27)
  • ❤ js函数之eval()

    ❤ 1、认识 eval() 函数会将传入的字符串当做 JavaScript 代码进行执行 谨慎使用!或者永远不要使用 eval! ❤ 2、了解 谨慎使用!或者永远不要使用 eval! eval(string) // 参数 string 表示 JavaScript 表达式、语句或一系列语句的字符串。表达式可以包含变量与已存在对象的属性。 输出

    2024年02月02日
    浏览(32)
  • JS 箭头函数 =>

    箭头函数是一种声明函数的 简洁 语法,它与普通函数并无本质的区别, 差异性更多体现在语法格式上。 目的 : 引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁 使用场景 : 箭头函数更适用于那些 本来需要匿名函数的地方 箭头函

    2024年01月18日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包