JS篇 ⑩

01 函数①

1. 定义

• 一个可以被其他代码或其自身调用的代码片段，或者是一个指向该函数的变量
• 一段可以反复调用的代码块
• 是一种特殊的对象

1. 函数声明

• function命令：利用函数关键字自定义函数，一般是命名函数

function 函数名(形参) {
    // 函数体
}

• 函数表达式：赋值式，一般是匿名函数

var 变量名 = function(形参) {
    // 函数体
}

• Function构造函数

var 变量名 = new Function('形参', '函数体')

• 如果同一个函数被多次声明，后面的声明就会覆盖前面的声明

1. 函数调用

• 函数名(实参)
• 当形参与实参个数不同时，实参多则取形参个数，实参少则多出的形参为undefined
• 自执行函数(立即执行函数，IIFE)：

(function(形参) {}) (实参)
(function(形参) {} (实参)) // 多推荐
// 有多个时，前面加分号 ”;“
// 因为自执行函数一般不能多次调用，函数名没有太多用处，所以，一般自执行函数为匿名函数
// 作用：独立创建一个作用域，变量不会外泄

1. 案例

• 利用函数计算1-100之间的累加和

// 1. 声明函数
function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log(sum); // 5050
}
// 2. 调用函数
getSum();

• 利用函数求任意两个数的和

function getSum(num1, num2) {
  console.log(num1 + num2); // 11
}
getSum(3, 8);

• 利用函数求任意两个数之间的和

function getSums(start, end) {
  var sum = 0;
  for (var i = start; i <= end; i++) {
    sum += i;
  }
  console.log(sum); // 5050
}
getSums(1, 100);

1. return

• 函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()通过return实现的
• 语法结构：

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

• 只要函数遇到return就把后面的结果返回给函数的调用者，函数名() = return后面的结果
• return会终止函数，即return后面的代码不会执行
• return只能返回一个值，多于一个值则返回最后的一个值
• 函数如果有return，则返回的是return后面的值；如果函数没有return，则返回undefined

02 函数②

1. 属性

• name：返回具名函数的函数名或匿名函数的变量名

function f1() {}
f1.name // "f1"

var f2 = function () {};
f2.name // "f2"

var f3 = function myName() {};
f3.name // 'myName'

• length：返回函数预期传入的参数个数

function foo(a, b) {}
foo.length // 2

1. arguments对象

• 在不确定要传入参数个数时使用
• 只有函数才有arguments对象，而且是每个函数都内置好了这个arguments

function fn() {
  console.log(arguments); // { 0: 1, 1: 2, 2: 3, length : 3, ... } 里面存储了所有传递过来的实参
  console.log(arguments.length); // 3
  console.log(arguments[2]); // 3
  for (var i = 0; i < arguments.length; i++) { // 可以按照数组的方式遍历arguments
    console.log(arguments[i]); // 1, 2, 3
  }
}
fn(1, 2, 3);

• arguments的值是伪数组，是对象，不是真正意义上的数组
• 伪数组的特点：1.具有数组的length属性 2.按照索引的方式进行存储的 3.它没有真正数组的一些方法pop()、push()等等

1. 案例

• 利用函数求任意个数的最大值

function getMax() {
  var max = arguments[0];
  for (var i = 1; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}
console.log(getMax(11, 2, 34, 369, 5, 100));// 369

• 利用函数翻转任意数组

function reverse(arr) {
  var newArr = [];
  for (var i = arr.length - 1; i >= 0; i--) {
    newArr[newArr.length] = arr[i];
  }
  return newArr;
}
var arr1 = reverse([1, 3, 55, 6, 9]);
console.log(arr1); // [9, 6, 55, 3, 1]

• 利用函数冒泡排序

 // [1, 2, 4, 9]function sort(arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}
var arr1 = sort([1, 4, 2, 9]);
console.log(arr1); // [1, 2, 4, 9]

1. 函数是可以相互调用的

function fn1() {
  console.log(111); // 111
  fn2(); // 在fn1函数里面调用了fn2函数
}
function fn2() {
  console.log(222); // 222
}
fn1();

1. 函数表达式(匿名函数)补充

• 语法结构

var foo = function (a, b) {};
foo();

• foo是变量名，不是函数名
• 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数