JavaScript语法基础学习——数组&函数

---

前言

因为JavaScript语法和C语言很类似，所以这部分会过得很快，就当复习C语言啦。

一、JavaScript 数组

1. 数组的概念

2. 创建数组

2.1 数组的创建方式

JS 中创建数组有两种方式：

• 利用 new 创建数组
• 利用数组字面量创建数组

2.2 利用 new 创建数组

2.3 利用数组字面量创建数组

2.4 数组元素的类型

3. 获取数组中的元素

3.1 数组的索引

• 如果索引号超出则显示 undefined

4. 遍历数组

遍历： 就是把数组中的每个元素从头到尾都访问一次（类似我们每天早上学生的点名）。

4.1 数组的长度

使用“数组名.length”可以访问数组元素的数量（数组长度）。

4.2 课堂案例1：数组求和及平均值

求数组[2, 6, 1, 7, 4]里面所有元素的和以及平均值。

var arr = [2, 6, 1, 7, 4];
        var sum = 0, average = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
        }
        average = sum / arr.length;
        console.log(sum);
        console.log(average);

4.3 课堂案例2：数组最大值

求数组[2, 6, 1, 77, 52, 25, 7]中的最大值。

var arr = [2, 6, 1, 77, 52, 25, 7];
        var max = arr[0];
        for (var i = 1; i < arr.length; i++) {
            if (max < arr[i]) {
                max = arr[i];
            }
        }
        console.log(max); // max = 77

4.4 课堂案例3：数组转换为分割字符串

var arr = ['red', 'green', 'blue', 'pink'];
        var str = '';
        for (var i = 0; i < arr.length; i++) {
            str += arr[i] + '|';
        }
        console.log(str);

5. 数组中新增元素

可以通过修改length长度 以及 索引号增加数组元素

5.1 通过修改 length 长度增加数组元素

5.2 通过修改数组索引号长度增加数组元素

5.3 课堂案例1：数组新增元素

新建一个数组，里面存放10个整数（1~10）

var arr = [];
        for (var i = 0; i < 10; i++) {
            arr[i] = i + 1;
        }
        console.log(arr);

5.4 课堂案例2：筛选数组

将数组[2, 0, 6, 1, 77, 0, 52, 25, 7]中大于等于10的元素选出来，放入新数组。

5.4.1 方法1

var arr = [2, 0, 6, 1, 77, 0, 52, 25, 7];
        var newArr = [], j = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                newArr[j] = arr[i];
                j++;
            }
        }
        console.log(newArr);

5.4.2 方法2

var arr = [2, 0, 6, 1, 77, 0, 52, 25, 7];
        var newArr = [];
        // var j=0;
        // 此时newArr.length = 0
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                newArr[newArr.length] = arr[i];
                // j++;
                // newArr.length 加1
            }
        }
        console.log(newArr);

6. 数组案例

6.1 数组排序（冒泡排序）

冒泡排序： 是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小）。
例如：我们可以将数组[5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出1，2，3，4，5

var arr = [5, 4, 3, 2, 1];
        for (var i = 0; i <= arr.length - 1; i++) { //外层循环管趟数
            for (var j = 0; j <= arr.length - i + 1; j++) {  //里层循环管每一趟交换的次数
                // 内部交换2个变量的值 前一个和后一个数组元素相比较
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);

二、JavaScript 函数

1. 函数的概念

2. 函数的使用

函数在使用时分为两步：声明函数和调用函数。

2.1 声明函数

2.2 调用函数

2.3 函数的封装

2.4 案例：利用函数计算1~100之间的累加和

<script>
        // 1. 声明函数
        function getsum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            console.log(sum);
        }
        // 2. 函数的调用
        getsum(1, 100);
    </script>

3. 函数的参数

3.1 形参和实参

3.2 函数形参和实参不匹配问题

3.3 小结

4. 函数的返回值

4.1 return 语句

有的时候，我们会希望函数将值返回给调用者，此时通过使用return语句就可以实现。

4.2 案例

4.2.1 案例1：利用函数求任意两个数的最大值

<script>
        function getMax(num1, num2) {
            // if (num1 > num2) {
            //     return num1;
            // } else {
            //     return num2;
            // }
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(3, 1));;
        console.log(getMax(23, 45));;
        console.log(getMax(99, 100));;
    </script>

4.2.2 案例2：利用函数求任意一个数组中的最大值

求数组[5, 2, 99, 101, 67, 77]中的最大数值。

<script>
        function getArrMax(arr) { // arr 接受一个数组
            var max = arr[0];
            for (var i = 1; i <= arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i];
                }
            }
            return max;
        }
        var result = getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
        console.log(result);
    </script>

4.3 return 终止函数

return 语句之后的代码不会执行。

4.4 return 的返回值

return 只能返回一个值，如果用逗号隔开多个值，以最后一个为准。可以通过 数组 来返回多个值。

4.5 函数没有 return 返回 undefined

函数都是有返回值的
1.如果有return则返回return后面的值
2.如果没有return则返回undefined

4.6 break、continue、return 的区别

• break： 结束当前的循环体（如：for、while）
• continue： 跳出本次循环，继续执行下次循环（如：for、while）
• return： 不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

5. arguments 的使用

5.1 案例：利用函数求任意个数的最大值

<script>
        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(1, 2, 3));
        console.log(getMax(10, 52, 23, 78));
        console.log(getMax(100, 520, 203, 78, 234));
    </script>

6. 函数案例

6.1 案例1：利用函数封装方式，翻转任意一个数组

<script>
        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, 4, 6, 9]);
        var arr2 = reverse([11, 22, 33, 44, 55, 66, 77, 88, 99]);
        console.log(arr1);
        console.log(arr2);
    </script>

6.2 案例2：利用函数封装方式，对数组排序 —— 冒泡排序

<script>
        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);
        var arr2 = sort([11, 7, 22, 999])
        console.log(arr2);
    </script>

6.3 案例3：判断闰年

要求：输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整除，或者能被400整除）

<script>
        function isLeapYear(year) {
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
        console.log(isLeapYear(2000));
        console.log(isLeapYear(1999));
        console.log(isLeapYear(2022));
    </script>

6.4 案例4：函数可以调用另外一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。

6.4 案例5：用户输入年份，输出当前年份2月份的天数

如果是闰年，则2月份是29天，如果是平年，则2月份是28天。

<script>
        function backDay() {
            var year = prompt('请您输入年份：');
            if (isLeapYear(year)) {
                alert('当前年份是闰年\n2月份有29天');
            } else {
                alert('当前年份是平年\n2月份有28天');
            }
        }
        function isLeapYear(year) {
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
        backDay();

7. 函数的两种声明方式