掌握 JavaScript 数组指南-js教程-PHP中文网

A Guide to Master JavaScript Arrays

数组是 JavaScript 中最常用的数据结构之一。它们允许您在单个变量中存储多个值，并附带一组丰富的内置函数，使数据的操作和处理变得简单而高效。在本文中，我们将详细探讨 JavaScript 数组函数，并提供解释、示例和注释来帮助您掌握它们。

JavaScript 中的数组简介

数组是有序的项目集合，可以容纳不同类型的数据，包括数字、字符串、对象，甚至其他数组。

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

登录后复制

创建数组

可以使用数组文字或数组构造函数创建数组。

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

登录后复制

数组属性

length：返回数组中元素的数量。

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

登录后复制

数组方法

1. 推()

将一个或多个元素添加到数组末尾并返回新的长度。

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

登录后复制

2. 弹出（）

从数组中删除最后一个元素并返回该元素。

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

登录后复制

3. 移位（）

从数组中删除第一个元素并返回该元素。

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

登录后复制

4. 取消移位()

将一个或多个元素添加到数组的开头并返回新的长度。

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

登录后复制

5. 连接（）

合并两个或多个数组并返回一个新数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

登录后复制

6. 加入（）

将数组的所有元素连接成一个字符串。

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

登录后复制

7. 反向()

反转数组中元素的顺序。

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

登录后复制

8. 切片（）

将数组的一部分的浅拷贝返回到新的数组对象中。

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

登录后复制

9. 拼接（）

通过删除、替换或添加元素来更改数组的内容。

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

登录后复制

10. 排序（）

对数组的元素进行就地排序并返回排序后的数组。

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

登录后复制

11. 过滤器（）

创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

登录后复制

12. 地图（）

使用对调用数组中的每个元素调用所提供函数的结果创建一个新数组。

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

登录后复制

13. 减少（）

对累加器和数组中的每个元素应用函数，将其减少为单个值。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

登录后复制

14. 查找（）

返回数组中满足所提供的测试函数的第一个元素的值。

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

登录后复制

15. 查找索引()

返回数组中满足所提供的测试函数的第一个元素的索引。

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

登录后复制

16. 每个（）

测试数组中的所有元素是否通过提供的函数实现的测试。

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x < 10);
console.log(allBelowTen); // Output: true

登录后复制

17. 一些（）

测试数组中至少一个元素是否通过所提供函数实现的测试。

let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true

登录后复制

18. 包含()

确定数组的条目中是否包含某个值。

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true

登录后复制

19.indexOf()

返回在数组中可以找到给定元素的第一个索引，如果不存在则返回 -1。

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2

登录后复制

20.lastIndexOf()

返回在数组中可以找到给定元素的最后一个索引，如果不存在则返回 -1。

let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5

登录后复制

21. 平（）

创建一个新数组，其中所有子数组元素递归连接到指定深度。

let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]

登录后复制

22. 平面地图()

首先使用映射函数映射每个元素，然后将结果展平到一个新数组中。

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]

登录后复制

23. 来自（）

从类似数组或可迭代对象创建一个新的浅复制数组实例。

let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]

登录后复制

24. isArray()

判断传入的值是否是数组。

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false

登录后复制

25. 的()

创建一个

具有可变数量参数的新数组实例，无论参数的数量或类型如何。

let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]

登录后复制

Practical Examples

Example 1: Removing Duplicates from an Array

let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]

登录后复制

Example 2: Summing All Values in an Array

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15

登录后复制

Example 3: Flattening a Deeply Nested Array

let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]

登录后复制

Example 4: Finding the Maximum Value in an Array

let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5

登录后复制

Example 5: Creating an Array of Key-Value Pairs

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]

登录后复制

Conclusion

Arrays are an essential part of JavaScript, providing a powerful way to manage collections of data. By mastering array functions, you can perform complex data manipulations with ease and write more efficient and readable code. This comprehensive guide has covered the most important array functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

以上是掌握 JavaScript 数组指南的详细内容。更多信息请关注PHP中文网其他相关文章！