什么是数组

数组就是专门用于存储一组数据的

​​注意点​​：和我们前面学习的 Number / String / Boolean / Null / undefined 不同 (基本数据类型) 而我说的数组 (Array) 不是基本数据类型, 是引用数据类型 (对象类型)

如何创建一个数组

let 变量名称 = new Array(size);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = new Array(3);
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_javascript

如何操作数据

如何往数组中存储数据

变量名称[索引号] = 需要存储的数据;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = new Array(3);
        
        arr[0] = "BNTang";
        
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_数组_02

如何从数组中获取存储的数据

变量名称[索引号];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = new Array(3);
        
        arr[0] = "BNTang";
        
        console.log(arr[0]);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_数组_03

需求

  • 要求定义变量保存一个人的姓名
  • 要求定义变量保存一个班级所有人的姓名

一个人为 ​​BNTang​​​, 全班人为 ​​BNTang​​​、​​zs​​​、​​ls​​

不用数组实现

保存一个人的姓名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let nameOne = "BNTang";
    </script>
</head>
<body>
</body>
</html>

保存一个班级所有人的姓名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let nameOne = "BNTang";
        let nameTwo = "ls";
        let nameThree = "ww";
    </script>
</head>
<body>
</body>
</html>

数组实现

保存一个人的姓名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let students = new Array(1);

        students[0] = "BNTang";

        console.log(students);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_javascript_04

保存一个班级所有人的姓名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let students = new Array(3);

        students[0] = "BNTang";
        students[1] = "zs";
        students[2] = "ls";

        console.log(students);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_html_05

数组注意点

和其它编程语言不同, 如果数组对应的索引中没有存储数据, 默认存储的就是 ​​undefined​​，其它编程语言中默认保存的是垃圾数据或者 0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = new Array(3);
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_javascript_06

和其它编程语言不同, JavaScript 中访问了数组中不存在的索引不会报错, 会返回 undefined, 其它编程语言一旦超出索引范围就会报错或者返回脏数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        // 0 1 2
        let arr = new Array(3);
        console.log(arr[666]);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_数组_07

和其它编程语言不同, 当 JavaScript 中数组的存储空间不够时数组会自动扩容，其它编程语言中数组的大小是固定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = new Array(3);
        arr[0] = "lnj";
        arr[1] = "zs";
        arr[2] = "ls";
        arr[3] = "BNTang";
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_javascript_08

和其它编程语言不同, JavaScript 的数组可以存储不同类型的数据，在其它编程语言中数组只能存储相同类型数据 (要么全部都是字符串, 要么全部都是数值等)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = new Array(4);
        arr[0] = 123;
        arr[1] = "123";
        arr[2] = true;
        arr[3] = null;
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_javascript_09

和其它编程语言不同, JavaScript 中数组分配的存储空间不一定是连续的，其它语言数组分配的存储空间都是连续的, JavaScript 数组是采用 ​​"哈希映射"​​ 方式分配存储空间，什么是哈希映射? 好比字典可以通过偏旁部首找到对应汉字, 我们可以通过索引找到对应空间。在浏览器中各大浏览器也对数组分配存储空间进行了优化，如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间，如果存储的不是相同的数据类型, 那么就不会分配连续的存储空间。

创建数组的其它方式

通过构造函数创建数组

  • let 变量名称 = new Array(size); 创建一个指定大小的数组
  • let 变量名称 = new Array(); 创建一个空数组
  • let 变量名称 = new Array(data1, data2, ...); 创建一个带数据的数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arrOne = new Array(3);
        console.log(arrOne);

        let arrTwo = new Array();
        arrTwo[0] = "BNTang";
        arrTwo[1] = "zs";
        arrTwo[2] = "ls";
        arrTwo[3] = "ww";
        console.log(arrTwo);

        let arrThree = new Array("BNTang", "zs", "ls", "ww");
        console.log(arrThree);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_数组_10

通过字面量创建数组

  • let 变量名称 = []; 创建一个空数组
  • let 变量名称 = [data1, data2, ...]; 创建一个带数据的数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arrOne = [];
        arrOne[0] = "BNTang";
        arrOne[1] = "zs";
        arrOne[2] = "ls";
        arrOne[3] = "ww";
        console.log(arrOne);

        let arrTwo = ["BNTang", "zs", "ls", "ww"];
        console.log(arrTwo);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组_javascript_11