前端面试题：JS中filter()、reduce()、map()使用方法和区别~

2022-03-02 23:02:56 阅读：118 来源： 互联网

标签：map 面试题 console log reduce filter let 数组

filter()方法创建一个新数组，新数组中的元素是通过过滤筛选指定数组中符合条件的所有元素

filter不会对空数组进行过滤
filter不会改变原数组
用法

var arr = [
    {name:"张三",age:14},
    {name:"李四",age:19},
    {name:"王五",age:20},
]

let _arr = arr.filter(function(_a){ //这个参数代表数组中的参数
    return _a.age>18
})
console.log(_arr)   //输出一个数组，数组中的对象为年龄大于18的李四和王五

reduce() 遍历数组，调用回调函数，将数组元素累加成一个值，reduce从索引最小值开始，reduceRight反向
- reduce对空数组不会执行回调
- 参数：arr.reduce(function(1.承接计算的结果,2.本次需要遍历计算的元素,3.索引值,4.数组本身),5.用于计算的初始值)
- 如果没有初始值，那么第一个参数的初始值就是数组下标为0的元素，本次遍历从下标1开始
- 如果设置初始值，那么第一个参数的初始值就是用于计算的初始值，本次遍历从0开始
- ```
var arr = [
    {name:"张三",age:12},
    {name:"李四",age:19},
    {name:"赵六",age:15},
]
let _arr = arr.reduce(function(_a,_b,_c,_d){
    return _a+_b.age    //返回数组中年龄的累加值
})
```
map()也是返回一个新的数组，数组中的元素为原始数组元素调用函数处理后的值
- map()方法按照原始数组元素顺序依次处理元素
- map()不会改变原始数组

由上可见reduce()方法用于计算，将数组进行累加，而filter()和map()都不会影响原数组，都会返回一个新的数组

filter和map()的区别是什么呢?

filter()方法根据一定的条件对原数组的长度进行过滤返回一个新的数组，这个新数组改变了原数组的长度，不会改变原数组的内容

let a = [1, 2, 3, 4, 5, 6]
let newA = a.filter((x) => {
    if (x > 4) {
        return x
    }
})
console.log(a);     //(6) [1, 2, 3, 4, 5, 6]
console.log(newA);  //(2)[5,6]

let a = [1, 2, 3, 4, 5, 6]
let newA = a.filter((x) => {
    return x + '个'
})
console.log(a);       //(6) [1, 2, 3, 4, 5, 6]
console.log(newA);    //(2)[5,6]

map()方法根据一定的条件对原数组内容进行处理返回一个新的数组，这个新数组不会改变原数组的长度，只改变原数组的内容

let a = [1, 2, 3, 4, 5, 6]
let newA = a.map((x) => {
    if (x > 4) {
        return x
    }
})
// console.log(a);  //(6) [1, 2, 3, 4, 5, 6]
console.log(newA);  //(6) [undefined, undefined, undefined, undefined, 5, 6]

let a = [1, 2, 3, 4, 5, 6]
let newA = a.map((x) => {
    return x + '个'
})
console.log(a);    //(6) [1, 2, 3, 4, 5, 6]
console.log(newA); //(6) ['1个', '2个', '3个', '4个', '5个', '6个']

标签：map,面试题,console,log,reduce,filter,let,数组
来源： https://blog.csdn.net/weixin_48491416/article/details/123241809

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端面试题：JS中filter()、reduce()、map()使用方法和区别~