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

一轮大月亮2025-05-31 11:44

摘要：

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

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

1.数字数组处理

javascript 复制代码

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.对象数组转换

javascript 复制代码

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.数据清洗

javascript 复制代码

const data = [' hello ', ' world ', '', '  ', 'good'];

// 去除空白字符并过滤空字符串
const cleanedData = data
  .map(str => str.trim())  // 去除两端空格
  .filter(str => str.length > 0);  // 过滤空字符串

console.log(cleanedData); // ['hello', 'world', 'good']

语法解析

javascript 复制代码

// 传统函数写法
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)

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

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