五、JavaScript数组(Array 对象)

张小阳_
154 阅读6分钟

数组简介和定义（1）

数组(Array) ，顾名思义，用来存储一组相关的值，从而方便进行求和、计算平均数、逐项遍历等操作。

每种高级编程语言中都有数组，它是非常重要的一种数据结构。

数组是值的有序集合，数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为索引，索引从 0 开始，依次递增。在 JavaScript 中，您可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。

数组定义方法

image.png

image.png

image.png

访问数组项

image.png

image.png JS中越界访问不会报错，而是返回undefined

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr1 = [1, 2];
        var arr2 = new Array(1, 2, 3);
        var arr3 = new Array(2);
        console.log('arr1数组:');
        console.log(arr1);
        console.log(arr1[0])
        console.log(arr1[2])

        console.log('arr2数组:');
        console.log(arr2);
        console.log(arr2[1]);
        console.log(arr2[3]);

        console.log('arr3数组:');
        console.log(arr3);
        console.log(arr3[0]);
        console.log(arr3[1]);

    </script>
</body>

</html>

image.png

数组的长度

image.png

.length属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5];
        console.log(arr.length);
        var lastItem = arr[arr.length - 1]; // 数组最后一项
        console.log(lastItem);
    </script>
</body>

</html>

image.png

数组简介和定义（2）

更改数组项

image.png

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 'hello', 'world'];
        arr[0]++;
        console.log(arr);
        arr[6] = '你好';    // 添加一项
        console.log(arr);
    </script>
</body>

</html>

image.png

数组的遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr1 = [2, 4, 6, 8, 10];
        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }
        
        console.log('分割~~~~~~~~~~~~');

        var arr2 = [1, 3, , , 5, 7, 9, ,];
        for (var i = 0; i < arr2.length; i++) {
            console.log(arr2[i]);       // 中间逗号中未写值，或尾部的逗号中未写值，会被解析为undefined
        }
    </script>
</body>

</html>

image.png

数组类型的检测

Array.isArray()

兼容到IE8

  • 数组用typeof检测结果是object
  • Array .isArray()方法可以用来检测数组
  • Array .isArray()判断对象是否为数组

image.png

数组的常用方法

数组的常用方法(1)

image.png

push( )方法

  • 向数组的末尾添加一个或更多元素，并返回数组的长度 image.png
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7];
        console.log(arr);
        var arrLength = arr.push(8, 9, 10);
        console.log(arr);
        console.log(arrLength);
    </script>
</body>

</html>

image.png

pop( )方法

  • 删除数组中的最后一项
  • 并返回所删除的项
  • pop方法中的参数不需要填写，填写也是没用的

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5];
        var dele = arr.pop();
        console.log(arr);
        console.log(dele);
    </script>
</body>

</html>

image.png

unshitf( )方法

  • 在数组的首项插入新项
  • 若插入多项，用逗号隔开
  • 向数组的开头添加一个或多个元素，并返回新数组的长度

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5]
        var newLength = arr.unshift(-1, 0);
        console.log(arr);
        console.log(newLength);
    </script>
</body>

</html>

image.png

shift( )方法

  • 删除数组的首项（下标为0的位置）
  • 并返回所删除的项

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6];
        var item = arr.shift();
        console.log(arr); //被删除过后的数组
        console.log(item); //被删除的项
    </script>
</body>

</html>

image.png

数组的常用方法(2)

splice( )方法

splice()方法可用于替换数组中的项

  • 参数1，从下标为(参数1)的项开始
  • 参数2，连续替换的项数
  • 参数3，所替换的内容，不限多少
  • 会直接改变原数组

splice 拼接

image.png image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6];
        arr.splice(1, 3, 6);    // 从下标为1的位置开始，连续替换3项，替换为6
        console.log(arr);   // [1, 6, 5, 6]
    </script>
</body>

</html>

image.png

splice()方法也可以指定位置插入新项

  • 只需将splice( )的第二个参数设置为0 （可以理解为不替换项，替换0项）

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6];
        arr.splice(0, 0, 0);    //在首项插入0
        console.log(arr);
        arr.splice(2, 0, 'hello'); // 在下标为2的位置前，插入一段字符串
        console.log(arr);   
    </script>
</body>

</html>

image.png splice()方法也可以用于删除项

splice(index，count)中的参数count是要删除的项目数量，如果设置为0，则不会删除任何项。

