在编写JavaScript代码时，我们经常需要处理一组复杂的数据。JavaScript中的数组（Array）就是一种用于按顺序存储多个值的数据结构，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据包括数字、字符串、对象等，并且长度是可变的，可以根据需要随时添加或删除元素。在JavaScript中定义数组需要使用方括号[ ]，数组中的每个元素使用逗号进行分隔。例如：
动手练一练：
let numbers = [1, 2, 3, 4, 5];
let fruits = ["苹果", "香蕉", "橙子"];
let mixed = ["Apple", 25, true, { name: "John" }];
1、创建数组
在JavaScript中，可以通过多种方式创建数组，推荐使用字面量方式创建数组。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字面量创建数组</title>
</head>
<body>
<body>
<script>
// 创建一个空数组
let arr = [];
// 创建一个包含2个元素的数组
let brr = [1,2];
// 创建一个包含3个元素的数组
let crr = ["Apple","Banana","Orange"];
</script>
</body>
</html>
也可以使用Array构造函数创建数组。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>构造函数创建数组</title>
</head>
<body>
<body>
<script>
// 创建一个长度为0的空数组
let arr = new Array();
// 创建一个初始长度为20的空数组
let brr = new Array(20);
// 给Array构造函数传入保存的值
let crr = new Array("Apple","Banana","Orange");
console.log(crr); // 输出 ["Apple", "Banana", "Orange"]
// 使用Array.of()方法
let drr = Array.of("苹果","香蕉","橙子");
console.log(drr); // 输出 ["苹果", "香蕉", "橙子"]
</script>
</body>
</html>
数组中的元素可以通过索引来访问和修改。数组中的索引从0开始，并依次递增，也就是说数组第一个元素的索引为0，第二个元素的索引为1，第三个元素的索引为2，以此类推。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过索引访问数组中的元素</title>
</head>
<body>
<body>
<script>
// 创建一个包含3个元素的数组
let fruits = ["Apple","Banana","Orange"];
console.log(fruits[0]); // 输出：Apple
console.log(fruits[1]); // 输出：Banana
console.log(fruits[2]); // 输出：Orange
</script>
</body>
</html>
通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：
Apple
Banana
Orange
我们可以直接通过索引修改数组中的元素，并通过数组的length属性获取数组的长度。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过索引修改数组中的元素</title>
</head>
<body>
<body>
<script>
// 创建一个包含4个元素的数组
let fruits = ["苹果","香蕉","橙子","芒果"];
fruits[1] = "Banana"; // 将第二个元素从"香蕉"改为"Banana"
console.log(fruits); // 输出：['苹果', 'Banana', '橙子', '芒果']
console.log(fruits.length); // 输出：4
</script>
</body>
</html>
通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：
['苹果', 'Banana', '橙子', '芒果']
4
2、操作数组常用的方法
JavaScript也提供了一些内置方法来操作数组，这些方法可以用于添加、删除、替换、搜索、排序和遍历数组。以下是一些常用的操作数组的方法：
（1）push()方法
push()方法用于在数组末尾添加一个或多个元素，添加多个元素注意用逗号隔开。例如：
动手练一练：
let fruits = ["苹果","香蕉","橙子"];
fruits.push("葡萄","芒果"); // 添加“葡萄”和“芒果”到数组末尾
console.log(fruits); // 输出：['苹果', '香蕉', '橙子', '葡萄', '芒果']
（2）pop()方法
pop()方法用于删除数组的最后一个元素，并且返回删除的数据。注意，每次只能删除最后一个元素。例如：
动手练一练：
let colors = ["红色","白色","蓝色"];
let last = colors.pop(); // 删除并返回最后一个元素
console.log(last); // 输出：蓝色
console.log(colors); // 输出：['红色', '白色']
（3）unshift()方法
unshift()方法用于在数组开头添加一个或多个元素，添加多个元素注意用逗号隔开。例如：
动手练一练：
let colors = ["红色","白色","蓝色"];
colors.unshift("绿色","橙色"); // 添加“绿色”和“橙色”到数组开头
console.log(colors); // 输出：['绿色', '橙色', '红色', '白色', '蓝色']
（4）shift()方法
shift()方法用于删除数组的第一个元素，并且返回被删除的数据，注意，每次只能删除第一个元素。例如：
动手练一练：
let colors = ["红色","白色","蓝色"];
let first = colors.shift(); // 删除并返回第一个元素
console.log(first); // 输出：红色
console.log(colors); // 输出：['白色', '蓝色']
（5）concat()方法
concat()方法用于合并两个或多个数组，并返回一个新数组。注意，原数组不会被修改。例如：
动手练一练：
let fruits1 = ["苹果","香蕉"];
let fruits2 = ["葡萄","芒果"];
let all = fruits1.concat(fruits2);
console.log(all); // 输出：['苹果', '香蕉', '葡萄', '芒果']
console.log(fruits1); // 输出：['苹果', '香蕉']
console.log(fruits2); // 输出：['葡萄', '芒果']
（6）join()方法
join()方法用于将数组的所有元素拼接成一个字符串。可以传递一个特定的分隔符作为参数，用于分隔元素，分隔符默认为“,”。例如：
动手练一练：
let list = ["a", "b", "c", "d"];
let result1 = list.join();
let result2 = list.join("");
let result3 = list.join("/");
console.log(result1); // 输出：a,b,c,d
console.log(result2); // 输出：abcd
console.log(result3); // 输出：a/b/c/d
（7）slice()方法
slice()方法用于从数组中提取一个或多个元素，并创建一个新数组，且原数组不会发生改变。可以通过传递开始索引和结束索引来指定提取的元素范围，并返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。例如：
动手练一练：
let list = ["a", "b", "c", "d", "e", "f"];
let newlist = list.slice(1, 4); // 提取索引1到3的元素，不包含索引4的元素
console.log(newlist); // 输出：['b', 'c', 'd']
console.log(list); // 输出：["a", "b", "c", "d", "e", "f"]
（8）splice()方法
splice()方法用于向数组中的任意位置插入、删除或替换元素。可以根据传递的参数来指定相应的操作。
splice删除：需要给splice()传两个参数，第一个参数是要删除元素的位置（索引值），第二个参数是要删除的元素数量。可以从数组中删除任意多个元素，比如splice(0,2)会删除前两个元素。
splice插入：需要给splice()传三个参数，第一个参数是开始的索引位置，第二个参数是要删除的元素数量（0代表不删除直接插入元素），第三个参数是要插入的元素，可以传递多个要插入的元素，注意用逗号隔开。该方法可以在指定位置删除指定个数的元素，再增加任意个数的元素。比如，splice(2,0,"Apple","Banana")会从数组的索引位置2开始插入字符串"Apple"和"Banana"。
splice替换：splice()方法还可以在指定位置替换新的元素，同样要传入三个参数，第一个参数是开始的索引位置，第二个参数是要删除的元素数量（1代表删除一个元素），第三个参数是要插入的元素，可以传递多个要插入的元素，注意用逗号隔开。要插入的元素数量不一定跟删除的元素数量一致。比如，splice(2,1,"Apple","Banana")会在索引位置2删除一个元素，然后从该位置开始向数组中插入字符串"Apple"和"Banana"。
splice()方法示例代码如下：
动手练一练：
// 删除数组元素
let fruits = ["Apple","Banana","Orange"];
let removed = fruits.splice(0,1); // 从索引0位置开始删除1个元素
console.log(fruits); // 输出 ['Banana', 'Orange']
console.log(removed); // 输出 ['Apple']
// 插入数组元素
let fruits1 = ["Apple","Banana","Orange"];
fruits1.splice(1,0,"Pear","Grape");
console.log(fruits1); // 输出 ['Apple', 'Pear', 'Grape', 'Banana', 'Orange']
// 替换数组元素
let fruits2 = ["Apple","Banana","Orange"];
fruits2.splice(1,1,"pear","Grape")
console.log(fruits2); // 输出 ['Apple', 'pear', 'Grape', 'Orange']
（9）indexOf()方法
indexOf()方法用于查找指定元素在数组中的第一个匹配的索引值，如果不存在，则返回“-1”。例如：
动手练一练：
let fruits = ["Apple", "Banana", "Orange", "Pear", "Orange"];
let numbers = fruits.indexOf("Orange"); // 查找“Orange”的第一个索引
console.log(numbers); // 输出 2
（10）lastIndexOf()方法
lastIndexOf()方法用于查找指定元素在数组中的最后一个匹配的索引值，如果不存在，则返回“-1”。例如：
动手练一练：
let fruits = ["Apple", "Banana", "Orange", "Apple", "Pear"];
let numbers = fruits.lastIndexOf("Apple"); // 查找“Apple”的最后一个索引
console.log(numbers); // 输出 3
（11）includes()方法
includes()方法用于判断数组是否包含指定元素，返回布尔值，如果“包含”就返回true，否则false。例如：
动手练一练：
let fruits = ["Apple", "Banana", "Orange"];
let hasApple = fruits.includes("Apple");
let hasPear = fruits.includes("Pear");
console.log(hasApple); // 输出 true
console.log(hasPear); // 输出 false
（12）filter()方法
filter()方法用于创建一个新数组，其中包含通过指定函数测试的所有元素。可以理解为，通过函数把满足条件的元素过滤出来，放到新数组中。例如：
动手练一练：
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(function(num) {
return num % 2 === 0; // 返回除以2后余数为0的元素，也就是偶数
});
console.log(evenNumbers); // 输出 [2, 4, 6, 8, 10]
（13）map()方法
map()方法用于遍历(迭代) 数组，每次循环时通过指定函数对原数组中的每个元素执行操作后生成一个新的数组。例如：
动手练一练：
let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.map(function(num) {
return num * num; // 返回每个元素的平方
});
console.log(newNumbers); // 输出 [1, 4, 9, 16, 25]
（14）reduce()方法
reduce()方法用于对数组中的所有元素执行一个指定的函数，将它们汇总为单个值。该方法可以用于各种累积计算，如求和、求积、拼接字符串等。
reduce()语法结构为: Array.reduce( function(accumulator, currentValue, currentIndex, array){} ,initialValue)
reduce()语法里边包含两个部分，第一个部分是function()回调函数，第二个部分initialValue是设置的初始值。各参数解析如下：
accumulator：累加器，累积计算的结果。
currentValue：当前正在处理的元素。
currentIndex（可选）：当前正在处理的元素的索引。
array（可选）：调用reduce()方法的数组。
initialValue（可选）：初始值，作为第一次调用回调函数时的累加器的初始值。如果未提供初始值，则将使用数组的第一个元素作为初始值，并且从数组的第二个元素开始调用回调函数。
reduce()方法的示例方法如下：
动手练一练：
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 输出 10
（15）forEach()方法
forEach()方法用于对数组的每个元素执行给定的函数。例如：
动手练一练：
let fruits = ["苹果", "香蕉", "橙子"];
fruits.forEach(function (fruit) {
console.log("水果：" + fruit);
});
// 输出
// 水果：苹果
// 水果：香蕉
// 水果：橙子
（16）find()方法
find()方法用于查找数组中满足指定条件的第一个元素，并返回满足条件的第一个元素，它接受一个回调函数作为参数，用于定义查找条件，如果未找到满足条件的元素，则返回undefined。例如：
动手练一练：
let numbers = [5, 8, 14, 19, 22, 27];
let evenNumbers = numbers.find(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // 输出 8
（17）findIndex()方法
findIndex()方法用于查找数组中满足指定条件的第一个元素索引，返回满足条件的元素的索引。如果未找到满足条件的元素，则返回“-1”。例如：
动手练一练：
let numbers = [5, 8, 14, 19, 22, 27];
let evenNumbers = numbers.findIndex(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // 输出 1
（18）every()方法
every()方法用于检测数组中的所有元素是否满足指定条件。如果所有元素都满足条件，则返回true，否则返回false。例如：
动手练一练：
let numbers = [4, 8, 14, 22, 28];
let evenNumbers = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // 输出 true
（19）some()方法
some()方法用于检查数组中是否至少有一个元素满足指定的条件。当数组中至少有一个元素满足条件时，才返回true，否则返回false。例如：
动手练一练：
let numbers = [4, 9, 14, 25, 28];
let evenNumbers = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // 输出 true，因为至少有一个元素是偶数
（20）fill()方法
fill()方法用给定值填充一个数组，返回修改后的数组，它接受三个参数，第一个参数是用来填充数组的值，第二个参数是起始索引（包括），第三个参数是结束索引（不包括）。如果省略第二个参数和第三个参数，则fill()方法会用第一个参数的值填充整个数组。例如：
动手练一练：
let numbers = [4, 9, 14, 25, 28];
// 将数组中索引为1到索引为3（不包括）的元素替换为“填充”
let newnumbers = numbers.fill("填充", 1, 3);
console.log(newnumbers); // 输出 [4, '填充', '填充', 25, 28]
（21）reverse()方法
reverse()方法用于将数组的数据进行反转，并且返回反转后的数组，会改变原数组。例如：
动手练一练：
let numbers = [5, 9, 14, 25, 28];
let newnumbers = numbers.reverse();
console.log(numbers); // 输出 [28, 25, 14, 9, 5]
console.log(newnumbers); // 输出 [28, 25, 14, 9, 5]
（22）sort()方法
sort()方法用于对数组的元素进行排序，并返回数组，如果不传递参数，则默认按字符串Unicode编码顺序排序。例如：
动手练一练：
let numbers = [1, 5, 10, 2, 3];
let newnumbers = numbers.sort();
console.log(numbers); // 输出 [1, 10, 2, 3, 5]
console.log(newnumbers); // 输出 [1, 10, 2, 3, 5]
sort()方法不仅按Unicode编码顺序进行排序，还可以根据其他顺序执行操作。这时就必须为方法提供一个函数参数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。排序函数应该具有两个参数a和b，a-b>0那么a会被排列到b之前，则按从小到大排序，b-a>0那么b会被排列到a之前，则按从大到小排序。例如：
动手练一练：
// 从小到大排序
let numbers = [3, 6, 8, 1, 5, 7, 2, 4, 0, 9];
numbers.sort(function (a,b) {
return a-b
});
console.log(numbers); // 输出 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 从大到小排序
let numbers1 = [3, 6, 8, 1, 5, 7, 2, 4, 0, 9];
numbers1.sort(function (a,b) {
return b-a
});
console.log(numbers1); // 输出 [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
（23）keys()、 values()、 entries()方法
keys()、 values()、 entries()三个方法分别用于遍历数组中的索引、值或者键值对。例如：
动手练一练：
// 遍历数组中的索引
let arr = ['a', 'b', 'c'];
let iterator = arr.keys();
for (let key of iterator) {
console.log(key); // 输出 0, 1, 2
};
// 遍历数组中的值
let arr1 = ['a', 'b', 'c'];
let iterator1 = arr1.values();
for (let value of iterator1) {
console.log(value); // 输出 'a', 'b', 'c'
};
// 遍历数组中的键值对
let arr2 = ['a', 'b', 'c'];
let iterator2 = arr2.entries();
for (let [index, value] of iterator2) {
console.log(index, value); // 输出 0 'a', 1 'b', 2 'c'
};