掌握哪些 JavaScript 数组的内置方法，可以让数据处理更丝滑？
在 JavaScript 中，数组 是一种 非常重要的 数据结构，它可以 存储 多个值（元素），这些值 可以是 任何数据类型（包括 数字、字符串、对象，甚至 其他数组）。
数组 在 JavaScript 中 是一个 特殊类型 的 对象，提供了 一些 内置的方法 来 操作 和 处理 集合数据。
1 创建 数组
1.1 使用 字面量 创建
最常见的 创建数组 的方式 是 使用 方括号 []。
// 示例代码 1
const fruits = ["apple", "banana", "cherry"];
1.2 使用 new Array() 创建
// 示例代码 2
const fruits = new Array("apple", "banana", "cherry");
const emptyArray = new Array(3); // 创建一个长度为 3 的空数组
console.log(emptyArray); // 输出: [ <3 empty items> ]
- 如果 没有参数，
new Array()创建一个 空数组； new Array(3)会创建一个 包含 3 个空槽 的 数组。
new Array() 方法的 参数 很容易让人混淆，特别是它 既可以表示 数组的长度，也可以表示 数组的元素。因此，通常建议 使用 字面量方式 来 创建数组。
2 访问 数组的元素
数组的 元素 通过 索引 来访问，数组索引 从 0 开始。
// 示例代码 3
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // 输出 "apple"
console.log(fruits[1]); // 输出 "banana"
console.log(fruits[2]); // 输出 "cherry"
console.log(fruits[3]); // 输出 undefined
如果 访问的索引 超出数组的长度，结果会是 undefined。
3 修改 数组的元素
你可以通过 索引 来修改 数组的 元素。
// 示例代码 4
const fruits = ["apple", "banana", "cherry"];
fruits[1] = "orange"; // 修改索引为 1 的元素
console.log(fruits); // 输出 ["apple", "orange", "cherry"]
4 数组的 常用 内置方法
4.1 添加 和 移除 数组元素
1 push() 和 pop()
push()用于将 一个或多个 元素 添加到 数组的 末尾，并 返回 数组的 新长度；pop()用于 移除 数组的 最后一个元素，并 返回 被移除的 元素。
// 示例代码 5
const fruits = ["apple", "banana", "cherry"];
fruits.push("orange"); // 在末尾添加元素
console.log(fruits); // 输出 ["apple", "banana", "cherry", "orange"]
const removed = fruits.pop(); // 移除最后一个元素
console.log(removed); // 输出 "orange"
console.log(fruits); // 输出 ["apple", "banana", "cherry"]
2 shift() 和 unshift()
shift()用于 移除 数组的 第一个元素，并 返回 该元素，与pop()移除位置 相反；unshift()用于将 一个或多个 元素 添加到 数组的 开头，并 返回 数组的 新长度，与push()添加位置 相反。
// 示例代码 6
const fruits = ["apple", "banana", "cherry"];
fruits.unshift("orange"); // 在开头添加元素
console.log(fruits); // 输出 ["orange", "apple", "banana", "cherry"]
const removed = fruits.shift(); // 移除第一个元素
console.log(removed); // 输出 "orange"
console.log(fruits); // 输出 ["apple", "banana", "cherry"]
4.2 concat() 合并 多个不同数组
concat() 用于 合并 两个或多个 数组，返回 一个 新的数组。
// 示例代码 7
const fruits = ["apple", "banana"];
const moreFruits = ["cherry", "date"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // 输出 ["apple", "banana", "cherry", "date"]
4.3 slice() 切割 数组
slice() 用于 返回 数组的 一部分（浅拷贝），它 不修改 原数组。
// 示例代码 8
const fruits = ["apple", "banana", "cherry", "date"];
const slicedFruits = fruits.slice(1, 3); // 从索引 1 到索引 3（不包括 3）
console.log(slicedFruits); // 输出 ["banana", "cherry"]
4.4 splice() 修改 数组元素
splice() 可以用来 添加、删除 或 替换 数组中的 元素，它会直接 修改 原数组。
// 示例代码 9
const fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(2, 1, "grape", "kiwi"); // 从索引 2 开始，删除 1 个元素，并插入 "grape" 和 "kiwi"
console.log(fruits); // 输出 ["apple", "banana", "grape", "kiwi", "date"]
第一个参数 是 起始索引，第二个参数 是要 删除的 元素数量，后面的参数 是要 插入的元素。
4.5 indexOf() 查询 数组元素索引
indexOf() 用于 返回 指定元素 在数组中的 第一个索引值，如果 没有找到，返回 -1。
// 示例代码 10
const fruits = ["apple", "banana", "cherry", "banana"];
console.log(fruits.indexOf("banana")); // 输出 1
console.log(fruits.indexOf("grape")); // 输出 -1
4.6 includes() 检查 数组元素 是否存在
includes() 用于 检查 数组 是否 包含 某个元素，返回 true 或 false。
// 示例代码 11
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // 输出 true
console.log(fruits.includes("grape")); // 输出 false
4.7 forEach() 遍历 数组元素
forEach() 用于 遍历 数组中的 每个元素。
// 示例代码 12
const fruits = ["apple", "banana", "cherry"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
// 输出:
// apple
// banana
// cherry
4.8 map() 改造 原数组元素
map() 用于 创建 一个 新数组，新数组的 每个元素 是 原数组元素 经过 回调函数 处理后的 结果。
// 示例代码 13
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled); // 输出 [2, 4, 6, 8]
4.9 filter() 筛选 符合条件的 数组元素
filter() 用于 创建 一个 新数组，其中包含 满足条件的 所有 原数组元素。
// 示例代码 14
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // 输出 [2, 4]
4.10 reduce() 合并 目标数组所有元素
reduce() 用于将 数组中的 所有元素 通过 指定的函数 合并 为 一个值。
array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);
callback：一个函数，用来处理 数组的每个元素。它有四个参数：accumulator：累加器，保存 上一次 计算的 结果，或者在 第一次 调用时 是initialValuecurrentValue：当前 正在处理的 数组 元素currentIndex（可选）：当前 正在处理的 元素的 索引array（可选）：调用reduce方法的 数组。
initialValue（可选）：第一次 调用callback时，accumulator的 初始值。如果没有提供，则 默认为 数组的 第一个元素，currentValue从 第二个元素 开始。
// 示例代码 15
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 输出 10
这个方法 特别适合用于处理 求和、求积、连接字符串 等问题。
