JS-函数

什么是函数

函数就是一段具有特定功能的代码块。

函数在js中地位非常高，属于一等公民

函数作用

• 拆分代码，提高代码复用性，便于后期的维护和测试

函数的定义和调用

函数分类：

• 系统内置函数（如：parseInt()、parseFloat()、push()等）
• 程序员自定义函数：可以实现特定功能。

自定义函数有两种方式：

• 函数声明
• 函数表达式

函数声明：

function 函数名() {
  // 函数体
}
​
函数名(); // 调用函数
​
function hello(){
  console.log('大王来巡山');
}
​
hello();

函数表达式：

​
var fn = function () {
  // 函数体
}
​
fn(); // 调用函数

注意事项：

• function它是定义函数的关键字 不可以省略。
• 函数名的命名规则与变量名是一样的,起的函数名一定要有意义，一看函数名就知道此函数实现什么功能
• 不能使用JS中的关键字和保留字作为函数名
• 如果函数名是由多个单词组成的，那么可以使用下划线法和小驼峰法
• 函数名严格区分大小写
• 函数名后面紧跟着一对小括号 这一对小括号不能省略，小括号后面紧跟着一对花括号{}, 这一对大括号不能省略
• 花括号{}里面是函数体

标识符：变量名和函数名就是标识符（token）。

案例：

• 实现两数之和。
• 实现1-100之间的和

// 两数之和
function add(){
    console.log('和：',100 + 200)
}
​
add(); 
​
// 实现1-100之间的和
function sum(){
    var total = 0;
    for(var i = 1; i <= 100; i++){
        total += i;
    }
    console.log('total:',total)
}
​
sum();

上面两个函数虽然可以实现相应的功能。

• 缺点：仅能实现特定的功能，不够灵活，不具有扩展性。

解决办法：通过函数参数

函数的参数

• 为什么要有参数

// 求 1 + 2 + 3 + ... + 100的和
function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log(sum);
}

上面代码带来的弊端：

• 虽然上面代码可以重复调用，但是只能计算1-100之间的值，不够灵活，扩展性不强！
• 若要计算1-200的和呢？怎么处理？，聪明的你肯定会想到改成i<=200即可。
• 若后面改需求了，要计算500-1000的和，怎么办？ 那就把初始值i改为500， 条件改为i <= 1000。
• 弊端就是仅能实现特定的功能。

那么函数的参数就可以解决上面的问题。

函数参数分为形参和实参。

• 形参：在定义函数的时候声明的形式参数。
• 实参：调用函数时传入的实际参数。

形参仅仅起到一个占位的作用，具体是什么值，由调用者传递的实参决定。

语法格式：

// 定义函数，并声明形参
function 函数名(形参1, 形参2, 形参3...) {
  // 函数体
}
​
// 调用函数，并传递实参
函数名(实参1, 实参2, 实参3); // 实参会传递给对应位置的形参

示例：

function add(a,b){ 
  console.log('a：' + a)
  console.log('b：' + b)
}
​
add(10,20);  // 10传递给形参a, 20传递给形参b

若对应的形参没有传值，则默认值为undefined

什么时候要定义参数？

若函数内部使用到的值，是需要调用者来决定的，这类数据，我们就可以把它定义为一个形参 。

函数调用的时候在传递实参即可，这样的函数会更具有扩展性。

参数的默认值

若某个形参没有传递相应的实参，则值就会默认为undefined。

定义的时候我们可以给形参取个默认值：

// 形参b默认值为0 
function add(a,b = 0){
     return a + b;
 }
​
console.log( add(10,20) )
console.log( add(10) )

注意：含有默认值的形参只能定义在最右边。

函数的返回值 return

之前的函数案例中，我们都是直接在函数内部打印结果。打印的目的仅仅只是测试函数是否好使！

但是！！

在真实的项目开发中，我们肯定是需要得到函数的处理结果的，并把结果用在其他的地方。

如何得到函数的处理结果？ 通过函数内部的return关键字

return作用：

• 返回函数结果并终止函数的执行。

示例：

