文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 JavaScript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
这篇文章瑶琴带大家学习 js 中最常用的一个内置对象：Array。数组在编程中非常常见，它提供了一种方便的方式来组织和操作数据集合。
1.定义
Array 是JavaScript中的一种基本数据类型，用于存储有序的元素集合。数组可以包含任意类型的数据，包括数字、字符串、对象，甚至是其他数组（即多维数组）。
使用场景：
1.存储集合：存储一系列相关的数据。
2.索引访问：通过索引快速访问数组中的元素。
3.迭代处理：对数组中的每个元素执行相同的操作。
4.数据操作：添加、删除、排序和搜索数组元素。
基本操作：
1.创建数组：
let fruits = ['Apple', 'Banana', 'Orange'];2.访问元素：
let firstFruit = fruits[0]; // 'Apple'
3.修改元素：
fruits[1] = 'Pineapple'; // 修改第二个元素
4.添加元素：
fruits.push('Grape'); // 在数组末尾添加元素5.删除元素：
fruits.shift(); // 删除第一个元素
fruits.pop(); // 删除最后一个元素常用方法：
.push()：在数组末尾添加一个或多个元素，并返回新的长度。
.pop()：删除数组的最后一个元素，并返回被删除的元素。
.shift()：删除数组的第一个元素，并返回被删除的元素。
.unshift()：在数组开头添加一个或多个元素，并返回新的长度。
.slice()：返回数组的一个浅拷贝。
.splice()：添加、删除或替换数组中的元素。
.map()：创建一个新数组，其元素是调用一个提供的函数在每个元素上的返回值。
.filter()：创建一个新数组，包含通过测试的所有元素。
.reduce()：对数组进行累加操作，并返回一个累加值。
2.示例
1.使用 .map() 转换数组元素：
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]2.使用 .filter() 筛选数组元素：
let users = [
{ name: 'Alice', age: 21 },
{ name: 'Bob', age: 25 },
{ name: 'Carol', age: 18 }
];
let adults = users.filter(user => user.age >= 18);
console.log(adults); // 包含所有年龄大于或等于18的用户3.使用 .reduce() 计算数组元素总和：
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15
注意事项：
数组索引是从 0 开始的。
数组长度是可变的，可以使用 .length 属性。
数组方法如 .push(), .pop(), .shift(), .unshift() 会改变原数组的长度。
4. .concat() - 连接两个或多个数组，并返回一个新数组，不改变原始数组。
let array1 = [1, 2, 3]; let array2 = [4, 5, 6];
let concatenatedArray = array1.concat(array2); // concatenatedArray = [1, 2, 3, 4, 5, 6]5. .includes(searchElement[, fromIndex]) - 检查数组是否包含特定的元素，并返回一个布尔值。
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false6. .indexOf(searchElement[, fromIndex]) - 返回数组中元素第一次出现的索引，如果未找到则返回 -1。
let colors = ['red', 'green', 'blue'];
console.log(colors.indexOf('green')); // 17. .lastIndexOf(searchElement[, fromIndex]) - 返回数组中元素最后一次出现的索引，如果未找到则返回 -1。
let fruits = ['apple', 'banana', 'apple'];
console.log(fruits.lastIndexOf('apple')); // 28. .join([separator]) - 将数组中的所有元素连接成一个字符串，并可选地指定一个分隔符。
let parts = ['shoulders', 'knees'];
let song = parts.join(', '); // song = "shoulders, knees"
9. .reverse() - 将数组中的元素顺序颠倒，并直接修改原始数组。
let letters = ['a', 'b', 'c', 'd'];
letters.reverse(); // letters = ['d', 'c', 'b', 'a']
10. .some([predicate]) - 检查数组中是否有至少一个元素满足提供的测试函数。
let ages = [20, 30, 18, 22];
console.log(ages.some(function(age) { return age < 18;
})); // true11. .every([predicate]) - 检查数组中是否所有元素都满足提供的测试函数。
let ages = [20, 30, 18, 22];
console.log(ages.every(function(age) { return age >= 18;
})); // false12. .find([predicate]) - 返回数组中满足提供的测试函数的第一个元素。
let users = [
{ name: 'Alice', age: 21 },
{ name: 'Bob', age: 25 },
{ name: 'Carol', age: 18 }
];
let user = users.find(user => user.age > 20);
console.log(user); // { name: 'Bob', age: 25 }13. .findIndex([predicate]) - 返回数组中满足提供的测试函数的第一个元素的索引。
let users = [
{ name: 'Alice', age: 21 },
{ name: 'Bob', age: 25 },
{ name: 'Carol', age: 18 }
];
let index = users.findIndex(user => user.age === 25);
console.log(index); // 114. .slice([begin[, end]]) - 返回一个数组的浅拷贝，从 begin 到 end（不包括 end）。
let animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
let animalsCopy = animals.slice(1, 3); // animalsCopy = ['bison', 'camel']15. .splice(start[, deleteCount[, item1[, item2[, ...]]]]) - 通过删除或替换现有元素或添加新元素来修改数组。
let fruits = ['apple', 'banana', 'orange', 'kiwi'];
fruits.splice(2, 1, 'mango', 'lemon'); // fruits = ['apple', 'banana', 'mango', 'lemon', 'kiwi']16. .sort([compareFunction]) - 对数组元素进行排序，并直接修改原始数组。
let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b); // 升序排序 // numbers = [1, 2, 3, 4, 5]数组是JavaScript中处理数据集合的强大工具，它们不仅可以用来存储数据，还可以通过各种方法进行数据的转换和分析。
这些方法覆盖了数组的创建、访问、修改、删除、排序、搜索和迭代等基本操作。掌握这些方法对于日常的前端开发工作非常重要，在处理DOM元素集合、用户输入、处理服务器响应数据等方面都很有用。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。
最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
