下一篇 → ← 上一篇

JavaScript 数组方法

2025年4月23日 | 阅读9分钟

JavaScript 拥有其自身一套内置于语言中的方法，允许开发人员高效地与数组进行交互。 JavaScript 允许您执行诸如添加、删除、更新或获取元素、转换或迭代数组等操作。

您对数组有什么理解？

在 JS 中，数组是一种特殊的变量，可以一次存储多个值。您可以使用数组来高效且有效地处理数据列表。数组由元素组成，每个元素都有一个数字，即从 0 开始的索引。数组是一种特殊的变量，可以保存任何类型的数据，例如数字、字符串、对象，甚至另一个包含在其中的数组。它们主要用于集合管理、迭代、排序/过滤等。

数组基本方法

1. JavaScript 中的 Array toString()

此方法以逗号分隔的字符串形式创建数组。此方法不会修改原始数组，对于以字符串形式表示数组内容很有用。

示例

const names = ["Yashraj", " Thomas", " Kate"];
console.log("Array to String is", names.toString());

编译并运行

输出

 
Array to String is Yashraj, Thomas, Kate

2. JavaScript 中的 Array at()

它返回数组中指定索引处的元素。它可以用于正索引，包括负索引。索引可以是正数，从开头开始（基于 0），也可以是负数，从数组末尾开始计数。

示例

const names = ["Yashraj", "Thomas", "Kate"];
console.log("Second Element is", names.at(1)); // Access second element
console.log("Last Element is", names.at(-1)); // Access last element

3. JavaScript 中的 Array forEach()

forEach() 方法是一个内置方法，用于为数组中的每个元素调用一个函数。它既不返回新数组，也不修改原始数组，但用于迭代。

示例

const seasons = ["spring", "summer", "winter", "autumn"];

seasons.forEach((item) => {
    console.log(item);
});

输出

 
spring
summer
winter
autumn

4. JavaScript 中的 Array join()

它将数组的所有元素连接成一个字符串。第二个参数是可选的自定义分隔符，否则默认为逗号。它有助于从数组项创建格式化的字符串。

示例

const names = ["Yashraj", "Thomas", "Kate"];
console.log("Joined Elements are");
console.log(names.join(" - "));

编译并运行

输出

 
Joined Elements are
Yashraj - Thomas - Kate

5. JavaScript 中的 Array pop()

它从数组中删除最后一个元素。它将修改数组的长度。您会发现它改变了给定的数组。对空数组使用 pop() 会返回 undefined。

示例

const names = ["Yashraj", "Thomas", "Kate"];
const lastName = names.pop();
console.log("Removed Element is", lastName);
console.log("Updated Array is", names);

编译并运行

输出

 
Removed Element is Kate
Updated Array is [ 'Yashraj', 'Thomas' ]

6. JavaScript 中的 Array push()

push() 方法用于向数组的末尾添加一个或多个元素，然后返回具有不同长度的新数组。它将这些新元素附加到旧数组的末尾。

示例

const names = ["Yashraj", "Thomas"];
const newLength = names.push("Kate");
console.log("New length of the array is", newLength);
console.log("Updated array is", names);

编译并运行

输出

 
New length of the array is 3
Updated array is [ 'Yashraj', 'Thomas', 'Kate' ]

7. JavaScript 中的 Array shift()

此 array shift() 方法会弹出数组的第一个元素。它通过修改原始数组并将每个元素向左移动来实现。如果数组没有元素，则什么也不返回。

示例

const names = ["Yashraj", "Thomas", "Kate"];
const firstName = names.shift();
console.log("Removed element:", firstName);
console.log("Updated array:", names);

编译并运行

输出

 
Removed element: Yashraj
Updated array: [ 'Thomas', 'Kate' ]

8. JavaScript 中的 Array unshift()

unshift() 方法用于向数组的开头添加新项，然后返回具有不同长度的新数组。它只是将所有内容移动到您想插入新元素的位置的右侧。

示例

const names = ["Thomas", "Kate"];
const newLength = names.unshift("Yashraj");
console.log("New length of the array:", newLength); //
console.log("Updated array:", names);

编译并运行

输出

 
New length of the array: 3
Updated array: [ 'Yashraj', 'Thomas', 'Kate' ]

9. JavaScript 中的 Array concat()

concat() 方法用于在新数组中连接或连接两个或多个数组。它不会修改原始数组。

示例

const names1 = ["Yashraj", "Thomas"];
const names2 = ["Kate", "Kartik"];
const combinedNames = names1.concat(names2);
console.log("Combined Names are", combinedNames);

编译并运行