// 声明一个带返回值的函数
function sum() {
  return 100;
}
​
// 变量result 来接收函数的返回值
var result = sum();
console.log( result ); // 100
​
​
function hello(){
    return '八戒';
    return '悟空';
}
hello(); // '八戒'

注意：

• 如果函数没有使用return返回值 ，则函数默认会返回undefined
• 函数可以有多个return语句，但有且仅只会执行一个。因为return本质就是返回函数结果并终止函数的运行。

封装函数，实现两数之和：

function sum(num1,num2) {
  return num1 + num2;
}

var result = sum(100, 200);
console.log( result ); // 300


// 也可以直接打印函数的返回结果
 console.log(sum(50, 70)) // 120

封装函数，判断一个数是否是偶数

function isEven(num){
    if(num % 2 === 0){
        return true
    }else {
        return false
    }
}

// 等价于
function isEven(num){
    if(num % 2 === 0){
        return true
    }
    return false
}

console.log( isEven(100) )// true

数组内置函数indexOf

• arr.indexOf(value): 判断数组元素首次在数组中出现位置，存在返回其下标，否则返回 -1
• arr.includes(value):判断数组元素是否存在数组中，存在返回true，否则返回false

var arr = [1, 2, 3, 3]
console.log(arr.indexOf(1)) // 0
console.log(arr.indexOf(3)) // 2
console.log(arr.indexOf(4)) // -1


var arr = [1, 2, 3, 3]
console.log(arr.includes(1)) // true
console.log(arr.includes(3)) // true
console.log(arr.includes(4)) // false


// 自定义函数
function includes(arr, value) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === value) {
            // 说明找到了
            return true
        }
    }
    // 上面没有找到则直接返回false
    return false

}

// 封装内置函数indexOf,判断数组中是否存在某个元素，存在返回其在数组中的首次下标，没找到返回 -1
function indexOf(arr, value) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === value) {
            return i
        }
    }
    return -1
}

console.log(indexOf([1, 2, 2, 3], 2)) // 1
console.log(indexOf([1, 2, 2, 3], 4)) // -1

函数内部属性arguments

arguments是函数内部的特殊属性。

• arguments作用：获取所有的实参。
• arguments是一个伪数组（类数组对象）。所谓伪数组就类似于真数组一样，可通过下标获取元素和通过length属性获取元素个数。也可for循环访问元素，但是不能调用真数组的方法（如：push）。

    function foo(){
        console.log(arguments.length); // 5 代表传递了5个实参
    }
    
    foo(1,2,3,4,5);

• 案例：求任意个数数字的和

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

    console.log(  sum(10,20,30,40) ); // 100

获取函数定义的形参个数:函数名.length

function add(num1,num2,num3){
    return num1 + num2 + num3;
}
// 函数名.length: 获取函数定义的形参个数；
console.log( add.length ); // 3

实现数组内置push方法

function arrPush() {
    // 获取第一个实参，即原数组
    var originArr = arguments[0]
    // 从下标为1开始
    for (var i = 1; i < arguments.length; i++) {
        // originArr.push(arguments[i])
        originArr[originArr.length] = arguments[i]
    }
    return originArr.length
}
var arr = [1, 2, 3]
// console.log(arr.push(4, 5)) // 5 返回数组新长度
console.log(arrPush(arr, 4, 5)) // 5
console.log(arr); // [1,2,3,4,5]

实现数组的lastIndexOf方法

var arr = [1, 2, 2, 2, 3]
        // 首次出现的位置
        // console.log(arr.indexOf(2)) // 1
        // 最后一次出现的位置
        // console.log(arr.lastIndexOf(2)) // 3

        // 封装函数：返回元素在数组中出现的最后一次的位置
        // 思路：从数组的最后一个元素开始遍历判断
        function lastIndexOf(arr, value) {
            for (var i = arr.length - 1; i >= 0; i--) {
                if (arr[i] === value) {
                    return i
                }
            }
            return -1
        }

        console.log(lastIndexOf(arr, 2)) // 3
        console.log(lastIndexOf(arr, 4)) // -1