JavaScript【四】JavaScript中的函数

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


JavaScript【四】JavaScript中的函数

🌟前言

哈喽小伙伴们,本文将收录在JavaScript【前端童子功】这个专栏里;这个专栏里边会收录一些JavaScript的基础知识和项目实战;希望大家可以多多支持,你们的支持就是我创作的动力;让我们一起来看看吧🤘

🌟什么是函数?

函数:将完成某一特定功能的代码封装起来,并且可以重复调用的代码块。

为何使用函数?

  1. 能够对代码进行复用:只要定义一次代码,就可以多次使用它。
  2. 能够多次向同一函数传递不同的参数,以产生不同的结果。
  3. 使程序更加简洁、具有逻辑性、维护方便

🌟函数声明方式

🌟 function关键字

function 函数名([参数1],[参数2],...[参数n]){
    函数体
    [retrun]  //返回值
}

🌟 字面量定义(匿名函数)

var 变量 = function ([参数1],[参数2]....){
    函数体
    [retrun]  //返回值
}

🌟 实例化构造函数

var 变量 = new Function([参数1],[参数2]...,"函数体");
 //实例化构造函数--例二
    function Animal(name,sex,age){
        this.name=name;
        this.sex=sex;
        this.age=age;
        this.eat=function(eat){
            return "骨头"
        }
    }
    var animal1=new Animal("狗","男","20","骨头");
    console.log(animal1);
    var animal2=new Animal("猪","母","5");
    console.log(animal2);
    var animal3=new Animal("猫","公","18");
    console.log(animal3);
    console.log(animal2.name);
    console.log(this);

    // 例三
    function Person(name,age){
        this.name=name;
        this.age=age;
        this.play=function(){
            return "猫";
        }
    }
    var zs=new Person("zs","20")
    console.log(zs);
    var ls=new Person("ls","18")
    console.log(ls);

🌟函数调用方式

🌟通过括号调用

用于具名函数的调用

  • 函数名()
  • 变量名()
function fun1(){}
fun1()

var fun2 = function (){}
fun2()

🌟自调用(IIFE)

用于匿名函数的调用,匿名函数还可以通引用变量来调用。

//第一种
(function (){
    //函数体;
})()

//第二种
!function(){
    //函数体;
}()

//第三种
(function(){
    //函数体;
}())

注意: 在进行函数自调用时,上一条语句必须结尾有;

🌟通过事件调用

<script>
    function fun(){}
</script>
<div onclick="fun()"></div>

🌟注意事项

创建/调用函数注意问题:

  1. 如果两个函数的命名相同,后面的将会覆盖前面的函数。
  2. 以function声明的函数可以前置调用,以字面量方式声明方式后置调用。
  3. 在不同的<script></script>块中声明函数,声明之后块中调用。

🌟函数声明覆盖

如果两个函数的命名相同,后面的将会覆盖前面的函数。

function bb(){
    alert("这是第一个声明");
}
function bb(){
    alert("这是第二个声明");
}
bb(); //结果为  “这是第二个声明

🌟函数调用顺序

以基本语法声明的函数,会在页面载入的时候提前解析到内存中,以便调用。所以可以在函数的前面调用。但是以字面量形式命名的函数,会在执行到他的时候,才进行赋值。所以只能在函数的后面调用。

aa();      // 结果为 弹出 1
function aa(){
    alert(1)
}
aa();      // 结果为 弹出 1


aa();      // 报错 aa is not a function
var aa = function(){
    alert(1)
}
aa();

🌟 函数在不同块调用顺序

在不同的<script></script>块中,因为浏览器解析的时候是分块解析的,所以前面的块不能调用后面块的函数,所以在不同的块之间调用函数的时候,应该先声明后调用。

<script>
    aa();      //报错
</script>
<script>
    function aa(){
        alert(1)
    }
</script>
<script>
    aa()       //结果为 弹出 1
</script>