输出

 
Combined Names are [ 'Yashraj', 'Thomas', 'Kate', 'Kartik' ]

10. JavaScript 中的 Array copyWithin()

此方法将数组的指定部分浅拷贝到同一数组中的另一个位置，然后返回原始数组，而不会修改原始数组的大小。参数是目标索引和开始索引。

示例

const names = ["Yashraj", "Thomas", "Kate", "Kartik"];
names.copyWithin(1, 2);
console.log(names);

编译并运行

输出

 
[ 'Yashraj', 'Kate', 'Kartik', 'Kartik' ]

11. JavaScript 中的 Array flat()

此方法返回一个新数组，其中给定深度的子数组元素已被折叠，以便它们全部适合单个数组。默认深度为 1。

示例

const nestedArray = ["Yashraj", ["Thomas", ["Kate"]]];
const flatArray = nestedArray.flat(2);
console.log("Array Flat:", flatArray);

编译并运行

输出

 
Array Flat: [ 'Yashraj', 'Thomas', 'Kate' ]

12. JavaScript 中的 Array splice()

splice() 可以通过删除现有元素和/或在原地添加新元素来更改数组的内容。它返回一个从开始到（但不包括）结束的数组部分的新的浅拷贝数组。

示例

const names = ["Yashraj", "Thomas", "Kate"];
const removed = names.splice(1, 1, "Kartik");
console.log("Removed elements:", removed);
console.log("Updated array:", names);

编译并运行

输出

 
Removed elements: [ 'Thomas' ]
Updated array: [ 'Yashraj', 'Kartik', 'Kate' ]

13. JavaScript 中的 Array toSpliced()

toSpliced() 方法返回一个新数组，其中包含定义的更改，例如添加元素或删除元素，而不会修改源数组。

示例

const names = ["Yashraj", "Thomas", "Kate"];
const newNames = names.toSpliced(1, 1, "Kartik");
console.log("New array:", newNames); 
console.log("Original array:", names);

输出

 
New array: [ 'Yashraj', 'Kartik', 'Kate' ]
Original array: [ 'Yashraj', 'Thomas', 'Kate' ]

14. JavaScript 中的 Array slice()

让我们看看 array.slice() 方法是如何工作的。它返回一个新数组，但不会更改原始数组。此方法接受两个可选参数，即开始索引（包含）和结束索引（不包含）。如果没有传递结束索引，则切片将一直持续到数组末尾。负索引从末尾开始计数。

代码

示例

const names = ["Yashraj", "Thomas", "Kate", "Kartik"];
const slicedNames = names.slice(1, 3);	
console.log("Extracted portion:", slicedNames);
console.log("Original array:", names);

编译并运行

输出

 
Extracted portion: [ 'Thomas', 'Kate' ]
Original array: [ 'Yashraj', 'Thomas', 'Kate', 'Kartik' ]

搜索方法

1. JavaScript 中的 Array indexOf()

indexOf() 方法用于返回在数组中找到给定元素的第一个索引，如果找不到则返回 -1。它使用严格相等 (===) 来测试找到的元素。

代码

示例

const names = ["Yashraj", "Thomas", "Kate", "Thomas"];
console.log("First occurrence:", names.indexOf("Thomas")); 
console.log("Index of not present element:", names.indexOf("Rahul"));

编译并运行

输出

 
First occurrence: 1
Index of not present element: -1

2. JavaScript 中的 Array lastIndexOf()

lastIndexOf() 方法用于返回在数组中找到给定元素的最后一个索引。如果找不到一个元素，则返回 -1。它检查严格相等。

代码

示例

const names = ["Yashraj", "Thomas", "Kate", "Thomas"];
console.log("First occurrence:", names.lastIndexOf("Thomas")); 
console.log("Index of not present element:", names.lastIndexOf("Rahul"));

编译并运行

输出

 
First occurrence: 3
Index of not present element: -1

3. JavaScript 中的 Array includes()

includes() 方法用于检查数组是否包含特定元素。如果找到则返回 true，否则返回 false。这是一种严格相等检查。

代码

示例

const names = ["Yashraj", "Thomas", "Kate"];
console.log("Include's Thomas:", names.includes("Thomas"));
console.log("Include's Rahul:", names.includes("Rahul"));

编译并运行

输出

 
Include's Thomas: true
Include's Rahul: false

4. JavaScript 中的 Array find()

find() 方法用于从数组中检索通过测试函数的第一个元素。如果没有元素满足条件，则返回 undefined。

代码

示例

const names = ["Yashraj", "Thomas", "Kate"];
const result = names.find((name) => name.startsWith("K"));
console.log("First matching element:", result);

编译并运行

输出

 
First matching element: Kate

