欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript 基础四 数组的创建;遍历数组;新增数组元素;普通函数的使用;return 返回值

程序员文章站 2022-04-10 15:45:00
...

1.0 数组的概念 Array

数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。
数组是一种将一组数据存储在单个变量名下的优雅方式。

2.1 数组的创建方式

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

  1. 利用 new 创建数组
  2. 利用数组字面量创建数组

2.2 创建数组

         1.数组(Array): 就是一组数据的集合  存储在单个变量下的优雅方式
         
         2.利用 new 创建数组
        var arr = new Array(); // 创建了一个空数组
        
         3.利用数组字面量创建数组 []
        var arr = [];
        var arr1 = [1, 2, 'pink老师', true];
        
         4.我们数组里面的数据一定用逗号隔开
         5.数组里面的数据  比如1,2  我们称为数据元素
         6.获取数组元素 格式  数组名[索引号] (索引号从0开始!)
    </script>

2.3 遍历数组

遍历: 就是把数组中的每个元素从头到尾都访问一次。(通过 for 循环索引遍历数组中的每一项)

        // 遍历数组:就是把数组的元素从头到尾访问一次
        var arr = ['red', 'green', 'blue'];
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]);
        }
        // 1.因为我们的数组索引从0开始,所以 i 必须从 0 开始 i<3;
        // 2.输出的时候 arr[i]  i 计数器当索引号来用

2.4 数组的长度

使用“数组名.length”可以访问数组元素的数量(数组长度)。
他可以动态监测数组元素的个数

2.4 数组案例

         求数组中 最大值
        // 声明一个保存最大元素的变量 max
        // 默认最大值可以去元素中的第一个元素
        // 遍历这个数组,把里面每个数组元素和max相比较
        // 如果这个数组元素大于max,就把这个数组元素存到max里面, 否则继续下一轮比较
        // 最后输出这个max
        var arr = [2, 6, 1, 77, 52, 25, 7];
        var max = arr[0];
        for (i = 1; i < arr.length; i++) { // 因为 max等于0了  所以i可以从1开始  
            if (max < arr[i]) {
                max = arr[i];
            }
        }
        console.log(max);

3.0 数组中的新增元素

  1. 可以通过修改 length 长度来实现数组扩容的目的
  2. 可以通过修改数组索引的方式追加数组元素(不能直接给数组名赋值,否则会覆盖掉以前的数据)
        1.通过修改length长度来实现数组扩容的目的,
        var arr = [1, 2, 3, 4];
        arr.length = 8;
        console.log(arr);
        console.log(arr[7]); // 为空 声明了变量 没有给值;  undefined

        2.通过修改数组索引 新增数组元素
        var arr1 = ['pink', 'green', 'blue'];
        arr1[3] = 'red';
        console.log(arr1);
        arr1[0] = 'yeelow'; // 这里是替换原来的元素
        console.log(arr1);

3.1 数组案例

		1. 大于等于10的元素选出来,放入新数组
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var arr1 = [];
        var j = 0; // 通过新建一个 变量 来进行  j++ 就是表示 下一个 就是第2个
        for (i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新数组应该从0开始  依次递增  不能从 i 开始, 第一个是77  从i 开始 前面就会多出3个空的数组
                arr1[j] = arr[i]
                j++;
            }
        }
        console.log(arr1);
        // 方法 2
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var arr1 = [];
        // 刚开始  arr1.length  就是0
        for (i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新数组索引号应该从0开始 依次递增
                arr1[arr1.length] = arr[i]
            }
        }
        console.log(arr1);
        
		2. 删除指定数组元素
        var newArr = [];
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        for (i = 0; i < arr.length; i++) {
            if (arr[i] !== 0) {
                arr1[newArr.length] = arr[i]
            }
        }
        console.log(newArr);

		3. 翻转数组
        // 把旧数组索引号第4个取过来(arr.length - 1),给新数组索引号第0个元素 (newArr.length)
        // 我们采取递减的方式 i--           
        var arr = ['purple', 'pink', 'blue', 'green', 'red', ]
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i]
        }
        console.log(newArr);

		4. 冒泡排序
		// 核心原理:一次比较两个元素,如果他们的顺序错误就把他们交换过来。
        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);

1.0 函数的概念

在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。

**函数:**就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

2.0 函数的使用

函数在使用时分为两步:

  1. 声明函数(将函数名命名为动词,比如 getSum)
  2. 调用函数(函数不调用,自己不执行。)
        // 利用函数计算1-100之间的累加和
        // 1. 声明函数    函数名命名为动词  驼峰命名法
        function getSum() {
            var sum = 0;
            for (var i = 1; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);
        }
        // 2. 调用函数  千万不要忘记添加小括号
        getSum();

3.0 函数的参数

3.1 形参和实参

在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参

而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参

        // 1. 利用函数求任意两个数的和
        function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        getSum(1, 3);
        getSum(3, 8);

        // 2. 利用函数求任意两个数之间的和
        function getSums(start, end) {
            var sum = 0;
            for (i = start; i <= end; i++) {
                sum += i;
            }
            console.log(sum);
        }
        getSums(1, 100);
        getSums(1, 10);
        // 3.注意点
        // 多个参数之间用逗号隔开
        // 形参可以看做是不用声明的变量

3.2 形参的个数可以和实参个数不匹配

实参多余形参个数,只取形参的个数。

实参小余形参个数,多的形参定义为 undefined ,结果为 NaN

4.0 函数的返回值

4.1 return 语句

  1. 在使用 return 语句时,函数会停止执行,并返回指定的值
  2. 如果函数没有 return ,返回的值是 undefined
      1. 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名()通过 return 实现的

      2. 只要函数遇到 return 就把后面的结果 返回给函数的调用者  函数名() = return后面的结果 */

4.2 return 注意事项

         1. return 终止函数
        function getSum(num1, num2) {
            return num1 + num2;
            alert('我不会被执行了!');
        }
        console.log(getSum(1, 2));
        
         2. return   只能返回一个值!
        function fn(num1, num2) {
            return num1, num2; // 他只返回 num2 的值   num1 忽略   所以可以用数组把这两个值 包含 进去
        }
        console.log(fn(1, 2));
        
         3. 我们任意两个数的  加减乘数效果
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num2 * num1];
        }
        var re = getResult(1, 2);
        console.log(re);
         4. 如果有 return 则返回 return 后面的值
         5. 如果没有  则返回 undefined