🌟箭头函数

ES6标准新增了一种新的函数:Arrow Function(箭头函数)

🌟 箭头函数语法

箭头函数表达式的语法比普通函数表达式更简洁。

(参数1, 参数2,, 参数N) => { 函数声明 }

(参数1, 参数2,, 参数N) => 表达式(单一)
// 相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时,圆括号是可选的:

(单一参数) => {函数声明}
单一参数 => {函数声明}

没有参数的函数应该写成一对圆括号:

() => {函数声明}

🌟函数的参数

可以动态的改变函数的变量的类型与值,使同一函数实现不同的效果

当我们封装一个功能,例如十行十列表格,但是每次使用该功能时想动态改变实现效果,例如想输出为五行五列、两行两列的表格,这时就需要修改函数体代码。 而更好的方法就是,在调用时有使用者传入一些值来控制函数体中的相关功能,即可实现不同效果,这个使用者在调用函数时传入的值就是函数的参数。

🌟 参数作用

可以动态的改变函数的变量的类型与值,使同一函数产生不同的结果。

🌟 参数类型

  • 形参:函数在定义时,括号里所定义的变量。 (形式上存在,只有在被调用时才有值)
  • 实参:函数在调用时,括号里所传入的值。 (进行函数调用时,它们都必须具有确定的值, 以便把这些值传送给形参)
// num 是形参
function ta(num){
    for(var i = 1;i <= num;i++){
        for(var j = 1;j <= num-i;j++){
            document.write("&nbsp;");
        }
        for(var k = 1;k <= i*2-1;k++){
            document.write("*");
        }
        document.write("<br>");
  }
}
ta(6);    // 6 是实参

在实参为形参传递过程中,实参和形参位于内存中两个不同地址中,实参先自己复制一次拷贝,再把拷贝复制给形参。所以,在函数体中,形参的变化不会对实参有任何的影响。例如:

var number = 10
function fun(number){
    number = 100
}

fun(number);
alert(number);   // 10

🌟 参数详解

  1. 参数可以是任何的数据类型
  2. 参数个数
  3. 参数尾逗号

🌟 参数数据类型

参数可以是任何的数据类型

function TYPEOF(type){
alert(typeof type);
}
TYPEOF(1)
TYPEOF("a")
TYPEOF(true)
TYPEOF(null)
TYPEOF()
//甚至可以传入函数:
TYPEOF(function(){alert(1)})

