二十四、数组

发表于 | 更新于: | 分类于 ， ， |
| 字数: 3.3k | 时长 ≈ 15 分钟

二十四、数组

24.1 数组的定义

使用[]表示数组，数组中用英语的逗号进行项的分割。

1
2
3
4
5
<script>
        // 数组，数组的英语叫做array，所以经常用arr变量名
        var arr =["白板", "幺鸡", "二万", "三饼", "四条"];
        console.log(arr);
</script>

UPZAIJ.png

数组中，虽然JS不限制我们必须放同类型的值，但是尽量放相关的、同类型的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    // 数组，数组的英语叫做array，所以经常用arr变量名
    // 一组麻将牌
    var arr1 = ["白板", "幺鸡", "二万", "三饼", "四条"];
    // 一组扑克牌
    var arr2 = ["8", "J", "Q", "Q", "K", "K", "A", "2", "小王", "大王"];
    // 一组数字，表示2019年四个季度的产量
    var aar3 = ["23", "65", "84", "23"];
    // 一组布尔值，表示四个导师为你转身的情况
    var arr4 = [true, true, false, false];
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);
</script>

24.2 项的枚举

可以使用下标枚举出数组的任意一项，下标从 0 开始。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    // 数组，数组的英语叫做array，所以经常用arr变量名
    // 一组麻将牌
    var arr1 = ["白板", "幺鸡", "二万", "三饼", "四条"];
    // 输出显示数组下标为 0 的项
    console.log(arr1[0]);
    // 输出显示数组下标为 1 的项
    console.log(arr1[1]);
    // 输出显示数组下标为 2 的项
    console.log(arr1[2]);
    // 输出显示数组下标为 3 的项
    console.log(arr1[3]);
</script>

UPZdL8.png

24.3 数组的长度

数组有length属性，表示数组的长度。length从1开始数

1
2
// 输出数组的长度
console.log(arr1.length);       // 5

下标从 0 开始数，个数从 1 开始数。所以数组最后一项的下标，是长度 - 1。

1
2
3
4
5
6
7
8
9
10
<script>
        // 数组，数组的英语叫做array，所以经常用arr变量名
        // 一组麻将牌
        var arr1 = ["白板", "幺鸡", "二万", "三饼", "四条"];

        // 输出数组的长度
        console.log(arr1.length);
        // 输出数组最后一项
        console.log(arr1[arr1.length - 1]);
</script>

UPetk4.png

24.4 使用for循环遍历数组

使用循环语句，遍历数组非常方便

1
2
3
4
5
6
7
8
9
for(var i = 0 ; i <= arr1.length - 1 ; i++){
        console.log(arr1[i]);
    }
    
    console.log("******************************");

    for(var i = 0 ; i < arr1.length ; i++){
        console.log(arr1[i]);
    }

UPes0O.png

这个for循环非常的好记忆，形态非常好，从0到arr.length,注意用小于号，不是小于等于。

24.5 体验一下数组的小算法

例1：寻找数组中的双数

1
2
3
4
5
6
7
8
9
<script>
    //使用数组的for循环遍历输出所有的偶数
    var arr = [34, 33, 46, 46, 42, 65, 88, 65, 64, 89, 90, 64, 95, 66];
    for (var i = 0 ; i < arr.length ; i++){
        if(arr[i] % 2 == 0){
            console.log(arr[i]);
        }
    }
</script>

UPeqhj.png

相当于数组是一个传送带，能够让我们依次检查里面每一项

例2：寻找数组中的最大值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    // 寻找数组中的最大值
    var arr = [34, 33, 46, 46, 42, 65, 88, 65, 64, 89, 90, 64, 95, 66];
    // 先假设最大值是数组的下标为0的项
    var max = arr[0];
    // 然后从下标为 1 的项，开始遍历（注意，不是从 0 开始）
    for (var i = 1 ; i < arr.length ; i++){
        // 你如果比当前的max大，你就成为max
        if(arr[i] > max){
            max = arr[i];
        }
    }
    console.log("最大值为：" + max);            //  95
</script>

例3：数组的每一项值得总和、及平均数

1
2
3
4
5
6
7
8
9
10
<script>
    var arr = [34, 33, 46, 46, 42, 65, 88, 65, 64, 89];
    // 累加器
    var sum = 0;
    for(var i = 0 ; i < arr.length ; i++){
        sum += arr[i];
    }
    console.log("数组的总和：" + sum);                      // 572
    console.log("数组的平均数：" + sum / arr.length);       // 57.2
