时间戳

首页 > 技术文章 > JavaScript函数

JavaScript函数

sunchao0709 2019-11-02 11:01 原文

1.1什么是函数？

函数是专门用于封装代码的, 函数是一段可以随时被反复执行的代码块

1.2使用函数的好处

  • 减少冗余代码
  • 需求变更, 需要修改的代码变少了

1.3如何创建函数

// 格式一:
function 函数名(形参1, 形参2, 形参3...) {
  //函数体
  return 返回值;
}

// 格式二:
var 变量 = 函数名(实参1, 实参2, 实参3...);

 

创建函数的注意点：

  • 和C语言一样, 函数可以没有返回值, 也可以有返回值。不同的是JavaScript是弱语言, 所以不用只能返回值类型
  • 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
  • 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
  • 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
  • 跟break函数相似，都是结束当前代码块，后面的函数永远执行不到

 

函数中argument的使用：每个函数中都定义了一个argument，它的作用是保存所有传递给函数的形参。且它是一个伪数组可以对其进行遍历。

function getSum() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

var sum = getSum(5, 1, 3, 4);
console.log(sum);

 

函数的扩展运算符在函数中的运用
1.扩展运算符在等号左边, 将剩余的数据打包到一个新的数组中(注意点: 只能写在最后)
let [a, ...b] = [1, 3, 5]; a = 1; b = [3, 5];

2.扩展运算符在等号右边, 将数组中的数据解开
let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr = [...arr1, ...arr2]; let arr = [1, 3, 5, 2, 4, 6];

3.扩展运算符在函数形参中运用
与上面类似...

 

函数作为其他函数的参数和返回值：

由于JavaScript中的函数也是一种数据类型, 所以函数也可以作为参数和返回值使用

//函数作为其他函数的参数使用
var sayHi = function () {
        console.log("hello world");
    }
    function test(fn) {
        fn();
    }
    test(sayHi);

//函数作为其他函数的返回值使用，注意只有JavaScript函数可以在其他函数中嵌套使用
function test() {
    var sayHi = function () {
        console.log("hello world");
    }
    return sayHi
}
var res = test();
res();

 

匿名函数：

没有名称的函数称为匿名函数（匿名函数不能单独出现，一般作为其他函数参数或者返回值使用）

2.匿名函数的注意点:

匿名函数不能够只定义不使用

3.匿名函数的应用场景

3.1作为其他函数的参数
3.2作为其他函数的返回值
3.3作为一个立即执行的函数

// 报错
function () {
    console.log("hello world");
}

// 立即执行函数   注意点: 如果想让匿名函数立即执行, 那么必须使用()将函数的定义包裹起来才可以
(function () {
    console.log("hello world");
})();

// 作为函数参数
function test(fn) {
    fn();
}
test(function () {
    console.log("hello world");
});

// 作为函数返回值
function test() {
    return function () {
        console.log("hello world");
    }
}
var res = test();
res();

 

箭头函数：

从ES6开始如何定义函数
let 函数名称 = (形参列表) =>{
   需要封装的代码;
}

箭头函数的注意点

4.1在箭头函数中如果只有一个形参, 那么()可以省略
4.2在箭头函数中如果{}中只有一句代码, 那么{}也可以省略

 

递归函数：

什么是递归函数?

递归函数就是在函数中自己调用自己, 我们就称之为递归函数
递归函数在一定程度上可以实现循环的功能

function login() {
    // 1.接收用户输入的密码
    let pwd = prompt("请输入密码");
    // 2.判断密码是否正确
    if(pwd !== "123456"){
        login();
    }
    // 3.输出欢迎回来
    alert("欢迎回来");
}
login();

2.递归函数的注意点:

每次调用递归函数都会开辟一块新的存储空间, 所以性能不是很好

 

 

推荐阅读