JS 数组、JS函数 、JS 封装函数

1.数组

为什么要用数组？

• 当我们需要一组数据，或者一次性定义很多类似的变量时，我们可以使用数组，提高开发效率。

数组的概念:

• 一组数据的集合。其中每一个数据叫做元素。在数组中可以放任意类型的元素。

声明数组的方式：

• 字面量（直接赋值，将值写在[]里面，每一个元素之间用逗号分隔。）
• 通过new 关键字创建数组。

• new Array(数组中存放的数据);

• 例：var arr = new Array(3);

• 错误理解：声明一个数组，数组中有一个元素，元素的值为3。
• 正确理解：声明一个数组，该数组的长度为3.里面可以放3个元素，此时没有放任何的元素。

• 【注意】如果数组中只有一个元素，而且这个元素是一个number，使用第二种方式会出现问题。
  此时这个number就不是一个数据了， 而是数组的长度。

数组的长度： 里面元素的个数。

• 数组的长度表示可以放多少个元素。
• 数组名.length

数组的下标（索引）

• 数组中的数据都是按照次序排列好的，每个值都有编号。这个编号叫做索引或者下标。从0开始，下标的最大值：length-1.

如何获取数组中的元素

• 获取数组中的元素，需要通过下标。
• 数组变量名[下标]

数组的遍历

• 将数组的数据一个一个取出来，进行操作。

例：

    var arr = [88, 90, 59, "80"];
    for (var i = 0; i < arr.length; i++) {
      // console.log(arr[i]);  //88 90 59 80  //88 90 59是数字类型 80是字符串类型
    }
    console.log(arr[0]);  //88
    console.log(arr[1]);  //90
    console.log(arr[2]);  //59
    console.log(arr[3]);  //80(字符串类型)
    console.log(arr[4]);  //undefined
    console.log(arr);  //得到的是一个数组  [88, 90, 59, "80"]

2.数组方法

push()

• 功能：往数组的末尾添加元素。
• 格式: 数组变量名.push(元素1,元素2…);
• 返回值：插入元素后的数组的长度。

pop()

• 功能：从数组的末尾取下一个元素。
• 格式： 数组变量名.pop();
• 返回值：取下的元素。

shift()

• 功能：从数组的头部取下一个元素。
• 格式：数组变量名.shift();
• 返回值：取下的元素。

unshift()

• 功能：往数组的头部添加元素。
• 格式：数组变量名.unshift(元素1,元素2…);
• 返回值：插入元素后的数组的长度。

例：

    var a = new Array(10,20,30);
    var b = a.push(40,50);
    console.log(a);  //[10, 20, 30, 40, 50]
    console.log(b);  //5

    var a = new Array(10,20,30);
    var b = a.pop(40,50);
    console.log(a);  //[10, 20]
    console.log(b);  //30

    var a = new Array(10,20,30);
    var b = a.shift(40,50);
    console.log(a);  //[20, 30]
    console.log(b);  //10

    var a = new Array(10,20,30);
    var b = a.unshift(40,50);
    console.log(a);  //[40, 50, 10, 20, 30]
    console.log(b);  //5

3.函数

什么是函数？

• 存放一段可执行代码的盒子。

使用函数的步骤：

• 定义函数 把代码放到盒子里。（封装函数）
• 调用函数 直接操作盒子

函数的分类：

• 系统内置函数

• 例：alert();document.write();console.log();Number();parseInt();

• 自定义函数

• 定义函数的两种方式：

• 声明式:

• function 函数名(参数1【可选】) {
    代码块。
     return 返回值。【可选】
  };
  function ：声明函数的关键字
  函数名：与变量名的概念一样，命名规则也一样。

• 赋值式:

• var 函数名 = function(参数1【可选】) {
    代码块。
     return 返回值。【可选】
  };

• 区别：

• 调用结果还是调用方式都是一样。
• 声明式函数可以在任意位置调用。
• 赋值式函数只能在定义函数之后调用。

函数的优点：

• 简化代码，提高开发效率。
• 有利于维护。

调用函数的格式：

• 函数名()；

retrun:

• 关键字。结束当前函数，将return后面的值作为函数的运行结果返回。

【注意】

• 函数内定义的变量，无法在函数外使用。
• 函数外的变量，可以在函数内使用。

根据参数与返回值的不同，可将函数分为4种：

• 无参数无返回值。
• 有参数无返回值。
• 无参数有返回值
• 有参数有返回值。

【注意】

• 函数名 和 函数名()是不一样的。函数名是一个变量，表示这个函数。函数名()是指执行这个函数体内的代码。

形参：

• 写在函数定义阶段（）里面，只能在函数内部使用。值由函数的实参决定。

实参：

• 写在函数调用阶段（）里面。实参会将自身的值赋值给形参。

传参：

• 将实参的值赋值给形参的过程。
  【注意】形参与实参，可以写多个。写多个时，中间用逗号分隔。

