前端学习笔记-JS-数组

数组

 

数组的概念

所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

 

数组的定义

数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。

1.通过数组字面量创建数组（使用较多）

// 创建一个空数组
var arr1 = []; 
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 

2.通过 new 关键字创建数组

var arr=new Array();

获取数组元素

数组的取值

// 格式：数组名[下标]   下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。

var arr = ['red', 'green', 'blue'];
arr[0]; // red  数组下标从 0 开始
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined

 

获取数组长度

// 可以通过数组的length属性获取数组的长度
console.log(arr.length);

 

遍历数组

遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。

数组遍历的基本语法：

for(var i = 0; i < arr.length; i++) {
    // 数组遍历的固定结构
}

案例

<!--求数组最大值-->
<script>
    var arr = [2, 6, 1, 77, 52, 25, 7];
    var max = arr[0];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    console.log(max);
</script>

 

数组中新增元素

1.通过修改length长度新增数组元素

 通过修改length长度来实现数组扩容的目的

 length属性是可读写的。

 <script>
        // 1. 新增数组元素 修改length长度 
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素 
        console.log(arr);
        console.log(arr[3]); // undefined
        console.log(arr[4]); // undefined
</script>

2.通过修改数组索引新增数组元素

   可以通过修改数组索引的方式追加数组元素

   不能直接给数组名赋值，否则会覆盖到以前的数据

 <script>
        // 2. 新增数组元素 修改索引号 追加数组元素
        var arr1 = ['red', 'green', 'blue'];
        arr1[3] = 'pink';
        console.log(arr1);
        arr1[4] = 'hotpink';
        console.log(arr1);
        arr1[0] = 'yellow'; // 这里是替换原来的数组元素
        console.log(arr1);
        arr1 = '有点意思';
        console.log(arr1); // 不要直接给 数组名赋值 否则里面的数组元素都没有了
 </script>

案例：

    <script>
        // 新建一个数组，里面存放10个整数（ 1~10）
        // 核心原理：使用循环来追加数组。
        // 1、声明一个空数组 arr。
        // 2、循环中的计数器 i  可以作为数组元素存入。
        // 3、由于数组的索引号是从0开始的， 因此计数器从 0 开始更合适，存入的数组元素要+1。
        var arr = [];
        for (var i = 0; i < 100; i++) {
            // arr = i; 不要直接给数组名赋值 否则以前的元素都没了
            arr[i] = i + 1;
        }
        console.log(arr);
    </script>

<!--需求：将数组[2，6，7，0，56，6，99]中大于10的元素筛选出来，放入新的数组-->
<script>
    方法一：
    var temporary = 10;
    var arr1 = [2, 66, 7, 0, 56, 6, 99];
    var arr2 = [];
    var j = 0;
    for (var i = 0; i < arr1.length; i++) {
        if (arr1[i] > temporary) {
            arr2 [j] = arr1[i];
            j++;
        }
    }
    console.log(arr2);
</script>

<!--需求：将数组[2，6，7，0，56，6，99]中大于10的元素筛选出来，放入新的数组-->
<script>
    方法二：巧妙利用新数组arr2的数组长度
    var temporary = 10;
    var arr1 = [2, 66, 7, 0, 56, 6, 99];
    var arr2 = []; // 因为声明的数组为空，所以arr2.length为0
    for (var i = 0; i < arr1.length; i++) {
        if (arr1[i] > temporary) {
            arr2 [arr2.length] = arr1[i]; // 当arr2数组存入数据时，arr2.length会自动检查，更新值
        }
    }
    console.log(arr2);
</script>

 

翻转数组

<script>
    // 翻转数组
    var arr = ['七海灯子', '小糸侑', '蓝原芽衣', '蓝原柚子'];
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    console.log(newArr);
</script>

 

冒泡排序

是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小）

算法核心：一次比较两个元素，如果他们的顺序错误就把他们交换过来。

<script>
       /*   冒泡排序
                                         5 4 3 2 1
          i=0       第一趟 length-1      4 3 2 1 5         交换4次(length-i-1)
          i=1       第二趟               3 2 1 4 5         交换3次
          i=2       第三趟               2 1 3 4 5         交换2次
          i=3       第四趟               1 2 3 4 5         交换1次*/
    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++) {// 内层循环控制每趟交换了多少次
            //两两比较 较大的赋值给后面的元素
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr);
</script>