📅 最后修改于: 2023-12-03 14:49:46.587000 🧑 作者: Mango
在 JavaScript 中，我们经常需要对某些对象数组进行排序，以便更好地展示或操作数据。使用 select 选项可以很好地实现这一目的，本文将介绍如何使用 select 选项对 JavaScript 中的对象数组进行排序。
select 选项是一种 HTML 元素，用于创建下拉列表，用户可以从中选择一个选项。它可以通过 JavaScript 进行操作和控制，以实现各种功能。在本文中，我们将使用 select 选项来对 JavaScript 中的对象数组进行排序。
假设我们有以下 JavaScript 对象数组：
const cars = [
{ name: "Tesla Model S", price: 80000 },
{ name: "Audi A8", price: 100000 },
{ name: "Mercedes-Benz S-Class", price: 110000 },
{ name: "Porsche Panamera", price: 120000 },
];
我们想要根据以下三种方式对数组进行排序：
为此，我们创建一个 HTML 页面，其中包含一个 select 元素和一个 div 元素，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Array Sort by Select Option</title>
</head>
<body>
<select id="sort-by">
<option value="name-asc">Name (A-Z)</option>
<option value="name-desc">Name (Z-A)</option>
<option value="price-asc">Price (Low to High)</option>
</select>
<div id="result"></div>
</body>
</html>
我们可以看到，我们在 select 元素中定义了三个选项，每个选项都有一个值，表示我们想要根据什么方式对数组进行排序。我们还定义了一个 div 元素，用于显示排序后的结果。
现在，我们编写 JavaScript 代码来实现排序。我们首先需要将 select 元素和 div 元素存储到变量中：
const sortByElement = document.getElementById("sort-by");
const resultElement = document.getElementById("result");
接下来，我们给 select 元素添加一个 onchange 事件处理程序，当用户从下拉列表中选择一个选项时，会触发该事件处理程序。处理程序将根据所选选项对数组进行排序，并在 div 元素中显示结果。
sortByElement.addEventListener("change", () => {
const sortBy = sortByElement.value;
let sortedCars = [];
if (sortBy === "name-asc") {
sortedCars = cars.sort((a, b) => (a.name > b.name ? 1 : -1));
} else if (sortBy === "name-desc") {
sortedCars = cars.sort((a, b) => (a.name > b.name ? -1 : 1));
} else if (sortBy === "price-asc") {
sortedCars = cars.sort((a, b) => a.price - b.price);
}
resultElement.innerHTML = JSON.stringify(sortedCars);
});
我们可以看到，我们首先获取所选选项的值，并保存在变量 sortBy 中。然后，我们定义了一个空数组 sortedCars，用于存储排序后的数组。
接下来，我们使用 if 语句检查所选选项的值。如果值是 name-asc，我们将使用数组的 sort() 方法和比较函数对数组进行升序排序。如果值是 name-desc，我们将对数组进行降序排序。如果值是 price-asc，我们将根据价格对数组进行升序排序。
最后，我们将排序后的数组作为 JSON 字符串显示在 div 元素中。
使用 select 选项可以很方便地对 JavaScript 中的对象数组进行排序。我们只需要为 select 元素定义选项和值，并在 JavaScript 代码中处理 onchange 事件即可。这种方式对于需要动态排序和展示数据的网站非常有用。