下面是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实现数组过滤从简单到多条件筛选的完整攻略及两条示例说明。
本文链接:http://task.lmcjl.com/news/9412.html