博学谷学习记录 | 学习总结，用心分享 | 前端学习之JS（三）

1 数组（Array）

1.1 定义

1.概念

数组是一种可以按顺序保存数据的数据类型，它的内部可以存储任意类型的数据，可以是数字类型、字符串类型、布尔类型，甚至是空类型（null）、未定义类型（undefined）和引用类型等等。

2.为什么需要数组

在现实世界中存在着大量性质相同或者性质相似，又或者为了实现同一目的而聚集起来的各种数据，比如包含姓名、年龄、性别、居住地、工作等信息的一万、十万甚至一百万个人的个人信息，若将这些数据分散保存，比如给某个人的姓名、年龄、性别、居住地、工作等信息分别设置一个变量，那将会产生大量的信息冗余，不仅浪费存储空间，而且对操作人员来说极不友好，因此，我们需要一个能够将大量数据汇集在一起，并且对这些数据进行增、删、改、查操作时要方便快捷的东西，那便是数组了。

3.数组的表示

 

数组中的数据按顺序保存，从0号开始往后依次增加，每个数据都有自己独一无二的编号，这些编号在数组里叫做索引或下标。若要用到其中的一个数据，则有 数组名[下标] 的表示方法，例如

在一个数组中保存着的每一个数据都被称作元素，每个元素的编号（从0开始）都被称作下标，数组中数据的个数被称作数组的长度（可通过数组特有属性length来获取）。

1.2 遍历数组

数组中的数据个数众多，若仅表示其中的某一个或某几个元素时还可以用 数组名[下标] 的方式，但若想要表示数组中大量元素（成百上千）时，一个个的表示就显得略显笨拙了。这时，我们就需要用到 for 循环来表示数组中的元素，这也是数组表示方式里非常重要的一种方法。

    <script>
      let arr = [1, 2, 3, 4, "1", "2"];
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }
    </script>

 其思想就是利用依次递增的下标来表示数组里的每一个元素。

1.3 查、改、增、删

1.查

查找数组元素也可被称为访问数组元素或者表示数组元素，其方法非常简单，就是利用 数组[下标] 的方式来进行查找（亦或叫访问）数组元素。

2.改

修改数组中元素也就是给数组中元素重新赋，其方式是 数组[下标]=新值 ，

    <script>
      let arr = [1, 2, 3, 4, "1", "2"];
      arr[1] = 7 //将下标为1的元素的值改为7
      console.log(arr);
    </script>

3.增

①数组.push(新增的内容) 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 （重要）

    <script>
      let arr = [1, 2, 3, 4, "1", "2"];
      arr.push(1,2,3)
      console.log(arr.push());
      console.log(arr);
    </script>

 

②数组.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度（重要）

<script>
      let arr = [1, 2, 3, 4, "1", "2"];
      arr.unshift(7,8,9)
      console.log(arr.unshift());
      console.log(arr);
    </script>

 

4.删 

①数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值

<script>
      let arr = [1, 2, 3, 4, "1", "pop"];
      console.log(arr.pop());
      console.log(arr);
    </script>

 

 ②数组. shift() 方法从数组中删除第一个元素，并返回该元素的值

    <script>
      let arr = ['shift', 2, 3, 4, "1", "pop"];
      console.log(arr.shift());
      console.log(arr);
    </script>

 

③数组. splice() 方法 删除指定元素 

 Ⅰstart 起始位置:指定修改的开始位置（从0计数）
ⅡdeleteCount:表示要移除的数组元素的个数，是一个可选值，如果省略则默认从指定的起始位置删除到最后

    <script>
      let arr = ['splice', 2, 3, 4, "1", "pop"];
      arr.splice(0,1) //从0号位开始，删除一个元素
      console.log(arr);
    </script>

    <script>
      let arr = ['splice', 2, 3, 4, "1", "pop"];
      arr.splice(1,2) //从1号位开始，删除两个元素
      console.log(arr);
    </script>

 

2 函数

2.1 定义

1.函数是什么

函数是被设计成执行特定任务的代码块。

2.为什么需要函数

当我们需要反复使用某些代码去解决问题时，就可以将这些代码封装起来，使这些代码可以复用，提高开发效率。

3.如何定义函数

函数的定义可分为关键字 function 、函数名（可有可无）、小括号（形参可有可无）以及大括号（包裹函数体）。

关键字 function 在绝大多数函数定义时都要写，不能省略。

函数名可写可不写，有函数名的函数就是一般函数，没有函数名的就是匿名函数。函数命名时也有其自己的规范：①和变量命名基本一致②尽量小驼峰式命名法③前缀应为动词（比如can、has、get、set、is、load等）。