splice的删除方法有两个参数，第一个是index，它必须要有，第二个是count，可设置也可不设置，如果设置的话，那么删除的个数就是count所定的，如果不设置，那么删除从index开始的所有值。

两个参数

  • 第一个参数，指定下标位置
  • 第二个参数，删除多少项

一个参数

  • 删除从参数开始的所有值

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr1 = [1, 2, 3, 4, 5, 6];
        arr1.splice(0); // 从下标为0的位置开始删除
        console.log(arr1);

        var arr2 = [1, 2, 3, 4, 5, 6];
        arr2.splice(1, 3);  // 从下标为1的位置开始删除，删除3项
        console.log(arr2);

        var arr3 = [1, 2, 3, 4, 5, 6];
        arr3.splice(1, 0);  // 第二个参数为0，则不会删除任何项
        console.log(arr3);
    </script>
</body>

</html>

image.png 注意点：

splice()方法会以数组形式返回被删除的项。

splice方法，一定是有返回值的，返回的值都是被删除的项或被替换的项，并且以数组的形式被返回

若没有被删除的项，则返回空数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr1 = [1, 2, 3, 4, 5, 6];
        var item1 = arr1.splice(0); // 返回所删除的项
        console.log(item1);

        var arr2 = [1, 2, 3, 4, 5, 6];
        var item2 = arr2.splice(1, 2, 11, 12); // 返回所替换的项
        console.log(item2);

        var arr3 = [1, 2, 3, 4, 5, 6];
        var item3 = arr3.splice(6, 0, 7);   // 后添加的项不反回
        console.log(arr3);
        console.log(item3);
    </script>
</body>

</html>

image.png

slice( )方法

  • 字符串有这个方法，数组也有这个方法
  • 截取数组的一部分，并返回这个新的数组
  • 不会改变原数组

image.png

image.png

image.png

image.png

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        var newArr = arr.slice(-6, 8);  // 参数1必须小于参数2
        console.log(newArr);
    </script>
</body>

</html>

image.png

数组的常用方法(3)

join( ) 方法

image.png join()方法用于把数组中的所有元素变成一个字符串，并通过指定的分隔符进行分隔，返回的不是数组，而是一个字符串,且不会改变原数组。

  • 将数组转换为字符串
  • 不写参数表示 以默认的逗号分隔 == .join(',') == .toString( )
  • 参数写空字符串：代表不用连接符
  • 不会改变原数组

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        var newStr = arr.join();
        console.log(newStr);
        console.log(typeof newStr);
    </script>
</body>

</html>

image.png

split( ) 方法

  • 将字符串转换为数组
  • 参数一般不留空，通常以空字符串作为参数.split('');
  • 不会改变原数组

image.png image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = 'hello world';
        var newArr = str.split('');
        console.log(newArr);
    </script>
</body>
</html>

image.png

字符串和数组更多相关性

image.png 可以使用下标的方式遍历字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'hello world';
        console.log(str[0]);
        console.log(str[1]);
        console.log(str[2]);
        console.log(str.charAt(3));

        console.log('~~~~~~~~~~');

        for (var i = 0; i < str.length; i++) {
            console.log(str[i]);
        }
    </script>
</body>

</html>

image.png

concat( ) 方法

拼接两个或更多的数组，并返回结果

  • 合并数组
  • 不会改变影响原数组
  • concat的返回值是它们总共合并的新数组

image.png

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr1 = [1, 2, 3, 4, 5];
        var arr2 = [6, 7, 8, 9, 10];
        console.log(arr1.concat(arr2));
        console.log(arr2.concat(arr1));
    </script>
</body>

</html>

image.png

reverse( ) 方法

反转数组中元素的顺序

  • 会直接改变原来的数组
  • 只有数组才能调用reverse() 方法，字符串不行

image.png

字符串逆序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'hello beiJing';
        var arr = str.split('');    
        arr.reverse();
        var retStr = arr.join('');
        console.log(str);
        console.log(retStr);
    </script>
</body>

</html>

image.png

indexOf( ) 方法

搜索数组中的元素，并返回它所在的位置

  • 检索数组中出现的元素第一次出现的位置(下标)
  • 返回它第一次出现位置的下标 (有重复出现的也返回第一次出现的位置的下标)
  • 若没有，则返回-1
  • 可以写一个参数，也可以写两个参数，第二个参数表示查找的起点，从第二个参数开始检索

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6];
        console.log(arr.indexOf(3, 5));
    </script>
</body>

