526互联

map()和filter()的用法

发布时间 2023-08-14 10:46:50作者: zy89898976

1.map()函数

（1）map()适用于映射新的数组

let arr1 = [1, 4, 9, 16];
let NewArr = arr1.map((x) => x * 2);
console.log(NewArr); // [2, 8, 18, 32];

 但是，当用if条件返回时，会出现undefined

let arr1 = [1, 4, 9, 16];
let NewArr = arr1.map((x) => {
    if( x == 4) {
        return x*2
    }
});
console.log(NewArr); // [undefined, 8, undefined, undefined];

原因在于，map（）方法创建一个新数组，不改变原数组，但是这个数组不是遍历完以后才被赋值的，而是每遍历一次就会返回一个值，所以只有当x = 4的时候才会return 8，而其他遍历因为没有return 所以就返回了undefined。

要注意的是return什么就会返回什么：

let arr1 = [1, 4, 9, 16];
let NewArr = arr1.map((x) => {
    return x!=4
});
console.log(NewArr); // [true, false, true, true];

这里想要返回x不等于4的值，但是如果这么写的话，返回的就是true和false

（2）map可以重新格式化数组中的对象

var arr1 = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}]
var NewArr = arr1.map(function(obj) {
    var nobj = {}
    nobj[obj.key] = obj.value
    return nobj
})
console.log(NewArr)//[{1: 10}, {2: 20}, {3: 30}]

2. filter()函数

filter函数主要是过滤作用，筛选出符合一定条件的数组元素并形成新的数组，不改变原数组

let arr1 = [1, 2, 3, 4, 5]
let newArr = arr1.filter(item => {
    return item < 4
})
console.log(newArr)//[1, 2, 3]