匹配Javascript中最相关的媒体查询

考虑以下数组：

const mediaQueries = [
    '(max-width: 730px)',
    '(max-width: 1600px)',
    '(min-width: 1600px)'
];

现在考虑下面的循环：

mediaQueries.forEach(query => {

    let mql = window.matchMedia(query);

    if (mql.matches) {
        console.log('match: ' + query);
    }

});

上述代码将循环执行每个媒体查询，并根据当前屏幕大小记录它们是否匹配

问题 在

700px

宽的屏幕上，

（最大宽度：730px）

和

（最大宽度：1600px）

将匹配

我需要根据查询大小和查询类型只返回最相关的匹配。以

700px

屏幕为例，这应该只返回

（最大宽度：730px）

---

有没有一种方法可以通过

window.matchMedia

实现这一点，或者最简单的方法就是根据查询值和查询类型对数组应用自定义顺序，然后返回第一个匹配项？

如果数组按正确的顺序保存值，最简单的方法就是使用find（）

---

如果数组按正确的顺序保存值，最简单的方法是使用find（）

---

首先，非常感谢您提供的

查找
解决方案（+1），这太棒了，我自己应该想到的！其次，您能否建议我如何对数组应用自定义重新排序，以确保
max width
查询按从最小到最大的顺序排列，以及
min width
查询按从最大到最小的顺序排列（我想这是我需要的）。。。更复杂的是，
mediaQueries
实际上是一个对象，而不是一个数组，我在这篇文章中只使用了一个数组，因为我想保持它的简单性……首先，非常感谢您提供的
find
解决方案（+1），这太棒了，我自己应该想到的！其次，您能否建议我如何对数组应用自定义重新排序，以确保
max width
查询按从最小到最大的顺序排列，以及
min width
查询按从最大到最小的顺序排列（我想这是我需要的）。。。更复杂的是，
mediaQueries
实际上是一个对象，而不是一个数组，我在这篇文章中只使用了一个数组，以保持它的简单性。。。
const matchingQuery = mediaQueries.find(query => 
    window.matchMedia(query).matches
);