【知识总结】深度探索JavaScript数组方法：代码更优雅高效

博主： Fivk
发布时间：2023 年 05 月 28 日
1192 次浏览
3470字数
分类：知识总结

JavaScript提供了丰富的数组方法，以便于我们处理和操作数组。在这篇文章中，我们将依次介绍并演示如何使用这些方法。

## 1. find()：寻找符合条件的元素

`find()` 方法会返回数组中满足提供的测试函数的第一个元素的值。如果没有找到符合条件的元素，则返回 undefined。

```javascript
let array = [1, 2, 3, 4];
let found = array.find(element => element > 2);
console.log(found);  // 输出 3
```

## 2. filter()：筛选符合条件的元素

`filter()` 方法创建一个新数组，新数组中的元素都满足指定函数的测试。

```javascript
let array = [1, 2, 3, 4];
let filtered = array.filter(num => num > 2);
console.log(filtered);  // 输出 [3, 4]
```

## 3. map()：对每个元素执行函数并返回新数组

`map()` 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

```javascript
let array = [1, 2, 3, 4];
let squares = array.map(num => num * num);
console.log(squares);  // 输出 [1, 4, 9, 16]
```

## 4. reduce()：累加数组元素

`reduce()` 方法对数组中的每个元素执行一个提供的函数，结果汇总为单个返回值。如果没有为 `reduce()` 提供初始值，那么第一个元素将作为累积器的初始值，并且跳过索引0，从索引1开始调用。如果提供了初始值，那么将从索引0开始。

```javascript
let array = [1, 2, 3, 4];
let sum = array.reduce((total, value) => total + value, 0);
console.log(sum);  // 输出 10
```

## 5. findIndex()：寻找符合条件的元素索引

`findIndex()` 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

```javascript
let array = [1, 2, 3, 4];
let index = array.findIndex(num => num > 2);
console.log(index);  // 输出 2
```

## 6. some()：判断数组中是否有符合条件的元素

`some()` 方法用于测试数组中是否有至少一个元素满足被提供的函数。它会立即返回 true 或 false，一旦找到满足条件的元素，它将不会检查剩余的元素。

```javascript
let array = [1, 2, 3, 4];
let hasLargeNumber = array.some(num => num > 3);
console.log(hasLargeNumber);  // 输出 true
```

## 7. every()：判断所有元素是否都符合条件

`every()` 方法测试数组的所有元素是否都满足指定函数的测试。返回布尔值。

```javascript
let array = [1, 2, 3, 4];
let allGreaterThanZero = array.every(num => num > 0);
console.log(allGreaterThanZero);  // 输出 true
```

## 8. sort()：排序数组

`sort()` 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串 Unicode 码点。

```javascript
let array = [4, 2, 3, 1];
let sorted = array.sort();
console.log(sorted);  // 输出 [1, 2, 3, 4]
```

## 9. slice()：截取数组的一部分

`slice()` 方法返回一个新的数组对象，这个对象是一个由开始到结束（不包括结束）选择的数组的一部分浅拷贝。

```javascript
let array = [1, 2, 3, 4];
let sliced = array.slice(1, 3);
console.log(sliced);  // 输出 [2, 3]
```

## 10. includes()：判断数组是否包含某个元素

`includes()` 方法用于判断一个数组是否包含一个指定的值，根据情况返回 true 或 false。

```javascript
let array = [1, 2, 3, 4];
let includesTwo = array.includes(2);
console.log(includesTwo);  // 输出 true
```

## 11. fill()：填充数组元素

`fill()` 方法改变一个数组的所有元素为一个静态值，从 start index 到 end index。此方法会修改原数组。

```javascript
let array = [1, 2, 3, 4];
array.fill(0, 1, 3);
console.log(array);  // 输出 [1, 0, 0, 4]
```

## 12. concat()：连接两个或多个数组

`concat()` 方法用于合并两个或多个数组。此方法不会改变现有数组，而是返回一个新数组。

```javascript
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = array1.concat(array2);
console.log(array3);  // 输出 [1, 2, 3, 4, 5, 6]
```

## 13. forEach()：遍历数组

`forEach()` 方法对数组的每个元素执行一次给定的函数。

```javascript
let array = [1, 2, 3, 4];
array.forEach(num => console.log(num * num));
// 输出 1
// 输出 4
// 输出 9
// 输出 16
```

## 14. 扩展运算符：用于合并数组和将伪数组转为真数组

扩展运算符 `...` 允许将一个数组或类似数组的对象在语法层面展开。

```javascript
let array1 = [1, 2, 3];
let array2 = [...array1, 4, 5, 6];
console.log(array2);  // 输出 [1, 2, 3, 4, 5, 6]
```

## 15. Array.from()：从类数组对象或可迭代对象创建一个新的数组实例

`Array.from()` 方法从一个类似数组或可迭代的对象创建一个新的数组实例。

```javascript
let arrayLike = {length: 3, 0: 'a', 1: 'b', 2: 'c'};
let array = Array.from(arrayLike);
console.log(array);  // 输出 ['a', 'b', 'c']
```

以上就是一些JavaScript数组方法的介绍和示例，希望能够帮助你更好地理解和使用JavaScript的数组方法，使你的代码更加优雅和高效。

最后修改：2023 年 05 月 28 日

如果觉得我的文章对你有用，请随意赞赏

【知识总结】深度探索JavaScript数组方法：代码更优雅高效

