forEach、map几个函数的功能和应用场景

在做项目时，经常会遇到处理数组的情况，JS提供了一个原生的API，比如：forEach、map 等等。在这里我们简单介绍这几个函数的应用场景，方便大家做项目时能够写少点代码，“偷点懒”。

forEach

forEach() 方法对数组的每个元素执行一次给定的函数。
使用场景：当我们对数组的元素进行处理时（例如：增加元素，元素值改变），可以使用这个函数
for example: 添加status 字段

let blogs = [
    {title:"胡三疯是帅锅",time:"2021-05-06", id: 1},
    {title:"胡三疯是大帅锅",time:"2022-09-05",id: 2} 
]

blogs.forEach(item=>{
    item.status = "已发布"
})

模拟实现forEach方法：

function forEach(arr, fn) {
    for(i = 0; i < arr.length; i++) {
        fn(arr[i])
    }
}

// Test
let arr = [1, 4, 6];
forEach(arr, function (item) {
    console.log(item);
})

map

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
使用场景：当我们调用接口时，数组数据不满足接口的数据格式，若当前数组数据和页面组件绑定，那么我们就不能直接使用forEach 改变当前数组，就需要使用map 在当前数组数据基础下，返回新的数组数据。
for example: 添加name属性，取值id, 并删除id 属性

let blogs = [
    {title:"胡三疯是帅锅",time:"2021-05-06", id: 1},
    {title:"胡三疯是大帅锅",time:"2022-09-05",id: 2} 
]

let newBlogs = blogs.map(item=>{
    return {
        ...item ,
        name:item.id,
        id:null
    };
})

模拟map实现：

const map = (arr, fn) => {
    let result = [];
    for(let value of arr) {
        result.push(fn(value));
    }
    return result;
}

let arr = [1, 3, 5];
arr = map(arr, v => v * v);
console.log(arr);

filter

filter() 方法创建一个新数组, 其包含 符合函数条件的所有元素
使用场景：当我们提交接口时，需要提交符合一定条件的元素组成的数组，就需要对原数组进行筛选。
for example:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result)

filter的模拟实现：

function filter(arr, fn) {
    let results = [];
    for(let i = 0; i < arr.length; i++) {
        if(fn(arr[i])) {
            results.push(arr[i]);
        }
    }
    return results;
}

// Test
let arr = [1, 4, 5, 8];
console.log(filter(arr, i => i % 2 === 0));

every

every() 方法用来判断一个数组内的所有元素是否都满足某个指定的条件（回调函数）。
使用场景：当我们进行逻辑操作时，我们会根据某个数组是否都满足某个条件，来进行不同的操作，就会用到这个函数
for example

let everyArr = [
    {
        name: "张三",
        num: 60
    },
    {
        name: "张三",
        num: 50
    }
    
]

let res = everyArr.every(item=> item.num > 30)

every方法模拟实现：

const every = (arr, fn) => {
    let result = true;
    for(let value of arr) {
        result = fn(value);
        if(!result) {
            break
        }
    }
    return result;
}

let arr = [99, 90, 88];
let result = every(arr, v => v > 60);
console.log(result);

some

some() 方法是否至少有1个元素满足某个指定的条件
使用场景：经常用于判断数组中元素是否有一个满足某个条件，进行不同的操作

let everyArr = [
    {
        name: "张三",
        num: 60
    },
    {
        name: "张三",
        num: 50
    }
    
]

let res1 = everyArr.some(item=> item.num > 50)

some函数模拟实现：

const some = (arr, fn) => {
    let result = false;
    for(let value of arr) {
        result = fn(value);
        if(result) {
            break;
        }
    }
    return result;
}

// Test
let arr = [86, 90, 88];
let result = some(arr, v => v < 60);
console.log(result);

参考文献

• Array.prototype.forEach()
• Array.prototype.map()
• Array.prototype.filter()
• Array.prototype.every()
• Array.prototype.some()