</script>

24.6 数组的方法

“方法”就是一个东西能够“打点”掉的函数，表示这个东西做什么事了。

方法是命令，是要求这个东西立即执行什么事情，比如命令小明吃饭：

小明.吃饭();

可以加参数

小明.吃饭(麻辣烫);

吃饭就是方法。

24.6.1 头尾操作push pop unshift shift

1
2
3
4
push()          尾插
pop()           尾删
unshift()       头插
shift()         头删

比如：

例1：push() 尾插

1
2
3
4
5
<script>
    var arr = ["A", "B", "C", "D"];
    arr.push("E");
    console.log(arr);
</script>

UPm38A.png

例2：pop() 尾删

1
2
3
4
5
<script>
    var arr = ["A", "B", "C", "D"];
    arr.pop();
    console.log(arr);
</script>

UPmNb8.png

可以用变量接收一下，表示你删除掉的这个东西，插入也可以用变量接收

1
2
3
4
5
6
<script>
    var arr = ["A", "B", "C", "D"];
    var m = arr.pop();
    console.log(arr);
    console.log(m);       
</script>

UPmf54.png

例3：unshift() 头插

1
2
3
4
5
<script>
    var arr = ["A", "B", "C", "D"];
    arr.unshift("★");
    console.log(arr);
</script>

UPnmzn.png

例4：shift() 头删

1
2
3
4
5
<script>
    var arr = ["A", "B", "C", "D"];
    arr.shift();
    console.log(arr);
</script>

UPnJJJ.png

例5：当需要插入多项时，在（）里写入插入的内容，用逗号隔开

1
2
3
4
5
6
<script>
    var arr = ["A", "B", "C", "D"];
    arr.unshift("1", "2");
    arr.push("一", "二");
    console.log(arr);
</script>

UPu9fJ.png

例6：头尾操作小算法：将一个数组分为奇偶两个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var arr = [34, 34,5,4,676,7,88,99,0,0,7,3,45,445,6,32434,45,56,6,7,89,9,0,23,4,67,232,123,4556,78434,3234342,25456,3243,556546,78,786];
    var jishuArr = [];  // 数组可以为空
    var oushuArr = [];

    for(var i = 0 ; i < arr.length ; i++){
        if(arr[i] % 2 == 0){
            oushuArr.push(arr[i]);
        }else{
            jishuArr.push(arr[i]);
        }
    }
    console.log(jishuArr);
    console.log(oushuArr);
</script>

UPu8nP.png

24.6.2 splice() 多功能

24.6.2.1 修改功能

从下标为 2 的项，连续修改 3 项，即将 C D E 修改为 ★ ▲

1
2
3
4
5
6
<script>
    var arr = ["A", "B", "C", "D", "E", "F"];
    // 从下标为 2 的项，连续修改 3 项，即将 C D E 修改为 ★ ▲
    arr.splice(2, 3, "★", "▲");
    console.log(arr);
</script>

UPujgA.png

24.6.2.2 增加功能

第二个参数为 0 ，表示不删除。此时从下标为 2 的这项的前面，插入“★”，“▲”

1
2
3
4
5
<script>
    var arr = ["A", "B", "C", "D", "E", "F"];
    arr.splice(2, 0, "★", "▲");
    console.log(arr);
</script>

UPKEgs.png

24.6.2.3 删除功能

从下标为 2 的项，连续删除 3 项

当你不写要修改为什么的时候，那就是删除

1
2
3
4
5
<script>
    var arr = ["A", "B", "C", "D", "E", "F"];
    arr.splice(2, 3);
    console.log(arr);
</script>

UPKI2j.png

24.6.2.4 splice（）注意事项

例1：在for循环的时候会影响数组的长度

比如删除，数组中的所有老鼠，如果要正向使用for循环，必须手动减少一下这个 i 变量，否则会跳过去一项。

1
2
3
4
5
6
7
8
9
10
<script>
    var arr = ["易烊千玺", "易烊千玺", "哈哈", "哈哈","哈哈","哈哈","易烊千玺", "易烊千玺", "易烊千玺"];
    for(var i = 0 ; i < arr.length ; i++){
        if(arr[i] == "哈哈"){
            arr.splice(i, 1);
            i--;    // 当删除一项后，后面的项数往前排一位，当遍历下一项的时候回漏掉一个
        }
    }
    console.log(arr);
