array & .flat .filter .map .push .trim .find

array & .flat .filter .map .push .trim .find

1. .flat()

• 作用：将嵌套的数组“拉平”，返回一个新数组。
• 语法：array.flat(depth)
  • depth 是可选参数，表示要拉平的嵌套层级，默认值是 1。

示例：

const arr = [1, 2, [3, 4, [5, 6]]];

// 默认拉平一层
console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]]

// 拉平两层
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]

// 完全拉平
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6]

// 实际应用  
const comments = [  
  { replies: [1, 2, 3] },  
  { replies: [4, 5] }  
];  
const allReplies = comments.map(x => x.replies).flat();  // [1, 2, 3, 4, 5]  

2. .filter()

• 作用：根据条件过滤数组中的元素，返回一个新数组。
• 语法：array.filter(callback(element, index, array))
  • callback 是一个函数，返回 true 的元素会保留。

示例：

const numbers = [1, 2, 3, 4, 5];

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

// 筛选出大于 3 的数字
const greaterThanThree = numbers.filter(num => num > 3);
console.log(greaterThanThree); // [4, 5]

// 实际应用  
const products = [  
  { name: '苹果', price: 5 },  
  { name: '香蕉', price: 3 },  
  { name: '橙子', price: 4 }  
];  
const cheapProducts = products.filter(product => product.price < 4);  
// [{ name: '香蕉', price: 3 }]  

3. .map()

• 作用：对数组中的每个元素执行回调函数，返回一个新数组。
• 语法：array.map(callback(element, index, array))

示例：

const numbers = [1, 2, 3, 4, 5];

// 每个元素乘以 2
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 转换为字符串
const strings = numbers.map(num => `数字: ${num}`);
console.log(strings); // ['数字: 1', '数字: 2', '数字: 3', '数字: 4', '数字: 5']

// 实际应用  
const users = [  
  { name: '张三', age: 20 },  
  { name: '李四', age: 25 }  
];  
const names = users.map(user => user.name);  // ['张三', '李四']  

4. .push()

• 作用：向数组末尾添加一个或多个元素，返回新数组的长度。
• 语法：array.push(element1, element2, ...)

示例：

const fruits = ['苹果', '香蕉'];

// 添加一个元素
fruits.push('橙子');
console.log(fruits); // ['苹果', '香蕉', '橙子']

// 添加多个元素
fruits.push('葡萄', '西瓜');
console.log(fruits); // ['苹果', '香蕉', '橙子', '葡萄', '西瓜']

5. .trim()

• 作用：去除字符串两端的空格。
• 语法：string.trim()

示例：

const str = '   Hello World!   ';

// 去除两端空格
// 注意：trim() 是字符串方法，不是数组方法  
console.log(str.trim()); // 'Hello World!'

// 去除空格后再转换为大写
console.log(str.trim().toUpperCase()); // 'HELLO WORLD!'
// 实际应用：处理用户输入  
const userInput = '   用户@qq.com   ';  
const email = userInput.trim();  // '用户@qq.com'  

6. .find()

• 作用：返回数组中第一个满足条件的元素。如果没有找到，返回 undefined。
• 语法：array.find(callback(element, index, array))

示例：

const numbers = [1, 2, 3, 4, 5];

// 找到第一个大于 3 的数字
const firstGreaterThanThree = numbers.find(num => num > 3);
console.log(firstGreaterThanThree); // 4

// 找不到时返回 undefined
const notFound = numbers.find(num => num > 10);
console.log(notFound); // undefined

// 实际应用  
const users = [  
  { id: 1, name: '张三' },  
  { id: 2, name: '李四' }  
];  
const user = users.find(user => user.id === 2);  // { id: 2, name: '李四' }  

综合示例

将这些方法结合起来使用：

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

// 筛选出年龄大于 25 的人
const filtered = data.filter(person => person.age > 25);
console.log(filtered); // [{ id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 }]

// 提取名字
const names = filtered.map(person => person.name);
console.log(names); // ['Bob', 'Charlie']

// 找到名字为 'Charlie' 的人
const charlie = data.find(person => person.name === 'Charlie');
console.log(charlie); // { id: 3, name: 'Charlie', age: 35 }

// 添加新的人
data.push({ id: 4, name: 'David', age: 40 });
console.log(data); // 原数组增加了新的人

// 去除名字中的空格（假设名字有空格）
const trimmedNames = names.map(name => name.trim());
console.log(trimmedNames); // ['Bob', 'Charlie']

// 示例1：处理数据
const data = [
  { category: '水果', items: ['苹果', '香蕉'] },
  { category: '蔬菜', items: ['胡萝卜', '白菜'] }
];

const fruits = data
  .find(item => item.category === '水果')  // 找到水果类别
  ?.items                                  // 获取水果列表
  .map(fruit => fruit.trim())             // 处理每个水果名称
  .filter(fruit => fruit.length > 0);     // 过滤掉空名称

// 示例2：处理嵌套数组
const nestedArrays = [[1, 2], [3, [4, 5]], 6];
const processedData = nestedArrays
  .flat(2)                                // 扁平化数组
  .filter(num => num % 2 === 0)           // 筛选偶数
  .map(num => num * 2);                   // 每个数乘以2

实用技巧

1. 链式调用

const result = ['  a ', ' b', 'c  ']
  .map(x => x.trim())         // ['a', 'b', 'c']
  .filter(x => x !== 'b')     // ['a', 'c']
  .map(x => x.toUpperCase()); // ['A', 'C']

2. 数据处理

const orders = [
  { id: 1, items: ['商品A', '商品B'], status: '待发货' },
  { id: 2, items: ['商品C'], status: '已发货' },
  { id: 3, items: ['商品D', '商品E'], status: '待发货' }
];

// 获取所有待发货订单的商品列表
const pendingItems = orders
  .filter(order => order.status === '待发货')
  .map(order => order.items)
  .flat();

3. 数据清理

const userInputs = ['  email@example.com ', '', '  test@test.com', ' invalid '];
const validEmails = userInputs
  .map(email => email.trim())
  .filter(email => email.includes('@'));

这些方法都是函数式编程的体现，它们：

• 不会修改原数组（除了 push）
• 返回新数组（除了 find 和 push）
• 可以链式调用
• 使代码更简洁、可读性更强

总结

这些方法是 JavaScript 中操作数组和字符串的基础工具，功能强大且易用。以下是它们的主要区别：

• .flat()：用于“拉平”嵌套数组。
• .filter()：用于筛选数组中的元素。
• .map()：用于对数组中的每个元素进行转换。
• .push()：用于向数组末尾添加元素。
• .trim()：用于去除字符串两端的空格。
• .find()：用于查找数组中第一个满足条件的元素。