</html>

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 5, 5, 6];
        console.log(arr.indexOf(5, 4));     // 找5，从下标为4的位置开始找
        console.log(arr.indexOf(5, 5));
        console.log(arr.indexOf(5, 6));
        console.log(arr.indexOf(1));
        console.log(arr.indexOf(7));
    </script>
</body>

</html>

image.png 其它示例： image.png

image.png 注意： 说明indexOf() 与 includes() 的判断方法都是以全等(===)为判断标准的

includes() 方法

  • 返回的是布尔值
  • 判断数组中是否包含该值

image.png

sort() 方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 3, 5, 7, 9, 2, 4, 6, 8, 0];
        arr.sort(function (a, b) {
            return a - b;
        });
        console.log(arr);
    </script>
</body>

</html>

image.png

数组遍历

遍历相关算法

求数组总和、平均数

题目:求数组中每一项的总和、平均数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var average = 0;
        var arr = [1, 2, 3, 4, 5];
        var sum = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
        }
        document.write(sum + '<br>');
        average = sum / arr.length;
        document.write(average);
    </script>
</body>

</html>

image.png

求数组中最大值、最小值

题目:求数组项的最大值和最小值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 90, 99, -3, -6, 35];
        var max = arr[0];   // 不要初始化为0，因为数组中可能有负值
        var min = arr[0];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            } else if (arr[i] < min) {
                min = arr[i];
            }
        }
        console.log('最大值:' + max + ',最小值' + min);
    </script>
</body>

</html>

image.png

数组去重和随机样本

数组去重

image.png

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 1, 1, 2, 5, 5, 6, 9];
        var retArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (!retArr.includes(arr[i])) {     //如果retArr数组不包含arr数组的元素，就将arr数组的元素推入retArr中
                retArr.push(arr[i]);
            }
        }
        console.log(retArr);
    </script>
</body>

</html>

image.png

随机样本

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8];
        var newArr = [];
        for (var i = 0; i < 3; i++) {
            var rand = parseInt(Math.random() * arr.length);
            newArr.push(arr[rand]);
            arr.splice(rand, 1);
        }
        console.log(newArr);
    </script>
</body>

</html>

动画.gif

冒泡排序

首先要理解冒泡排序的原理，冒泡排序指的是依次比较数组中相邻的两个值，如果后面的比前面的小，则将小的元素排到前面，依照这个规则进行多次并且递减的迭代。

image.png 外层趟数一趟可以排好一个数字，假若10个数字，那么就需要9趟就可以排好

内层趟数，每次都对比相邻的两位元素(不满足就交换位置)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 3, 5, 7, 9, 2, 4, 6, 8, 0];

        for (var i = 1; i < arr.length; i++) {      // 外层趟数比所比较的元素数少一次
            for (var j = arr.length - 1; j >= i; j--) {     //将每趟中的相邻两个元素相比较
                if (arr[j] < arr[j - 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j - 1];
                    arr[j - 1] = temp;
                }
            }
        }
        console.log(arr);
    </script>
</body>

</html>

image.png

二维数组

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [[1, 2, 3], [4, 5, 6], [88, 99, 100]];
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 3; j++) {
                console.log(arr[i][j]);
            }
        }
    </script>
</body>

</html>

image.png

JavaScript类型值与克隆

引用类型

image.png

image.png 变量(基本数据类型)存储在栈内存中

引用数据类型 存储在堆内存中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var a = 1;
        var b = a;
        a++;
        console.log(a);
        console.log(b);
    </script>
</body>

</html>

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr1 = [66, 77, 88];
        var arr2 = arr1;
        arr1.push(99);
        console.log(arr1);
        console.log(arr2);
    </script>
</body>

</html>

image.png 通过以上我们得出： image.png

image.png

判断相等时区别

image.png

image.png

  • 基本数据类型比较值
  • 引用数据类型比较的是地址

image.png 例子： image.png

image.png

image.png

浅克隆（Shadow Clone）

浅克隆就是，遍历数组的每一项推入到结果数组中，但是原数中如果有多维数组、或其他引用引用类型值，则克隆的只是地址，而不会创建出新的地址。

image.png

例子 image.png 解析：

本题中，arr1与arr2并没有指向同一个地址，但是索引的元素是同一个地址，所以通过改变索引是可以影响双方的值的

image.png 技巧

image.png

知识图谱

image.png

606d28160ae7dc1410800300.gif

avatar
文章
阅读
粉丝