小括号不能省略，括号内的是传入函数体的形式参数（形参），对于某些不需要传入参数的函数来说，括号内可不写内容。

大括号内的是需要执行的代码，可写可不写，若不写的话就代表着函数不进行任何操作。

2.2 使用

1.函数传参

当我们想要把手上的数据交给函数体内的代码进行处理时，就需要用到传参调用，其语法写作

 参数列表可由一个参数组成，也可由多个参数组成（多个参数用逗号隔开），这里的参数叫做形式参数，即形参。形参可以理解为在函数内声明的变量，能够在不同的人使用函数时得到正确的结果。

    <script>
      function fn1(num) {//单个形参
        console.log(num);
      }
      function fn2(num1,num2) {//两个形参
        console.log(num1,num2);
      }
      function fn3(num1,num2,num3,num4,num5) {//多个形参
        console.log(num1,num2,num3,num4,num5);
      }
    </script>

2.函数的调用

就像拥有前进功能的汽车并不会时时刻刻都在前进，而是只有人们需要它前进时才会前进一样，当一个函数被定义之后并不会立马执行，而是在被调用后才会执行，调用的方式也很简单，就是 函数名+()。

当我们不需要向函数内部传入参数时，直接写成 函数名+() 即可。

若我们想要向函数内传入多个数值，则要写成 函数名+(实参列表) 的形式。 

    <script>
      function fn1(num) {//单个形参
        console.log(num);
      }
      fn1(1)

      function fn2(num1,num2) {//两个形参
        console.log(num1,num2);
      }
      fn2(1,2)

      function fn3(num1,num2,num3,num4,num5) {//多个形参
        console.log(num1,num2,num3,num4,num5);
      }
      fn3(1,2,3,4,5)
    </script>

 我们还可以给函数里的参数附上默认值，这个默认值只会在缺少实参参数传递时才会被执行，这样的话即使我们在调用函数时不向形参传入数据，函数内部的代码也能正常地运行，需要注意的是，有默认值的参数必须放在参数列表的最后，不能随意摆放位置。

    <script>
      function fn(num1, num2, num3, num4, num5 = 0) { 
        //num5赋默认值，即使在调用时不给num5传值，函数也能正常运行
        console.log(num1 + num2 + num3 + num4 + num5);
      }

      fn(1, 2, 3, 4);
      fn(1, 2, 3, 4, 5);//如果有实参传入，则会覆盖掉默认值
    </script>

3.返回值

我们将数据传入函数后，若想要使用函数处理后的结果，就要用到函数的 return 功能，它能将函数内处理后的结果返回到使用函数者手上。

    <script>
      function fn(num1, num2, num3, num4, num5) {
        let sum = num1 + num2 + num3 + num4 + num5;
        return sum;
      }

      let total = fn(1, 2, 3, 4, 5);
    </script>

上面这个函数的功能就是将传入的5个数进行求和操作，然后将 和 返回到使用函数者手上，使用者只需要用一个变量接过返回值，就能在后续的代码中使用这个返回值了。

在使用 return 时，需要注意以下几点：

① 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

② return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写

③ return函数可以没有 return，这种情况函数默认返回值为 undefined

2.3 作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。在JavaScript中，分为全局作用域和局部作用域

而根据作用域的不同，变量也可分为 

变量的访问原则：

①只要是代码，就至少有一个作用域
②写在函数内部的局部作用域
③如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
④在能够访问到的情况下先找局部， 局部没有在找全局

    <script>
      let a = 1
      function fn1() {
        let a = 2
        let b = '22'
        fn2()
        function fn2() {
          let a = 3
          fn3()
          function fn3() {
            let a = 4
            console.log(a) //a的值 ?
            console.log(b) //b的值 ?
          }
        }
      }
      fn1()
    </script>

其结果是数字类型的4和字符串类型的22

2.4 匿名函数

匿名函数顾名思义就是没有名字的函数，写作

    <script>
      function(){
        console.log('这是匿名函数');
      }
    </script>

它无法直接使用，若想要使用，则可利用 ①函数表达式 ②立即执行函数 这两种方式。

1.函数表达式

函数表达式就是将匿名函数赋值给一个变量，并且通过变量名称进行调用。
 

 

2.立即执行函数

立即执行函数是一种不用外部调用就可以执行的函数，其存在的目的是避免全局变量之间的污染。它有两种写法①(function(){})()②(function(){}()) ，需要注意的是，在此函数和后续的代码间必须要添加分号（；），否则会报错。

 

    <script>
      (function(){}()); //分号写在函数后面

      (function(){})()
      ;console.log('分号写在这行代码的前面') //分号写在后续代码的最前面
    </script>