跳到主要内容

10-JavaScript函数

  • 函数是专门用于封装代码的, 随时被反复执行的代码块
  • 好处：重复使用，冗余代码少，一次修改，全局修改
  • 注意函数的运算规则、命名规范，过于复杂会导致冗余

函数的格式​

function 函数名称(形参列表){
    被封装的代码;
}

函数定义的步骤​

  1. 为了提升代码的阅读性，给函数起一个有意义的名称
  2. 函数名称也是标识符的一种, 所以也需要遵守标识符的命名规则和规范
  3. 确定函数的形参列表，也可以没有形参
没有形参函数
function say() {
    console.log("hello world");
}
say();

有形参的函数
function say(name) {
console.log("hello " + name);
}
say("lnj");
  1. 看使用函数的时候是否需要传入一些辅助的数据
  2. 将需要封装的代码拷贝到{}中
  3. 确定函数的返回值，通过return数据，将函数中的计算结果返回给函数的调用者
没有返回值的函数
function say() {
    console.log("hello  world");
}
say();
有返回值的函数
function getSum(a, b) {
    return a + b;
}
let res = getSum(10 , 20);
console.log(res);

没有return明确返回值, 默认返回undefined

function say() {
    console.log("hello world");
    return; // undefined
}

JavaScript函数和数组一样, 都是引用数据类型(对象类型)​

  • 可以将一个函数保存到一个变量中
  • 将来可以通过变量名称找到函数并执行函数
let say = function () {
    console.log("hello world");
}
say();

运用数组运算​

运用伪数组arguments进行求和算法​

console.log(arguments);
console.log(arguments[0]);  // 实际上，运用`.log`都都会加上`arguments`
function getSum() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++){
        let num = arguments[i];
        sum += num; // sum = sum + num;
    }
    return sum;
}
let res = getSum(10, 20, 30, 40);
console.log(res);

运用扩展运算符[...b]进行求和运算​

function getSum(...values) {
    let sum = 0;
    for (let i = 0; i < values.length; i++){
        let num = values[i];
        sum += num;
    }
    return sum;
}
let res = getSum(10, 20, 30, 40);
console.log(res);

函数返回形参默认值​

通过逻辑运算符给形参指定默认值​

function getSum(a, b) {
    a = a || "指趣学院";
    b = b || "知播渔教育";
    console.log(a, b);
}
getSum(123, "abc");

直接在形参后面通过=指定默认值(ES6开始)​

function getSum(a = "没有数值", b = “未定义”) {
    console.log(a, b);
}
getSum();

同理，可以嵌套函数值

function getSum(a = "没有数值", b = getDefault()) {
    console.log(a, b);
}
getSum();

function getDefault() {
    return "感谢李南江老师"
}

JavaScript函数可作为参数使用​

其它编程语言中函数是不可以嵌套定义的，JavaScript中函数是可以嵌套定义的

function test() {
    let say = function () {
        console.log("hello world");
    }
    return say;
}
let fn = test(); // 转义得出 let fn = say;
fn();

匿名函数应用场景​

⚠️注意点

  • 匿名函数就是没有名称的函数
  • 匿名函数不能够只定义不使用

应用范围

  1. 作为其他函数的参数
function test(fn) {
    fn();
}
test(function () {
    console.log("hello world");
});
  1. 作为其他函数的返回值
function test() {
    return function () {
        console.log("hello lnj");
    };
}
  1. 作为一个立即执行的函数
// 想让匿名函数立即执行, 那么必须使用()将函数的定义包裹起来才可以
(function () {
            console.log("hello it666");
        })();

箭头函数​

箭头函数是ES6中新增的一种定义函数的格式 目的: 就是为了简化定义函数的代码

function 函数名称(形参列表){
    需要封装的代码;
}
// 简化格式
let 函数名称 = function(形参列表){
    需要封装的代码;
}
  • 箭头函数中如果只有一个形参, 那么()可以省略
  • 箭头函数中如果中只有一句代码, 那么也可以省略
function say(name) {
    console.log("hello  " + name);
}

↓ let say = name => console.log("hello" + name);

递归函数​

  • 递归函数就是在函数中自己调用自己, 我们就称之为递归函数
  • 递归函数在一定程度上可以实现循环的功能
function login() {
    let pwd = prompt("请输入密码");
    if(pwd !== "123456"){
        login();
    }
    alert("欢迎回来");
}
login();

⚠️注意 这种方法是错误的引用，每当用户输错密码，开启函数调用的时候，会多开启一块空间作为函数的运算，而运算结束后，返回上一块空间时会重复输出alert("欢迎回来");的值。输入错误多少次弹窗也会弹出多少次