js函数——函数的概念、作用域、自定义函数、预定义函数、匿名函数、函数自执行表达式（IIFE）、函数传参、函数的返回值、break ,continue ,return 的区别

本文链接：https://blog.csdn.net/TKY666/article/details/124001209

函数的概念

作用域（变量起作用的范围）

预定义函数（eval（）isNaN() Number.isNaN()）

break ,continue ,return 的区别

匿名函数（函数表达式）

函数自执行表达式（IIFE）（两种方式）：

箭头函数简介

函数的概念

在JS里面可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用
虽然for循环语句也能实现一些简单的重复操作，但是比较有局限性，此时我们就可以使用JS中的函数。
函数:就是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用。

函数作用简答：可将大量代码重复使用。

作用域（变量起作用的范围）

作用域分为全局作用域和局部作用域(又称块作用域)

变量的作用范围是由声明变量所用的关键字决定的（关键字：var、let、const）

全局变量 ：在函数外声明的变量，在函数内外都可被访问（var）
局部变量 ：在函数内声明的变量，只能在函数内访问（let、const）

预定义函数（eval（）isNaN() Number.isNaN()）

eval（） 可以把字符串当做js来执行
isNaN() 判断参数是否是NaN（非数字）如果是返回值true 否则返回false 会在输出时候进行类型转换无法直接判断是不是NaN类型
Number.isNaN() 只有参数为NaN的时候返回值才为true 其他均为false 不会进行类型转换直接判断是不是NaN类型
const num1 = '1',num2 = 1,num3 = NaN;;
console.log(isNaN(num1),isNaN(num2),isNaN(num3)); // false false true
console.log(Number.isNaN(num1),Number.isNaN(num2),Number.isNaN(num3)); // false false true

自定义函数

自定义函数分为两步:声明函数和调用函数

1.声明函数

function 声明函数的关键字
函数是做某件事情函数名一般是动词 sayHi
函数不调用自己不执行

1.声明函数
        function 函数名() {  //函数名不能与使用的id名相同，id是唯一的
            //函数体
        }
        function sayHi() {
            console.log('hi');

        }
 2.调用函数
        函数名()
        sayHi()
        调用函数的时候千万不能忘记小括号

2.调用函数

函数名();

//函数声明
function fn(){
    console.log(1);
}
 
//函数的调用
fn();

函数传参

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

形参：形式上的参数——给函数声明一个参数(用来接收实参。形参可以看作是一个不用声明的变量）；
实参：实际的参数——在函数调用时给形参赋的值
function func(形参1,形参2...){
    //函数执行代码
}
 
func(实参1,实参2...);//调用时传参
注意点：

函数可以带参数，也可以不带参数
多个参数之间用逗号隔开 形参可以看做是不用声明的变量。
如果实参的个数和形参的个数一致则正常输出结果
如果实参的个数多余形参的个数，则以形参个数为准
如果实参的个数小于形参的个数多余的形参定义为undefined最终的结果就是NaN
我们尽量让实参的个数和形参相匹配
在js中形参的默认值是undefined

形参和实参的执行过程

function cook(aru) {
                //形参是接收实参的 相当于aru='酸辣土豆丝' 形参类似一个变量
                console.log(aru);
            }
            cook("酸辣土豆丝");
            cook("驴肉火烧");

函数的返回值

函数的返回值：return;语句

函数的返回值格式;
            function 函数名() {
                return 需要返回的结果;
            }

            函数名();  //将函数输出即可看到返回值

        // 我们函数只是实现某种功能 最终的结果需要返回给函数的调用者 通过return
        //只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return后面的结果

举例：
       //求任意两个数的和
         function getSum(num1, num2) {
             return num1 + num2;
         }
         console.log(getSum(1, 2));

函数返回值 注意事项

return 终止函数
return 只能返回一个值
我们函数如果有return 则返回 return 后面的值如果函数没有 return 则返回 undefined

// 函数返回值 注意事项
        //1.return 终止函数
        function getSum(num1, num2) {
            return num1 + num2;
            alert('我是不会被执行的'); //return 后面的代码不会被执行 
        }
        console.log(getSum(1, 2));

        //2.return 只能返回一个值
        function fn(num1, num2) {
            return num1, num2; //返回的结果是最后一个值
        }
        console.log(fn(1, 2));

        //4.我们函数 如果有return 则返回 return 后面的值 如果函数没有 return 则返回 undefined
        function fun1() {
            return 666;
        }
        console.log(fun1()); //返回66
        function fun2 () {

        }
        console.log(fun2()); //undefined

break ,continue ,return 的区别

break :结束当前的循环(for while)
continue：跳出本次循环继续执行下次循环(for while)
return:不仅可以退出循环还可以返回return语句中的值同时还可以结束当前函数体内的代码

在forEach中，不能使用 continue 和 break ，可以使用 return 或 return false 跳出循环，效果与 for 中 continue 一样，但是该方法无法一次结束所有循环。

匿名函数（函数表达式）

匿名函数：没有名字的函数；

函数表达式：就是把函数存到变量里。

匿名函数的定义

function（形参1，形参2，...）{

函数体；

}

匿名函数的调用：

var 变量名=function（形参1，形参2，...）{
函数体；
}
变量名（）；

注意：匿名函数不存在提升现象，所以在声明函数代码前调用匿名函数会报错。

<script>
    //匿名函数不存在提升现象
    a() // 报错 a is not a function
    var a = function(){
      console.log('调用函数a');
    };
    a() // 成功调用匿名函数函数
  </script>

函数自执行表达式 （IIFE）（两种方式）：

包装成表达式 IIFE 立即执行函数表达式

（匿名函数）（）；

方法一举例：
(function(){
    console.log("匿名函数自执行");
})();
方法二举例：

在匿名函数前添加+、-、!、~等符号
//+、-、!、~等符号可以使用%、*、/等不可使用
            +function () {
                alert("你好匿名函数");
            }();

箭头函数简介

箭头函数作用是使函数书写更加简洁方便，让代码更简洁。

主要操作：

在()与{}之间添加=>即可省略function
若函数中有return,则可将{}与return都省略直接在后方写返回值或式子
以过滤函数举例数组名.filter(参数1，参数2，参数3)
var arr = [70,59,80,100,50];
        var a = arr.filter(function(item,i,a) {
            return item >= 60;
        })  
        console.log(a);
        // 改为箭头函数
        var a =a.filter((item)=> item >= 60);//在()与{}之间添加=>即可省略function
        console.log(a);//若函数中有return,则可将{}与return都省略直接在后方写返回值或式子