Fivk • 2023 年 05 月 28 日

JavaScript提供了丰富的数组方法，以便于我们处理和操作数组。在这篇文章中，我们将依次介绍并演示如何使用这些方法。

## 1. find()：寻找符合条件的元素

`find()` 方法会返回数组中满足提供的测试函数的第一个元素的值。如果没有找到符合条件的元素，则返回 undefined。

```javascript
let array = [1, 2, 3, 4];
let found = array.find(element => element > 2);
console.log(found);  // 输出 3
```

## 2. filter()：筛选符合条件的元素

`filter()` 方法创建一个新数组，新数组中的元素都满足指定函数的测试。

```javascript
let array = [1, 2, 3, 4];
let filtered = array.filter(num => num > 2);
console.log(filtered);  // 输出 [3, 4]
```

## 3. map()：对每个元素执行函数并返回新数组

`map()` 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

```javascript
let array = [1, 2, 3, 4];
let squares = array.map(num => num * num);
console.log(squares);  // 输出 [1, 4, 9, 16]
```

## 4. reduce()：累加数组元素

```javascript
let array = [1, 2, 3, 4];
let sum = array.reduce((total, value) => total + value, 0);
console.log(sum);  // 输出 10
```

## 5. findIndex()：寻找符合条件的元素索引

`findIndex()` 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

```javascript
let array = [1, 2, 3, 4];
let index = array.findIndex(num => num > 2);
console.log(index);  // 输出 2
```

## 6. some()：判断数组中是否有符合条件的元素

`some()` 方法用于测试数组中是否有至少一个元素满足被提供的函数。它会立即返回 true 或 false，一旦找到满足条件的元素，它将不会检查剩余的元素。

```javascript
let array = [1, 2, 3, 4];
let hasLargeNumber = array.some(num => num > 3);
console.log(hasLargeNumber);  // 输出 true
```

## 7. every()：判断所有元素是否都符合条件

`every()` 方法测试数组的所有元素是否都满足指定函数的测试。返回布尔值。

```javascript
let array = [1, 2, 3, 4];
let allGreaterThanZero = array.every(num => num > 0);
console.log(allGreaterThanZero);  // 输出 true
```

## 8. sort()：排序数组

`sort()` 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串 Unicode 码点。

```javascript
let array = [4, 2, 3, 1];
let sorted = array.sort();
console.log(sorted);  // 输出 [1, 2, 3, 4]
```

## 9. slice()：截取数组的一部分

`slice()` 方法返回一个新的数组对象，这个对象是一个由开始到结束（不包括结束）选择的数组的一部分浅拷贝。

```javascript
let array = [1, 2, 3, 4];
let sliced = array.slice(1, 3);
console.log(sliced);  // 输出 [2, 3]
```

## 10. includes()：判断数组是否包含某个元素

`includes()` 方法用于判断一个数组是否包含一个指定的值，根据情况返回 true 或 false。

```javascript
let array = [1, 2, 3, 4];
let includesTwo = array.includes(2);
console.log(includesTwo);  // 输出 true
```

## 11. fill()：填充数组元素

`fill()` 方法改变一个数组的所有元素为一个静态值，从 start index 到 end index。此方法会修改原数组。

```javascript
let array = [1, 2, 3, 4];
array.fill(0, 1, 3);
console.log(array);  // 输出 [1, 0, 0, 4]
```

## 12. concat()：连接两个或多个数组

`concat()` 方法用于合并两个或多个数组。此方法不会改变现有数组，而是返回一个新数组。

```javascript
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = array1.concat(array2);
console.log(array3);  // 输出 [1, 2, 3, 4, 5, 6]
```

## 13. forEach()：遍历数组

`forEach()` 方法对数组的每个元素执行一次给定的函数。

```javascript
let array = [1, 2, 3, 4];
array.forEach(num => console.log(num * num));
// 输出 1
// 输出 4
// 输出 9
// 输出 16
```

## 14. 扩展运算符：用于合并数组和将伪数组转为真数组

扩展运算符 `...` 允许将一个数组或类似数组的对象在语法层面展开。

```javascript
let array1 = [1, 2, 3];
let array2 = [...array1, 4, 5, 6];
console.log(array2);  // 输出 [1, 2, 3, 4, 5, 6]
```

## 15. Array.from()：从类数组对象或可迭代对象创建一个新的数组实例

`Array.from()` 方法从一个类似数组或可迭代的对象创建一个新的数组实例。

```javascript
let arrayLike = {length: 3, 0: 'a', 1: 'b', 2: 'c'};
let array = Array.from(arrayLike);
console.log(array);  // 输出 ['a', 'b', 'c']
```

以上就是一些JavaScript数组方法的介绍和示例，希望能够帮助你更好地理解和使用JavaScript的数组方法，使你的代码更加优雅和高效。

【知识总结】深度探索JavaScript数组方法：代码更优雅高效

【踩坑日志】SpringBoot项目启动提示This primary key of "id" is primitive !不建议如此请使用包装类 in Class:

【C】极域电子教室学生端解除控制

【开发技巧】@CrossOrigin注解解决跨域问题

这是好东西

【Fivk】文章归档

【SpringCloud】Nacos 安装指南

【期末复习】数据科学导论

【ACM】小爱玩拼图

【动态规划】数字三角形

【C】指针运算

【知识总结】深度探索JavaScript数组方法：代码更优雅高效