数组filter和map的区别以及注意事项

. . . . .

于 2021-04-26 16:43:38 发布

阅读量895

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/116161501

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

本文探讨了JavaScript中filter和map方法在处理数组时的行为差异。filter方法不会改变原数组的原子项，它根据条件过滤出新数组，而map则可以改变原子项，将每个元素转换为新的形式。在实际项目中，可以结合两者以实现更复杂的数组操作需求。

摘要由CSDN通过智能技术生成

1. filter做了一个过滤，返回的新数组并不会改变原子项。

例如：

	const data = [
        {
            label: 'aa',
            value: 1
        }, {
            label: 'bb',
            value: 2
        }
    ]
    const res = data.filter(item => {
        if (item.value === 2) {
            return item.label
        }
    })
    console.log(res);

在这里插入图片描述
通过上面结果，我们发现并没有返回value === 2对应的label bb，而是依然是个对象。
故：filter并不会改变原子项。

2. map做了一个映射，返回的新数组可以改变原来的原子项。

	const data = [
        {
            label: 'aa',
            value: 1
        }, {
            label: 'bb',
            value: 2
        }
    ]
    const res = data.map(item => {
        if (item.value === 2) {
            return item.label
        }
    })
    console.log(res);