javaScript之map、filter、some、every

一、功能

1、map方法

功能：遍历数组的每个元素，并将每个元素传递给提供的函数，然后返回一个新数组，该数组是由函数处理后的结果组成的。
返回：新数组

const numbers = [1, 2, 3];  
const doubled = numbers.map(num => num * 2);  
console.log(doubled); // [2, 4, 6]

2、filter方法

功能：遍历数组的每个元素，并将每个元素传递给提供的函数。如果函数返回true，则将该元素包含在新数组中。
返回：包含所有使函数返回true的元素的新数组

const numbers = [1, 2, 3, 4, 5];  
const evenNumbers = numbers.filter(num => num % 2 === 0);  
console.log(evenNumbers); // [2, 4]

3、some方法

功能：遍历数组的每个元素，并将每个元素传递给提供的函数。如果函数对任何元素返回true，则some方法立即返回true。
返回：布尔值（true或false）

const numbers = [1, 2, 3, 4, 5];  
const hasEven = numbers.some(num => num % 2 === 0);  
console.log(hasEven); // true

4、every方法

功能：遍历数组的每个元素，并将每个元素传递给提供的函数。如果函数对所有元素都返回true，则every方法返回true。
**返回**：布尔值（true或false）

const numbers = [2, 4, 6, 8, 10];  
const areAllEven = numbers.every(num => num % 2 === 0);  
console.log(areAllEven); // true

二、相同点

● 它们都是数组的方法，用于遍历数组元素。
● 它们都接受一个回调函数作为参数，并对数组的每个元素执行该回调函数。

三、使用场景

1、map：当你需要将数组的每个元素转换为另一种形式或结构时。例如，将数字数组转换为字符串数组，或将对象数组转换为特定格式的数组。
2、filter：当你需要从数组中筛选出满足特定条件的元素时。例如，从用户列表中筛选出年龄大于某个值的用户。
3、some：当你需要检查数组中是否至少有一个元素满足特定条件时。例如，检查用户列表中是否至少有一个管理员。
4、every：当你需要检查数组中的所有元素是否都满足特定条件时。例如，验证一个数字数组是否包含的都是偶数。

四、配合实例

现在有用户的角色有数组，如：[{id:1,name:’经理’},{id:2,name:’员工’}]，用户已选择的数组[{id:2,name:’经理’}], 要求获取用户未选中的角色列表，和用户已选择的角色的id数组。

const roleList = [
            {
                id: 1,
                name: '老板'
            }, 
            {
                id: 2,
                name: '经理'
            }, 
            {
                id: 3,
                name: '运营总监'
            }, 
            {
                id: 4,
                name: 'CEO'
            }, 
            {
                id: 5,
                name: '销售'
            }, 
            {
                id: 6,
                name: '实施'
            }, 
            {
                id: 7,
                name: '程序员'
            }, 
            {
                id: 8,
                name: 'UI工程师'
            }, 
            {
                id: 9,
                name: '产品经理'
            }];

        // 用户已选择的数组
        const selectedRoleList = [
            {
                id: 2,
                name: '经理'
            }, 
            {
                id: 3,
                name: '运营总监'
            }, 
            {
                id: 6,
                name: '实施'
            }, 
            {
                id: 7,
                name: '程序员'
            }, 
            {
                id: 9,
                name: '产品经理'
            }];
       var unselected = roleList.filter(itme => {
            return !selectedRoleList.some(index => {
                return index.id == itme.id;
            })
        })
        console.log(unselected);
        var selected = selectedRoleList.map((value => value.id));
        console.log(`已被选择的id：${selected}`);

五、结语

总的来说，这四个方法都是JavaScript中处理数组时非常有用的工具，它们提供了简洁而强大的方式来遍历和处理数组元素。