实参与形参个数的关系：

• 一般来说，实参与形参要保持一致。
• 一致的时候，从左到右一一对应。
• 实参多:多出来的参数，没有形参接收的。相当于被抛弃掉了.
• 形参多：多出来的形参没有实参赋值，就相当于变量只声明不赋值，结果是undefined。

例：

    function getMax(x, y) {
      if (x > y) {
        document.write(x) //19 15
        return x;
      } else {
        document.write(y)
        return y;
      }
    }
    console.log(getMax(19, 16));  //19
    getMax(15, 14);
    
    
    function getMaxcd() {
      var c = 15;
      var d = 14;
      if (c > d) {
        document.write(c)  //15
      } else {
        document.write(d)//不执行
      }
    }
    getMaxcd();  //15


    function getMax(){
      console.log("执行了一次"); //执行了一次
      var a = 10;
      var b = 12;
      if (a > b) {
        return a;
      } else {
        return b;
      }
    }
    var max = getMax();
    console.log(max);  //12


    function getMax(a, b) {
      if (a > b) {
        return a;
      } else {
        return b;
      }
    }

3.封装函数

封装函数的步骤：

• 将同属于一个功能的代码抽离出来，作为函数的执行语句，放在函数体{}中。
• 分析有没有不确定的值。将不确定的值作为形参。
• 如果需要对执行的结果进行不同的操作处理，则定义返回值。否则，可以不需要。

例：

    // 无参数无返回值。
    function getSum() {
      var sum = 0;
      for (var i = 1; i <= 100; i++) {
        sum += i;
      }
      console.log(sum);  //什么也没有
    }

    // 无参数有返回值
    function getSum() {
      var sum = 0;
      for (var i = 1; i <= 100; i++) {
        sum += i;
      }
      return sum;
    }  什么也没有

    // 有参数有返回值
    function getSum(n) {
      var sum = 0;
      for (var i = 1; i <= n; i++) {
        sum += i;
      }
      return sum;
    }
    var sum = getSum(200);
    document.write(sum); //20100
    console.log(sum);  //20100

5.arguments

问题：参数不固定怎么办？

• arguments:

• 每个函数都有一个arguments。使用存储传入的参数。
• arguments的结构类似于数组。（伪数组：不能使用数组的一些方法。但是用法与数组类似。）

• 使用形参：让代码更容易阅读和理解。

• 使用方法：

• 访问第n个参数： arguments[n]
• 获取最后一个参数：arguments[arguments.length-1]
• 获取参数的个数:arguments.length

---

案例练习

• 打印100-200之间所有能被3或者7整除的数。

    function fn(a, b) {
      var arr = new Array();
      for (var i = a; i <= b; i++) {
        if (i % 3 == 0 || i % 7 == 0) {
          arr.push(i);
        }
      }
      return arr;
    }
    var ar = fn(100, 200);
    console.log(ar);
    for (var i = 0; i < ar.length; i++) {
      document.write(ar[i] + '，');
    }

• 定义一个函数，计算三个数的大小，返回最大值。

    function getMax(a, b, c) {
      if (a >= b && a >= c) {
        return a;
      } else if (b >= a && b >= c) {
        return b;
      } else {
        return c;
      }
    }
    console.log(getMax(16, 15, 18));  //18

• 加密：

• 加密规则：每位数+5，除以10得到余数，代替当前的数，将第一位和第四位交换，第二位和第三位交换。得到的数就是加密的数。返回该加密后的数字。

    function encrypt() {
      var num = Number(prompt("请输入一个四位数"));  //随便输入4位数  // 例：2589
      if (num >= 1000 && num <= 9999) {
        //千位
        var q = parseInt(num / 1000);
        //百位
        var b = parseInt(num / 100) % 10;
        //十位
        var s = parseInt(num / 10) % 10;
        //个位
        var g = num % 10;
        q += 5;
        b += 5;
        s += 5;
        g += 5;
        q = q % 10;
        b = b % 10;
        s = s % 10;
        g = g % 10;
        num = "" + g + s + b + q;
        return num;
      } else {
        alert("瞎吗？四位数！！")
      }
    }
    alert(encrypt());    //4307

• 创建表格函数：

• 创建一个函数，用来创建表格，参数：行和列
• 动态拼接一个字符串。字符串中包含html标签。

    var r = Number(prompt("请输入行数！"));
    var c = Number(prompt("请输入列数"));
    function createTable(row, col) {
      var str = '<table class="table table-striped table-bordered">';
      // 添加tr
      for (var i = 0; i < row; i++) {
        str += '<tr>'
        // 添加td
        for (var j = 0; j < col; j++) {
          str += '<td>' + (i + 1) + '行' + (j + 1) + '列</td>';
        }
        str += '</tr>';
      }
      str = str + '</table>';
      document.write(str);
    }
    createTable(r, c);