🌟 参数个数

  1. 实参与形参的个数相同时,一一对应。

  2. 实参小于形参时,形参自动赋值为undefined。

     function aa(a,b){
         alert(a);
         alert(b);
     }
     aa(1);  //   1  undefined
    
  3. 实参大于形参时,使用

    arguments
    

    对象来获取。

     function aa(a,b){
         alert(a);
         alert(b);
         alert(arguments.length);
         alert(arguments[2]);
         alert(arguments.callee);
     }
     aa(1,5,7);   //依次弹出 1  5  3   7  函数本身
    
  4. arguments对象 在创建函数时,隐式的创建了arguments对象,它是用来记录函数的参数的信息的,只能在函数内部使用

    它的属性:

    • length: 函数的参数的长度
    • callee: 对函数本身的调用
    • 可以通过下标来访问具体参数的值。

    注:arguments对象不是数组,而是一个类似数组的对象。所以为了使用数组的方法,必须使用Array.prototype.slice.call先将其转为数组。

  5. [es6]rest参数

    ES6 引入 rest 参数(形式为…变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

     function fun(...a){
         console.log(a);    // [1,2,3,4]
     }
     fun(1,2,3,4)
    
     function fun(a, ...b){
         console.log(a,b);    //1   [2,3,4]
     }
     fun(1,2,3,4)
    
     // rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
     function f(a, ...b, c) {
         // 报错
     }
    

🌟 参数尾逗号

在ES7种,函数实参和形参末尾可以以逗号结束:

function fun(a,b,){ }

fun(10,20,)

功能:重新排列元素项,改变最后一个元素位置时不需要增删逗号

🌟函数的重载

一个函数通过传入的参数的个数不同或者参数类型的不同,可以对应函数的多个实现,而且每一种实现对应一个函数体。
重载函数常用来实现功能类似而所处理的数据类型不同的问题。

模拟函数的重载:

function fun(a,b){
    if(arguments.length == 1){
            alert("只有一个参数"+a);
    }
    if(arguments.length == 2){
            alert(" 有两个参数"+a+"和"+b);
    }
    if(arguments.length >= 3){
            alert("参数太多了");
    }
}
fun(1,3.4,4);

🌟函数参数默认值

// 该函数计算两数之和,但如果调用只传入一个参数则结果是NaN,所以必须为参数设置默认值0
function add(a,b){
    return a+b
}

🌟ES5设置默认值方式

使用短路原则为变量设置默认值

// 利用短路原则为函数参数设置默认值,参数存在则取参数,参数未传则取0
function add(a,b){
   a = a||0;
   b = b||0;
   return a+b
}
// 为变量设置默认值1
var num = num || 1

🌟ES6函数参数设置默认值

ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。

function add(x, y = 0) {
console.log(x, y);
}
log(10) // 10 0
log(10, 100) // 10  100
log(10, '') // 10

🌟 函数的length属性

函数的length属性,将返回没有指定默认值的参数个数,仅包括第一个具有默认值之前的参数个数。

function aa(a){}
function bb(a=5){}
function cc(a,b,c=5){}

console.log(aa.length) // 1
console.log(bb.length) // 0
console.log(cc.length) // 2

🌟函数返回值:在函数调用的地方相当于函数的返回值

函数体中的计算结果可以输出查看,但是如果想对函数的结果进行处理则需要用到函数的返回值。

函数体中的关键字 return 可以将函数体中运行的结果返回给函数外部:

function fun(a,b){
    var num = a+b;
    return num;
}
var end = fun(1,2);    // 函数运行结果保存到变量end中

🌟return 的功能

  1. 将函数运行结果返回
  2. 停止并跳出当前函数 (不会执行return后面的语句)
function aa(){
  return;
  alert("hello world");
}
aa();   // 没有弹出 hello world

一个函数可以有多个return语句,但只有一个return执行(常用于判断)

function aa(a){
    if(a>0){
        alert(a);
        return;
    }
    if(a<=0){
        alert(a);
        return;
    }
}
aa(3);  //  3

🌟 函数返回值使用事项

  1. 返回值可以是任何数据类型

  2. 每个函数都默认有返回值,如果一个函数没有写return,会默认返回undefined

    function aa(a){
       if(a>0){
           alert(a);
           return;
       }
       if(a<=0){
           alert(a);
           return 1;
       }
    }
    alert(aa(3));   //  3  undefined
    alert(aa(0));   //  0  1
    
  3. 一个函数只能有一个返回值。

    function bb(a,b,c){
       return a,b,c;
    }
    alert(bb(3,5,7)); //  7
    

    原因:用逗号做返回值时,是按从左到右赋值的,最终赋值为最后一个值,前面的值被覆盖了。

    如果想返回多个值,则可以将多个值打包为数组或对象

🌟写在最后

更多JavaScript知识以及API请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!文章来源地址https://www.toymoban.com/news/detail-420011.html

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

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

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

相关文章

  • 探索 JavaScript ES8 中的函数式编程并通过实例加以实践

    💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】 🤟 基于Web端打造的:👉轻量化工具创作平台 💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 函数式编程是一种强大的范式,强调使用纯函数和不可变数据。在本文中,我们将通过实际示例探讨如何

    2024年02月22日
    浏览(46)
  • 在JavaScript中的防抖函数 - 通过在React中构建自动完成功能来解释

    当你将一个新应用推向生产环境时,你希望确保它用户友好。网站的性能是用户体验的关键部分。每个用户都希望网站及其内容能够快速加载。每一秒都是宝贵的,可能导致用户再也不会访问你的网站。 在本指南中,我们将了解JavaScript中一个非常重要的技术,即防抖函数。

    2024年02月19日
    浏览(46)
  • 细说JavaScript函数(JavaScript函数详解)

    函数的作用就是封装一段JavaScript代码,让开发者可以通古简单的方式使用这段代码 一、函数的分类 在几乎所有的编程语言中,都有函数这一概念,并且没中语言本身都继承了丰富的函数,这类函数被称为系统函数或者内置函数,系统函数在语言设计时就已经定义好了,开发

    2024年02月01日
    浏览(47)
  • JavaScript经典教程(七)-- JavaScript基础 -- 函数、argument、匿名函数、函数深入、选项卡

    1、函数 (1)特性 1、每个函数都有自己的作用域。 2、如果执行该变量名,会返回自己,即返回函数本身。 3、正常调用,返回函数中的执行结果。 当函数中无执行内容时,返回默认return=undefind;(每个函数都有默认return=undefined) 当函数中有执行内容时,返回返回值。 4、re

    2024年02月02日
    浏览(50)
  • javascript匿名函数之立即调用函数

    今天在看youtube的前端代码时发现了一个很奇怪的写法,从来没见过,代码如下: 我印象中的js函数是: 结果既 没有函数名,函数屁股后面还跟了一个大括号 ,看上去像是调用一个函数,但是奇怪的是又没有函数名。 其实上面这种写法叫做 立即调用函数表达式(IIFE Immedia

    2024年02月12日
    浏览(239)
  • JavaScript高级二、构造函数&常用函数

    1、深入对象 (1)创建对象三种方式 利用对象字面量创建对象 利用 new Object 创建对象 利用构造函数创建对象 案例如下: (2)构造函数 **构造函数 :**是一种特殊的函数,主要用来 快速初始化 类似的 对象 构造函数语法 使用 new 调用函数的行为被称为 实例化 实例化

    2024年02月07日
    浏览(40)
  • JavaScript节流功能(js节流函数,节流功能的应用与解析,深入了解JavaScript节流函数)

    简述:上篇文章介绍了js防抖功能,这期说下js节流功能。节流就是某一高频事件不断被触发时,将多次执行变成每隔一段时间执行,具体点就是减少一个事件在一段时间内的触发频率,它是一种常用的函数优化技术,可以限制函数的执行频率,从而提高网页的性能和用户体验

    2024年02月13日
    浏览(44)
  • javascript中的prototype;javascript中的原型链

    在JavaScript中,每个对象都有一个原型(prototype),并且原型可以有自己的原型,形成了一个链式结构,被称为原型链。这个机制是JavaScript中实现继承和对象属性查找的基础。 原型链是由对象之间的连接构成的。每个对象都有一个指向它原型的链接,这个链接可以追溯到顶层

    2024年02月20日
    浏览(43)
  • 超越函数界限:探索JavaScript函数的无限可能

    🎬 岸边的 风: 个人主页  🔥  个人专栏  :《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! 目录 📚 前言 📘 1. 函数的基本概念 📟 1.1 函数的定义和调用 📟 1.2 参数和返回值 📟 1.3 匿名函数 📘 2. 函数的高级概念 📟 2.1 作用域 📟 2.2 闭包 📟 2.

    2024年02月12日
    浏览(54)
  • 什么是函数式编程和函数式JavaScript

    首先,让我们来理解一下什么是函数式编程和函数式JavaScript。 函数式编程是一种编程范式,它强调代码的组织和无副作用性。函数式编程中的函数遵循单一职责原则,即函数只做一件事情,并且不会产生副作用。这种编程范式可以帮助我们编写出更加简洁、清晰和易于维护

    2024年02月05日
    浏览(32)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包