</script>

UPMCs1.png

或者，倒着遍历删除：

1
2
3
4
5
6
7
8
9
10
<script>
    var arr = ["易烊千玺", "易烊千玺", "哈哈", "哈哈","哈哈","哈哈","易烊千玺", "易烊千玺", "易烊千玺"];
    // 从最后一位（即下标为 arr.length - 1 的那一项) 开始删除，不会影响每一项原来的下标数
    for(var i = arr.length - 1 ; i >=0 ; i--){
        if(arr[i] == "哈哈"){
            arr.splice(i, 1);
        }
    }
    console.log(arr);
</script>
例2：splice() 能够用变量去接收它，表示被删除的元素
1
2
3
4
5
6
7
<script>
    var arr = ["A", "B", "C", "D", "E", "F"];
    var m = arr.splice(4, 2);
    
    console.log(arr);
    console.log(m);
</script>

UPMOOI.png

24.6.3 join()和split()` 方法：字符串和数组相互转换

1
2
字符串变为数组：  split()
数组变为字符串：  join()

24.6.3.1 join() 数组变为字符串

数组调用join() 表示希望用你指定的符号，将数组的每项分隔，组成字符串；

UPQntU.png

如果省略分隔符，生成的字符串每项之间用逗号相隔

UPQG0x.png

如果用空字符串分隔

UPQyHP.png

24.6.3.2 split() 字符串变为数组

split() 是 join() 的逆运算，它可以将字符串变为数组

UPQoBq.png

24.6.4 indexOf() 和includes()方法

24.6.4.1 indexOf()

indexOf()返回指定项在数组中首次出现的位置

UPQvv9.png

如果有多个该值，也只返回下标最小的那个值

UPlpHx.png

如果数组中没有这个值，返回-1

UPlWa6.png

24.6.4.2 includes（）

返回布尔值，true表示存在，false表示不存在

注意拼写，有一个s。

UP1AoV.png

includes从IE8开始兼容

24.6.5 concat()联结项、数组

定义一个arr1 一个arr2，可以让arr3成为两个数组的顺次联结体

UP1hmn.png

注意：在控制台中按shift+回车 表示换行

concat（）可以传入散值（不是数组），也会被顺次联结上

UP1v01.png

24.6.6 slice() 获得子数组

slice(a, b)表示从原数组的下标为a的项开始，截取到下标为b的项，但不包括下标为b的项。

截取的子数组的长度，一定是b – a。

UP3EnA.png

特别的，数字可以是负数，如果是负数，可以理解为取到倒数第几的前一位

UPByb8.png

区分三个拼写相近的：

1
2
3
splice 多功能
split   是字符串变为数组。逆运算是join，就是数组变为字符串
slice   获得子数组

24.6.7 reverse() 方法

倒序数组：只要调用这个方法，数组就能立即被倒序，不需要用等号重新赋值

UPDKZ8.png

24.6.8 toUpperCase()

将字符串转为大写字母

参数：省略

返回值：转换后的新字符串

1
2
3
4
var str = "abcxdefxghixjkl";
console.log(str.split("x"));
console.log(str);
console.log(str.toUpperCase());

UPDYMq.png

24.6.9 toLowerCase()

将字符串转为小写字母

参数：省略

返回值：转换后的新字符串

1
2
3
4
5
var str = "abcxdefxghixjkl";
console.log(str);
var str2 = str.toUpperCase();
console.log(str2);
console.log(str2.toLowerCase());

UPDBi4.png

24.6.10 练习

将“everything is good in its season”，转为每个首字母大写。

即“Everything Is Good In Its Season”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    /*
    将“everything is good in its season”，转为每个首字母大写。
    即“Everything Is Good In Its Season”

    1 先得到每一个单词数组 everything
    2 数组每一项可以使用 = 赋值 everything = E + verything
    3 将数组转为字符串
    */

    // 将字符串转为数组 split()
    var str = "everything is good in its season";
    var arr = str.split(" ");
    console.log(arr);
    // 数组每一项重新赋值
    for (var i = 0 ; i < arr.length ; i++){
        // 索引值 everything = E + verything
        arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1)
    }
    console.log(arr);
    // 将数组转为字符串
    str = arr.join(" ");
    console.log(str);
</script>

UPDTSA.png

24.7 数组的常见算法

24.7.1 冒泡排序

UPDOw8.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var arr = [34434, 656, 2343, 23234, 456, 32345];
    for(var i = 0 ; i < arr.length - 1 ; i++){
        for(var j = 0 ; j < arr.length - 1 -i ; j++){
            // 如果j这项比后面这项大，那么交换位置
            if(arr[j] > arr[j + 1]){
                // 使用第三方变量做一个周转
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr);
</script>

UPrPO0.png

24.7.2 快速排序（二分法排序）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
    var arr = [34434, 656, 2343, 23234, 456, 32345, 45345, 32, 3242, 244, 4545, 345,3243,5346,66];
        function quicksort(arr){
            // 让递归能停
            if(arr.length <= 1){
                return arr;
            }
            // 选标杆
            var pivot = arr[0];
            // 分大小组
            var bigger = [];
            var smaller = [];
            // 从下标为 1 的项开始，分出大小组
            for(var i = 1 ; i < arr.length ; i++){
                if(arr[i] > pivot){
                    bigger.push(arr[i]);
                }else{
                    smaller.push(arr[i]);
                }
            }
            // 递归，分别在大小组里再选标杆，再分大小组
            return quicksort(smaller).concat(pivot, quicksort(bigger));
        }
    console.log(quicksort(arr));
</script>

UPrJte.png

24.7.3 插入排序 .sort()

斗地主的排序方法，就是别人发一张排一张。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var arr = [34434, 656, 2343, 23234, 456, 32345, 45345, 32, 3242, 244, 4545, 345,3243,5346,66];
    // 准备一个结果数组，负无穷，正无穷
    var result = [-Infinity, Infinity];
    for(var i = 0 ; i < arr.length ; i++){
        for(var j = 0 ; j < result.length ; j++){
            if(arr[i] >= result[j] && arr[i] <= result[j + 1]){
                result.splice(j + 1 , 0 , arr[i]);
                break;
            }
        }
    }
    console.log(result);
    
</script>

UPr21s.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    var arr = [34434, 656, 2343, 23234, 456, 32345, 45345, 32, 3242, 244, 4545, 345,3243,5346,66];
    // 准备一个结果数组，负无穷，正无穷
    var result = [-Infinity, Infinity];
    for(var i = 0 ; i < arr.length ; i++){
        for(var j = 0 ; j < result.length ; j++){
            if(arr[i] >= result[j] && arr[i] <= result[j + 1]){
                result.splice(j + 1 , 0 , arr[i]);
                break;
            }
        }
    }
    result.shift();
    result.pop();
    console.log(result); 
</script>

UPsSAO.png

27.7.4 JavaScript内置排序

1
2
3
4
5
6
7
8
9
10
<script>
    var arr = [34434, 656, 2343, 23234, 456, 32345, 45345, 32, 3242, 244, 4545, 345,3243,5346,66];
    // a b 分别表示原来的数组中的前后两个数
    arr.sort(function(a, b){
        // 这个函数返回的数值不重要，数值的正负才重要
        // 整数表示要交换位置，负数表示不需要交换位置
        return a - b;
    });
    console.log(arr); 
</script>

UPsFgA.png

1
2
3
4
5
6
7
8
9
10
<script>
    var arr = [34434, 656, 2343, 23234, 456, 32345, 45345, 32, 3242, 244, 4545, 345,3243,5346,66];
    // a b 分别表示原来的数组中的前后两个数
    arr.sort(function(a, b){
        // 这个函数返回的数值不重要，数值的正负才重要
        // 整数表示要交换位置，负数表示不需要交换位置
        return b - a;
    });
    console.log(arr); 
</script>

UPsnUS.png

.sort()括号里面的是一个函数，也是一个参数！

这个函数用来指示排序应该从大到小排还是从小到大排。

a b 表示前后脚相邻的两个数字，如果需要交换位置，返回正数，不需要交换，则返回负数。

所以 a – b 表示如果a > b ， 那么就是正数，从小到大排

相关文章
点击查看

本文标题:二十四、数组

文章作者:Mango

发布时间:2020年07月08日 - 21:59:32

最后更新:2020年07月08日 - 22:35:39

原始链接:https://mango185.github.io/post/f1bf9f26.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️