<p>JavaScript数组不能直接用>或</p> <p><img src=”https://img.php.cn/upload/article/001/221/864/175584601213165.png” alt=”javascript数组如何比较大小”></p> <p>JavaScript数组本身并没有一个像数字那样直接的“大于”或“小于”操作符来比较大小。当你尝试用<div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>></pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div>或<div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”><</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div>去比较两个数组时，JavaScript会尝试将它们转换为原始值（通常是字符串），然后进行比较，这往往得不到你想要的结果。所以，当我们谈论数组的“大小”时，首先得搞清楚我们到底想比较什么：是它们的长度？是内容是否完全一致？还是某种基于元素顺序的“字典序”？</p> <img src=”https://img.php.cn/upload/article/001/221/864/175584601238770.png” alt=”javascript数组如何比较大小”><h3>解决方案</h3> <p>要比较JavaScript数组，我们不能依赖内置的运算符，而需要根据具体的比较需求，编写或使用自定义的逻辑。这通常涉及到遍历数组元素，或者将数组转换为可比较的原始类型（但要非常小心其局限性）。最常见的需求是比较两个数组是否“相等”，或者在特定场景下进行“字典序”的比较。</p> <h3> <a >为什么</a>JavaScript不能直接用<div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>></pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div>或<div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”><</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div>比较数组？</h3> <p>说实话，刚接触JavaScript那会儿，我也天真地以为 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>[1,2] > [1,1]</pre><div class=”contentsignin”></div></div> 这种操作会给我个 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>true</pre><div class=”contentsignin”></div></div>。结果当然是啪啪打脸。这背后其实是JavaScript对数据类型处理哲学的一个缩影——简单类型按值比较，复杂类型（比如对象和数组）则按引用比较。</p> <p><span>立即学习</span>“<a href=”https://pan.quark.cn/s/c1c2c2ed740f” style=”text-decoration: underline !important; color: blue; font-weight: bolder;” rel=”nofollow” target=”_blank”>Java免费学习笔记（深入）</a>”；</p> <img src=”https://img.php.cn/upload/article/001/221/864/175584601218225.png” alt=”javascript数组如何比较大小”><p>当你写 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>let arrA = [1, 2]; let arrB = [1, 2];</pre><div class=”contentsignin”></div></div> 时，尽管它们看起来内容一样，但 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>arrA</pre><div class=”contentsignin”></div></div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>arrB</pre><div class=”contentsignin”></div></div> 在内存中是两个不同的对象。<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>arrA === arrB</pre><div class=”contentsignin”></div></div> 会是 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>false</pre><div class=”contentsignin”></div></div>，因为它们指向的不是同一个内存地址。而 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>></pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div> 或 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”><</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div> 运算符在遇到非原始值时，会尝试调用对象的 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>valueOf()</pre><div class=”contentsignin”></div></div> 或 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>toString()</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div> 方法将其转换为原始值。对于数组，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>toString()</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div> 方法会将其所有元素用逗号连接成一个字符串。</p> <p>比如，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>[1, 2].toString()</pre><div class=”contentsignin”></div></div> 得到 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>"1,2"</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div>，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>[1, 10].toString()</pre><div class=”contentsignin”></div></div> 得到 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>"1,10"</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div>。那么 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>[1, 2] > [1, 10]</pre><div class=”contentsignin”></div></div> 实际上变成了字符串 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>"1,2" > "1,10"</pre><div class=”contentsignin”></div></div> 的比较。在字符串比较中，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>’2′</pre><div class=”contentsignin”></div></div> 大于 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>’1′</pre><div class=”contentsignin”></div></div>，所以 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>"1,2"</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div> 实际上是大于 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>"1,10"</pre><div class=”contentsignin”></div></div><div class=”contentsignin”></div></div> 的。这显然不是我们通常理解的数组大小比较。这种默认的行为很少是我们想要的，甚至可以说，它在数组比较上几乎是无用的陷阱。</p> <img src=”https://img.php.cn/upload/article/001/221/864/175584601363166.png” alt=”javascript数组如何比较大小”><h3>如何判断两个JavaScript数组是否完全相等（深度比较）？</h3> <p>这是最常见也最实用的数组比较场景。我们通常想知道两个数组的内容，包括元素的顺序和值，是否都一模一样。一个健壮的深度比较函数是不可或缺的。</p> <p>首先，最基础的检查是它们的长度。如果长度都不一样，那肯定不相等。</p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:javascript;toolbar:false;’>function arraysDeepEqual(arr1, arr2) { // 快速失败：类型检查 if (!Array.isArray(arr1) || !Array.isArray(arr2)) { // 如果不是数组，或者其中一个不是，直接返回false // 除非你明确想处理其他类型，否则这是个好习惯 return false; } // 长度不一致，肯定不相等 if (arr1.length !== arr2.length) { return false; } // 逐个元素比较 for (let i = 0; i < arr1.length; i++) { const val1 = arr1[i]; const val2 = arr2[i]; // 检查是否都是对象（包括数组），如果是，则递归比较 const isObject1 = typeof val1 === ‘object’ && val1 !== NULL; const isObject2 = typeof val2 === ‘object’ && val2 !== null; if (isObject1 && isObject2) { // 如果都是对象，递归调用自身 if (Array.isArray(val1) && Array.isArray(val2)) { if (!arraysDeepEqual(val1, val2)) { return false; } } else if (!objectsDeepEqual(val1, val2)) { // 假设有一个objectsDeepEqual函数 return false; } } else if (val1 !== val2) { // 对于原始类型，直接比较值。 // 注意：这里使用 !== 会区分 NaN 和 NaN (NaN !== NaN 是 true)， // 如果需要 NaN === NaN，可以用 Object.is(val1, val2) return false; } } // 所有元素都相等，且结构一致 return true; } // 辅助的简单对象深度比较（非本主题核心，但用于完整性） function objectsDeepEqual(obj1, obj2) { if (obj1 === obj2) return true; if (typeof obj1 !== ‘object’ || obj1 === null || typeof obj2 !== ‘object’ || obj2 === null) return false; const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) return false; for (const key of keys1) { if (!keys2.includes(key) || !arraysDeepEqual(obj1[key], obj2[key])) { // 递归调用arraysDeepEqual和objectsDeepEqual return false; } } return true; } // 示例： console.log(arraysDeepEqual([1, 2, [3, 4]], [1, 2, [3, 4]])); // true console.log(arraysDeepEqual([1, 2, [3, 4]], [1, 2, [3, 5]])); // false console.log(arraysDeepEqual([1, 2, {a:1}], [1, 2, {a:1}])); // true (如果objectsDeepEqual处理得当) console.log(arraysDeepEqual([1, 2], [1, 2, 3])); // false console.log(arraysDeepEqual([1, NaN], [1, NaN])); // false (因为NaN !== NaN)，如果想true，用Object.is</pre><div class=”contentsignin”></div></div><p>当然，你可能觉得 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>json.stringify</pre><div class=”contentsignin”></div></div> 是个捷径，比如 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>JSON.stringify(arr1) === JSON.stringify(arr2)</pre><div class=”contentsignin”></div></div>。但它也有自己的小脾气：它不区分 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>undefined</pre><div class=”contentsignin”></div></div>、函数、<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>symbol</pre><div class=”contentsignin”></div></div> 类型（这些会被忽略），并且对对象属性的顺序敏感。如果你的数组里有这些特殊类型或者对象属性顺序不固定，这个方法就会失效。所以，它只适用于元素都是简单数据类型（数字、字符串、布尔、<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>null</pre><div class=”contentsignin”></div></div>）且结构相对固定的场景。</p> <h3>除了相等性，如何实现JavaScript数组的顺序或字典序比较？</h3> <p>当我们谈论数组的“大小”时，有时是希望它们能像字典里的单词一样排序。这叫做“字典序比较”（Lexicographical Comparison）。它的规则是：从第一个元素开始逐个比较，直到找到第一个不相等的元素。这个元素的比较结果就决定了整个数组的比较结果。如果一个数组是另一个数组的前缀，那么较短的那个数组被认为是“小”的。</p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:javascript;toolbar:false;’>function compareArraysLexicographically(arr1, arr2) { // 确保是数组 if (!Array.isArray(arr1) || !Array.isArray(arr2)) { // 根据你的业务逻辑，这里可以抛出错误，或者返回一个特定值 console.error(“输入必须是数组”); return 0; // 或者抛出 TypeError } const minLength = Math.min(arr1.length, arr2.length); for (let i = 0; i < minLength; i++) { const val1 = arr1[i]; const val2 = arr2[i]; // 假设元素是可直接比较的（数字或字符串） // 如果是复杂类型，你需要定义它们之间的比较规则 if (val1 < val2) { return -1; // arr1 小于 arr2 } else if (val1 > val2) { return 1; // arr1 大于 arr2 } // 如果相等，继续比较下一个元素 } // 如果一个数组是另一个的前缀，较短的那个“小” if (arr1.length < arr2.length) { return -1; // arr1 是 arr2 的前缀，所以 arr1 更小 } else if (arr1.length > arr2.length) { return 1; // arr2 是 arr1 的前缀，所以 arr1 更大 } // 长度和所有元素都相等 return 0; // 两个数组相等 } // 示例： console.log(compareArraysLexicographically([1, 2, 3], [1, 2, 4])); // -1 (因为3 < 4) console.log(compareArraysLexicographically([1, 5, 3], [1, 2, 4])); // 1 (因为5 > 2) console.log(compareArraysLexicographically([1, 2], [1, 2, 3])); // -1 (因为[1,2]是[1,2,3]的前缀) console.log(compareArraysLexicographically([1, 2, 3], [1, 2])); // 1 (因为[1,2]是[1,2,3]的前缀，反过来) console.log(compareArraysLexicographically([1, 2, 3], [1, 2, 3])); // 0 console.log(compareArraysLexicographically([‘apple’, ‘banana’], [‘apple’, ‘orange’])); // -1</pre><div class=”contentsignin”></div></div><p>这个函数返回 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>-1</pre><div class=”contentsignin”></div></div> 表示第一个数组“小于”第二个，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>1</pre><div class=”contentsignin”></div></div> 表示“大于”，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>0</pre><div class=”contentsignin”></div></div> 表示“相等”。这种模式在很多排序算法中非常常见。需要注意的是，如果数组中包含不同类型的数据（比如数字和字符串混合），直接的 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>val1 < val2</pre><div class=”contentsignin”></div></div> 比较可能会产生意想不到的结果，因为JavaScript在比较不同类型时会进行<a >隐式类型转换</a>。所以，最好确保进行字典序比较的数组元素类型一致，或者在比较逻辑中加入更严格的类型检查和转换。</p>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
