JS实现数组过滤从简单到多条件筛选

下面是JS实现数组过滤从简单到多条件筛选的完整攻略。

一、简单数组过滤

在JS中，可以使用数组的filter()方法来实现简单的数组过滤。该方法接受一个回调函数作为参数，该回调函数的返回值为true或false，用于决定每个元素是否要留下。

下面是一个简单的示例，演示如何根据指定的条件过滤数组中的元素：

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

const filteredFruits = fruits.filter(fruit => fruit.length > 5);
// 过滤掉长度小于等于5的水果

console.log(filteredFruits);
// 输出：["banana", "cherry", "elderberry"]

二、多条件筛选

有时候，我们需要根据多个条件进行筛选。可以使用&&和||等逻辑运算符来进行多条件筛选。

下面是一个示例，演示如何根据多个条件筛选数组中的元素：

const products = [
  { name: 'apple', category: 'fruit', price: 2.99 },
  { name: 'carrot', category: 'vegetable', price: 0.99 },
  { name: 'orange', category: 'fruit', price: 1.99 },
  { name: 'broccoli', category: 'vegetable', price: 1.49 },
  { name: 'pear', category: 'fruit', price: 3.49 }
];

// 过滤掉价格小于2且分类为蔬菜的商品
const filteredProducts = products.filter(product => product.price >= 2 && product.category === 'fruit');

console.log(filteredProducts);
// 输出：[{name: "apple", category: "fruit", price: 2.99}, {name: "orange", category: "fruit", price: 1.99}, {name: "pear", category: "fruit", price: 3.49}]

在上面的示例中，我们使用了&&运算符将两个条件连接起来，表示只留下同时满足这两个条件的元素。

三、动态条件筛选

有时候，我们需要根据动态的条件进行筛选，也就是说条件不是固定的，而是随着用户输入等操作不断变化的。可以利用函数动态生成筛选条件。

下面是一个示例，演示如何通过动态生成筛选条件来进行数组过滤：

const messages = [
  { text: 'hello', from: 'Anna', received: true },
  { text: 'hi!', from: 'Bob', received: true },
  { text: 'nice to meet you', from: 'Anna', received: false },
  { text: 'nice to meet you too!', from: 'Bob', received: false }
];

function filterMessage(messages, filterFunc) {
  return messages.filter(filterFunc);
}

const fromBobFilter = message => message.from === 'Bob'; // 根据发送者过滤
const receivedFilter = message => message.received; // 根据是否已接收过滤
const keywordFilter = keyword => message => message.text.includes(keyword); // 根据关键字过滤

// 根据发送者和是否已接收过滤
const filteredMessages = filterMessage(messages, fromBobFilter && receivedFilter);

// 根据关键字动态生成过滤条件
const keyword = 'nice';
const filteredMessages2 = filterMessage(messages, keywordFilter(keyword));

console.log(filteredMessages);
// 输出：[{text: "hi!", from: "Bob", received: true}, {text: "nice to meet you too!", from: "Bob", received: false}]

console.log(filteredMessages2);
// 输出：[{text: "nice to meet you", from: "Anna", received: false}, {text: "nice to meet you too!", from: "Bob", received: false}]

在上面的示例中，我们通过定义不同的函数，实现了根据发送者、是否已接收过、关键字等不同条件进行数组过滤的功能。同时，我们也演示了如何动态生成过滤条件，根据用户的输入等操作动态生成筛选条件进行数组过滤。

以上就是JS实现数组过滤从简单到多条件筛选的完整攻略及两条示例说明。