JavaScript中filter()和map()方法的区别

JavaScript中filter()和map()方法的区别

filter()和map()方法都会返回新数组,对原数组不会影响

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

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

---

filter()方法的使用：

对原数组的过滤,r适合得筛选后才能返回出去的数组

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

如果改变原数组的内容，返回的原数组和新数组内容不会有任何变化，效果如下：

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

map()方法的使用：
将元素进行处理后返回到新数组。

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

如果改变原数组的长度，返回的新数组长度不会有任何变化，效果如下：

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