数组方法filter的运用
时间: 2024-06-20 10:01:06 浏览: 6
`Array.prototype.filter()` 是 JavaScript 数组对象的一个内置方法,用于创建一个新数组,只包含通过所提供函数实现的测试的所有元素。该方法对原数组不会产生任何改变,而是返回一个新的数组。
使用 `filter()` 的基本语法如下:
```javascript
array.filter(callback(element[, index[, array]])[, thisArg])
```
- `callback`: 一个函数,它会被为数组中的每个元素调用一次。这个函数应该返回一个布尔值,如果返回 `true`,则该元素将被包含在新数组中;如果返回 `false`,则不包含。
- `element`: 当前正在检查的数组元素。
- `index` (可选): 当前元素的索引。
- `array` (可选): 调用 `filter()` 的原始数组(用于 `thisArg`)。
- `thisArg` (可选): 可以设置函数 `callback` 中的 `this` 值。
一个简单的例子是过滤出数组中所有大于10的数:
```javascript
const numbers = [1, 5, 10, 15, 20];
const filteredNumbers = numbers.filter(num => num > 10);
console.log(filteredNumbers); // 输出:[15, 20]
```
相关问题
前端面试题数组的方法
在前端面试中,经常会被问到关于JavaScript数组的方法。下面是一些常见的数组方法:
1. `push()`:向数组末尾添加一个或多个元素,并返回新数组的长度。
2. `pop()`:删除并返回数组的最后一个元素。
3. `shift()`:删除并返回数组的第一个元素。
4. `unshift()`:向数组的开头添加一个或多个元素,并返回新数组的长度。
5. `concat()`:将两个或多个数组合并成一个新数组。
6. `slice()`:返回指定索引范围内的元素,不会修改原数组。
7. `splice()`:从指定位置删除或替换元素,并返回被删除的元素。
8. `join()`:将数组中的所有元素以指定的分隔符连接成一个字符串。
9. `indexOf()`:返回指定元素在数组中首次出现的索引,如果不存在则返回-1。
10. `lastIndexOf()`:返回指定元素在数组中最后一次出现的索引,如果不存在则返回-1。
11. `forEach()`:对数组中的每个元素执行指定的操作。
12. `map()`:对数组中的每个元素执行指定的操作,并返回一个新数组。
13. `filter()`:根据指定条件过滤数组中的元素,并返回一个新数组。
14. `reduce()`:对数组中的所有元素执行指定的累加器函数,返回一个累计值。
15. `sort()`:对数组进行排序,默认按照Unicode编码顺序进行排序。
16. `reverse()`:颠倒数组中元素的顺序。
17. `find()`:返回数组中满足指定条件的第一个元素。
18. `findIndex()`:返回数组中满足指定条件的第一个元素的索引。
19. `some()`:检测数组中是否至少有一个元素满足指定条件。
20. `every()`:检测数组中的所有元素是否都满足指定条件。
以上只是一些常见的数组方法,还有许多其他方法可以用于对数组进行操作和处理。在面试中,了解这些常用方法并能够灵活运用是很重要的。
js 数组去重 最好的
引用和提供了关于JavaScript数组去重的方法,下面将列举其中六种常见的数组去重方法。请注意,这些方法都是针对JavaScript语言的。
1. 使用Set:Set是ES6中引入的数据结构,它可以存储唯一的值。通过将数组转换为Set,然后再将Set转换回数组,即可实现数组去重。例如:
```javascript
const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = Array.from(new Set(arr));
```
2. 使用indexOf方法:遍历数组,将元素依次与之前的元素进行比较,如果不存在相同的元素,则将其添加到结果数组中。例如:
```javascript
const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = [];
for(let i = 0; i < arr.length; i++){
if(uniqueArr.indexOf(arr[i]) === -1){
uniqueArr.push(arr[i]);
}
}
```
3. 使用includes方法:与indexOf方法类似,includes方法也可以判断数组是否包含某个元素。例如:
```javascript
const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = [];
for(let i = 0; i < arr.length; i++){
if(!uniqueArr.includes(arr[i])){
uniqueArr.push(arr[i]);
}
}
```
4. 使用filter方法:利用filter方法筛选出只包含第一次出现的元素的新数组。例如:
```javascript
const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = arr.filter((item, index) => {
return arr.indexOf(item) === index;
});
```
5. 使用reduce方法:通过reduce方法遍历数组,将之前未出现的元素添加到结果数组中。例如:
```javascript
const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = arr.reduce((prev, cur) => {
if(!prev.includes(cur)){
prev.push(cur);
}
return prev;
}, []);
```
6. 使用Map:通过使用Map数据结构来存储数组元素,由于Map中的键是唯一的,可以实现数组去重。例如:
```javascript
const arr = [1, 2, 2, 3, 4, 4];
const map = new Map();
const uniqueArr = [];
for (const item of arr) {
if (!map.has(item)) {
map.set(item, true);
uniqueArr.push(item);
}
}
```
以上是常见的六种JS数组去重方法,通过灵活运用,可以根据实际情况选择最适合的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [高性能js数组去重(12种方法,史上最全)](https://download.csdn.net/download/weixin_38665814/12930200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [JS实现数组去重方法总结(六种方法)](https://download.csdn.net/download/weixin_38661008/12967052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [Html+Css+JS的生日网页](https://download.csdn.net/download/Amax3747/88254112)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)