当前位置：首页 > article >正文

JavaScript es6 语法 map().filter() 链式调用,语法解析和常见demo

article 2025/8/30 14:21:22

摘要：
map：遍历数组并对每个元素执行回调函数，返回一个新数组

filter：对 map 返回的数组进行过滤，返回满足条件的元素组成的新数组

1.数字数组处理

const numbers = [1, 2, 3, 4, 5];// 先平方，再筛选偶数
const result = numbers.map(num => num * num)  // [1, 4, 9, 16, 25].filter(num => num % 2 === 0);  // [4, 16]console.log(result); // [4, 16]

2.对象数组转换

const users = [{ id: 1, name: 'Alice', active: true },{ id: 2, name: 'Bob', active: false },{ id: 3, name: 'Charlie', active: true }
];// 获取所有活跃用户的名称
const activeUserNames = users.filter(user => user.active)  // 先过滤活跃用户.map(user => user.name);  // 再提取名字console.log(activeUserNames); // ['Alice', 'Charlie']

3.数据清洗

const data = [' hello ', ' world ', '', '  ', 'good'];// 去除空白字符并过滤空字符串
const cleanedData = data.map(str => str.trim())  // 去除两端空格.filter(str => str.length > 0);  // 过滤空字符串console.log(cleanedData); // ['hello', 'world', 'good']

语法解析

// 传统函数写法
numbers.map(function(num) {return num * num;
})// 箭头函数写法  (复杂函数体需要大括号和 return)
numbers.map((num )=> {  return   num * num;
})//当函数体只有单个表达式时： 可以省略大括号 {} 
//该表达式的结果会自动作为返回值（不需要 return 关键字）
numbers.map((num) => num * num)//当只有一个参数时，可以省略括号 ()
numbers.map(num => num * num)