一文了解JavaScript 中数组所有API的使用

文章导读：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)); // false

6.  .indexOf(searchElement[, fromIndex]) - 返回数组中元素第一次出现的索引，如果未找到则返回 -1。

let colors = ['red', 'green', 'blue']; 
console.log(colors.indexOf('green')); // 1

7. .lastIndexOf(searchElement[, fromIndex]) - 返回数组中元素最后一次出现的索引，如果未找到则返回 -1。

let fruits = ['apple', 'banana', 'apple']; 
console.log(fruits.lastIndexOf('apple')); // 2

8. .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; 
})); // true

11. .every([predicate]) - 检查数组中是否所有元素都满足提供的测试函数。

let ages = [20, 30, 18, 22]; 
console.log(ages.every(function(age) { 
    return age >= 18; 
})); // false

12. .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); // 1

14. .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元素集合、用户输入、处理服务器响应数据等方面都很有用。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。