如何基于外部数组的price值对循环输出内容进行降序排序？

你当前的代码直接按myarray的顺序遍历并逐个查找数据，这种方式既低效又无法实现排序。正确思路是先收集所有目标数据，排序后再渲染，具体实现如下：

步骤1：筛选整理目标数据 #

从things数组中筛选出id在myarray中的项，得到包含名称和价格的数据集：

const targetItems = things.filter(item => myarray.includes(item.id));

步骤2：按价格降序排序 #

用sort()方法对筛选后的数组按价格（对应原代码的things字段）降序排列，注意转换为数值类型避免字符串排序错误：

targetItems.sort((a, b) => Number(b.things) - Number(a.things));

步骤3：渲染排序后的内容 #

遍历排序后的数组生成HTML，插入到页面中：

const listElement = document.getElementById('list');
listElement.innerHTML = ''; // 清空原有内容，避免重复追加
targetItems.forEach(item => {
  listElement.innerHTML += `<div>${item.name} : ${item.things}</div>`;
});

完整代码示例 #

var myarray = ["cars", "planes", "houses", "food"];
// 假设things数组结构（根据你的输出推断）
const things = [
  { id: "cars", name: "cars", things: 2000 },
  { id: "planes", name: "planes", things: 199000 },
  { id: "houses", name: "houses", things: 67000 },
  { id: "food", name: "food", things: 100 }
];

// 筛选目标数据
const targetItems = things.filter(item => myarray.includes(item.id));
// 按价格降序排序
targetItems.sort((a, b) => Number(b.things) - Number(a.things));
// 渲染内容
const listElement = document.getElementById('list');
listElement.innerHTML = '';
targetItems.forEach(item => {
  listElement.innerHTML += `<div>${item.name} : ${item.things}</div>`;
});

关键说明 #

• 避免了原代码每次循环都遍历整个things数组的低效操作，提升性能。
• 转换价格为数值类型，防止字符串排序导致的逻辑错误。
• 先清空目标元素内容，避免重复追加HTML。

内容的提问来源于stack exchange，提问作者Cain Nuke