5. JavaScript 中的 Array findIndex()

类似地，findIndex() 方法用于返回提供的数组中满足过滤测试函数的第一个元素的索引。如果没有元素满足条件，则返回 -1。

代码

示例

const names = ["Yashraj", "Thomas", "Kate"];
const index = names.findIndex((name) => name.startsWith("K"));
console.log("Index of the matching element:", index);

编译并运行

输出

 
Index of the matching element: 2

6. JavaScript 中的 Array findLast()

findLast() 方法用于返回满足测试函数的最后一个数组元素。如果没有元素满足条件，则返回 undefined。

代码

示例

const names = ["Yashraj", "Thomas", "Kate", "Kartik"];
const result = names.findLast((name) => name.startsWith("K"));
console.log("Last matching element:", result);

输出

 
Last matching element: Kartik

7. JavaScript 中的 Array findLastIndex()

findLastIndex() 方法用于返回数组中满足测试函数提供的测试的最后一个元素的索引。如果没有元素满足条件，则返回 -1。

代码

示例

const names = ["Yashraj", "Thomas", "Kate", "Kartik"];
const index = names.findLastIndex((name) => name.startsWith("K"));
console.log("Index of the last matching element:", index);

输出

 
Index of the last matching element: 3

排序方法

1. JavaScript 中的 Array sort()

sort() 方法用于对数组元素进行排序并返回排序后的数组。默认情况下，它将按升序对字符串进行排序，当对数字进行排序时，这会产生不可预测的结果。对于更复杂的排序，可以提供自定义比较函数。

代码

示例

const names = ["Yashraj", "Thomas", "Kate"];
names.sort();
console.log("Sorted alphabetically:", names);

const numbers = [10, 2, 5, 1];
numbers.sort((a, b) => a - b);
console.log("Numeric sort:", numbers);

编译并运行

输出

 
Sorted alphabetically: [ 'Kate', 'Thomas', 'Yashraj' ]
Numeric sort: [ 1, 2, 5, 10 ]

2. JavaScript 中的 Array reverse()

reverse() 方法会反转数组元素的顺序，并修改同一个原始数组。在这种情况下，它主要与 sort() 结合使用以获得降序。

代码

示例

const names = ["Yashraj", "Thomas", "Kate"];
names.reverse();
console.log("Reversed order:", names);

编译并运行

输出

 
Reversed order: [ 'Kate', 'Thomas', 'Yashraj' ]

3. JavaScript 中的 Array toSorted()

reverse() 方法会反转数组元素的顺序，并修改同一个原始数组。它与 sort() 的功能相同，但不会更改原始数组。

代码

示例

const names = ["Yashraj", "Thomas", "Kate"];
const sortedNames = names.toSorted();
console.log("Sorted array:", sortedNames);
console.log("Original array:", names);

输出

 
Sorted array: [ 'Kate', 'Thomas', 'Yashraj' ]
Original array: [ 'Yashraj', 'Thomas', 'Kate' ]

4. JavaScript 中的 Array toReversed()

toReversed() 方法用于返回一个元素顺序相反的数组，但不会更改原始数组。这对于在不实际修改数据的情况下反转数组很有用。

代码

示例

const names = ["Yashraj", "Thomas", "Kate"];
const reversedNames = names.toReversed();
console.log("Reversed array:", reversedNames); 
console.log("Original array:", names);

输出

 
Reversed array: [ 'Kate', 'Thomas', 'Yashraj' ]
Original array: [ 'Yashraj', 'Thomas', 'Kate' ]

5. 对象排序

要对数组中的对象进行排序，您需要一个传递给 sort() 的自定义比较函数。排序逻辑通过根据对象属性定义此函数来工作。

代码

示例

const students = [
    { name: "Yashraj", age: 24 },
    { name: "Thomas", age: 22 },
    { name: "Kate", age: 23 },
  ];
  
  students.sort((a, b) => a.age - b.age);
  console.log("After ascending sorting:", students);
  
  students.sort((a, b) => a.name.localeCompare(b.name));
  console.log("After alphabetically sorting:", students);

编译并运行

输出

 
After ascending sorting: [
  { name: 'Thomas', age: 22 },
  { name: 'Kate', age: 23 },
  { name: 'Yashraj', age: 24 }
]
After alphabetically sorting: [
  { name: 'Kate', age: 23 },
  { name: 'Thomas', age: 22 },
  { name: 'Yashraj', age: 24 }
]

结论

这些 JavaScript 数组方法使我们能够有效地对数组进行排序并处理数据，无论我们处理的是简单值还是复杂对象。

下一主题JavaScript 字符串

← 上一篇下一篇 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。