JavaScript 筛选|极客笔记

JavaScript 筛选

JavaScript 是一种动态语言，常用于网页开发中。在开发网页的过程中，经常需要对数据进行筛选、排序等操作。本文将详细介绍 JavaScript 中的筛选操作，包括数组的筛选、对象的筛选等。

数组的筛选

在 JavaScript 中，可以使用 filter 方法对数组进行筛选。filter 方法会返回一个新的数组，其中包含符合条件的元素。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8]

在上面的示例中，我们首先定义了一个数字数组 numbers，然后使用 filter 方法筛选出所有的偶数，最终结果为 [2, 4, 6, 8]。

除了简单的条件判断，我们还可以使用更复杂的条件进行筛选。

const words = ["apple", "banana", "orange", "pear", "grape"];

const filteredWords = words.filter(word => word.length > 5);

console.log(filteredWords); // ["banana", "orange"]

在上面的示例中，我们筛选出长度大于 5 的单词，最终结果为 ["banana", "orange"]。

对象的筛选

除了数组，我们也可以对对象进行筛选操作。在 JavaScript 中，可以使用 filter 方法结合箭头函数进行对象的筛选。

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "orange", color: "orange" },
  { name: "pear", color: "green" },
  { name: "grape", color: "purple" }
];

const redFruits = fruits.filter(fruit => fruit.color === "red");

console.log(redFruits); // [{ name: "apple", color: "red" }]

在上面的示例中，我们定义了一个水果对象数组 fruits，然后筛选出颜色为红色的水果，最终结果为 [{ name: "apple", color: "red" }]。

除了简单的条件判断，我们还可以组合多个条件进行筛选。

const fruits = [
  { name: "apple", color: "red", tasty: true },
  { name: "banana", color: "yellow", tasty: true },
  { name: "orange", color: "orange", tasty: false },
  { name: "pear", color: "green", tasty: true },
  { name: "grape", color: "purple", tasty: false }
];

const tastyFruits = fruits.filter(fruit => fruit.tasty && fruit.color !== "green");

console.log(tastyFruits); // [{ name: "apple", color: "red", tasty: true }, { name: "banana", color: "yellow", tasty: true }]

在上面的示例中，我们筛选出口感好且颜色不为绿色的水果，最终结果为 [{ name: "apple", color: "red", tasty: true }, { name: "banana", color: "yellow", tasty: true }]。