JavaScript-数组
什么是数组
数组就是专门用于存储一组数据的
注意点：和我们前面学习的 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>
如何操作数据
如何往数组中存储数据
变量名称[索引号] = 需要存储的数据;
<!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>
如何从数组中获取存储的数据
变量名称[索引号];
<!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>
需求
- 要求定义变量保存一个人的姓名
- 要求定义变量保存一个班级所有人的姓名
一个人为 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>
保存一个班级所有人的姓名。
<!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>
数组注意点
和其它编程语言不同, 如果数组对应的索引中没有存储数据, 默认存储的就是 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 中访问了数组中不存在的索引不会报错, 会返回 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 中数组的存储空间不够时数组会自动扩容，其它编程语言中数组的大小是固定的。
<!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 的数组可以存储不同类型的数据，在其它编程语言中数组只能存储相同类型数据 (要么全部都是字符串, 要么全部都是数值等)
<!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 数组是采用 "哈希映射" 方式分配存储空间，什么是哈希映射? 好比字典可以通过偏旁部首找到对应汉字, 我们可以通过索引找到对应空间。在浏览器中各大浏览器也对数组分配存储空间进行了优化，如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间，如果存储的不是相同的数据类型, 那么就不会分配连续的存储空间。
创建数组的其它方式
通过构造函数创建数组
- 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>
通过字面量创建数组
- 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>
