JavaScript中map()和filter()的使用区别

const numbers = [1, 2, 3, 4, 5];
const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Charlie', active: true }
];

// 将每个数字平方
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9, 16, 25]

// 提取用户名数组
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

// 处理空位
const sparse = [1, , 3];
const mapped = sparse.map(x => x * 2);
console.log(mapped); // [2, , 6]

// 筛选偶数
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// 筛选活跃用户
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); 
// [{id:1,name:'Alice',active:true}, {id:3,name:'Charlie',active:true}]

// 处理空位
const sparse = [1, , 3];
const filtered = sparse.filter(x => true);
console.log(filtered); // [1, 3] (空位被跳过)

// 将温度从摄氏度转换为华氏度
const celsius = [0, 10, 20];
const fahrenheit = celsius.map(c => c * 9/5 + 32);
console.log(fahrenheit); // [32,50,68]

// 筛选正数
const temps = [-2, 5, -10, 15];
const positiveTemps = temps.filter(t => t > 0);
console.log(positiveTemps); //[5,15]

[1, 2, 3].map(x => x * 2); // [2, 4, 6] (长度保持3)

[1, 2, 3].filter(x => x > 1); // [2, 3] (长度变为2)

[1, 2].map(x => ({ value: x })); // 返回对象数组:  [{value:1}, {value:2}]

[1, 2].filter(x => x % 2 === 0); // 必须返回true/false // [2]

// 获取所有活跃用户的名字
const activeNames = users
  .filter(user => user.active)    // 先筛选
  .map(user => user.name);        // 再转换
console.log(activeNames);         // ['Alice', 'Charlie']

// 计算所有正数的平方根
const numbers = [4, -1, 9, -5, 16];
const positiveRoots = numbers
  .filter(n => n > 0)            // 筛选正数
  .map(n => Math.sqrt(n));       // 计算平方根
console.log(positiveRoots );     // [2, 3, 4]

// 更高效的写法：先筛选再转换（减少map操作次数）
bigArray.filter(x => x > 10).map(x => x * 2);

// 低效写法（会先对所有元素执行转换）
bigArray.map(x => x * 2).filter(x => x > 20);

const sparse = [1, , , 4];

// map会保留空位
const mapSparse = sparse.map(x => x * 2); 
console.log(mapSparse); // [2, , , 8]

// filter会跳过空位
const filterSparse =sparse.filter(x => true); 
console.log(filterSparse); // [1, 4]

const mixed = [0, 1, false, 2, '', 3];

// filter可以用于移除假值
const truths = mixed.filter(Boolean); // [1, 2, 3]