JavaScript判断两个数组相等的四类方法
<p>在JavaScript中，数组本质上是一种特殊的对象，它的类型值会返回 <code>object</code>。<br>如果我们需要比较两个数组是否相等，不能像比较基本类型(String、Number、Boolean等)一样，使用 <code>===</code> (或 <code>==</code>) 来判断，所以如果要比较数组是否相等，需要使用一些特殊方法。关于JS类型的判断，可见博文typeof详解。</p>
<p>本文总结了几种数组比较的方法，方便我们碰到类似问题时能快速处理。</p>
<ol>
<li>循环比较</li>
<li>toString方法</li>
<li>join方法</li>
<li>JSON.stringify</li>
</ol>
<p>需要说明的，<strong>这里只针对数组元素为原始类型(String、Number、Boolean)的情况</strong>。<br>
如果数据元素是复杂类型，如Object、Function等等，则无法通过这些方法进行简单比较了，需要另行特殊处理。而且当存在这类复杂类型时，比较数组是否相等已经意义不大，本文不做讨论。</p>
<p>这也是关于数组的第四篇博文，前面三篇如下：</p>
<p>一文搞懂JavaScript数组的特性<br>
一文搞懂前端的所有类数组类型</p>
<h2 id="循环比较">循环比较</h2>
<p>使用循环的方法一一比较数组元素的值，可能是我们最先能想到的方式。<br>
循环比较大概可分为两种方式，一种是使用 <code>for</code>、<code>while</code> 等循环语句，相对简单，如下代码所示：</p>
<pre><code class="language-js">const arr1 = , arr2 =
// 需要判断两个数组长度
arr1.length === arr2.length
// 一一比较元素值，有一个不相等就不等
for (let i = 0; i < arr1.length; i++) {
if (arr2 !== arr2) {
return false
}
}
</code></pre>
<p>另外一种就是使用数组的循环类实例方法，如 <code>foreach</code>、<code>map</code> 等处理数组循环的实例方法，和使用 <code>for</code> 语句较类似，同样能达到目的。<br>
而使用 <code>every</code>、<code>some</code>、<code>filter</code> 等这类实例方法，则代码实现上会更简单一些，如下所示：</p>
<pre><code class="language-js">const arr1 = , arr2 =
// 使用every
arr1.length === arr2.length && arr1.every((v,i) => v === arr2)
// 使用some
arr1.length === arr2.length && !arr1.some((v, i) => v !== arr2)
// 使用filter
arr1.length === arr2.length && arr1.filter((v, i) => v !== arr2).length === 0
// 使用find和findIndex
arr1.length === arr2.length && arr1.findIndex((v, i) => v !== arr2) === -1
</code></pre>
<blockquote>
<p>当我们进行循环相关的比较的时候，都使用的是严格相等 <code>===</code>，会先判断类型是否相等。<br>
但如果需要忽略元素类型时，可以使用 <code>==</code>，这样，会自动对数组元素进行类型转换后再比较，如 <code>true == 1</code> 会成立。</p>
</blockquote>
<h2 id="tostring">toString</h2>
<p><code>toString</code> 方法是Object类型对象的实例方法，而JS中Object是几乎所有类型的基类，所以其他类型都能调用该方法。(null和undefined例外，没有实例方法。)<br>
toString方法的作用是返回一个对象的字符串形式，这里，我们用它来返回数组的字符串形式的数据。</p>
<pre><code class="language-js">.toString() // '1,2,3'
</code></pre>
<p>以上代码，就是返回数组 <code></code> 的字符串形式，以逗号分给元素组成字符串数据，返回的 <code>'1,2,3'</code>。<br>
如果数组元素是复杂类型，如Object对象，则toString返回的结果将不同：</p>
<pre><code class="language-js">.toString() // '1,2,'
</code></pre>
<p>这里toString方法对 <code>{}</code> 直接返回的是 <code></code>。</p>
<p>鉴于此，我们比较数组元素为原始类型的数组时，可以如下这样使用：</p>
<pre><code class="language-js">.toString() === .toString() // true
</code></pre>
<p>需要注意的是，如果数组元素为数字的字符串形式，结果也是相同的：</p>
<pre><code class="language-js">['1', 2, 3].toString() // '1,2,3'
.toString() === ['1', 2, 3].toString() // true
</code></pre>
<h2 id="join">join</h2>
<p><code>join</code> 方法是数组的一个实例方法。<br>
它有一个可选参数，可以作为分隔符，以该分隔符分隔所有数组元素组成字符串数据返回，如果不加参数，默认是以逗号分割。<br>
通过join方法的用法，我们就能知道，如果不提供分隔符的参数，它对数组所起的作用看上去和 <code>toString</code> 方法几乎一样。</p>
<pre><code class="language-js">.join() === .join() // true
.join() === ['1', '2', '3'].join() //true
</code></pre>
<p>当然，也可以添加分隔符，效果是一样的，如使用空字符：</p>
<pre><code class="language-js">.join('') // '123'
.join('') === ['1', '2', '3'].join('') //true
</code></pre>
<p>由上可知，既然join不带参数和toString方法几乎一样，那它们互相之间的比较，本质上都是数组转换成逗号分隔的字符串，所以也是相等的：</p>
<pre><code class="language-js">.join() === .toString() // true
.toString() === .join() // true
</code></pre>
<h2 id="jsonstringify">JSON.stringify</h2>
<p><code>JSON.stringify</code> 用于将一个对象或值转换成JSON字符串，如果是数组，一般会这样转换：</p>
<pre><code class="language-js">JSON.stringify() // ''
</code></pre>
<p>利用这个特点，我们就能通过它进行数组的常规比较：</p>
<pre><code class="language-js"> === // false
JSON.stringify() === JSON.stringify() // true
JSON.stringify() === JSON.stringify() // true
</code></pre>
<p>需要注意的是，JSON.stringify处理字符串是转换结果会带双引号：</p>
<pre><code class="language-js">JSON.stringify(['1']) // '["1"]'
JSON.stringify(['1']) === '["1"]' // true
JSON.stringify(['1']) === '[\'1\']' // false
</code></pre>
<p>关于JSON.stringify方法更多的知识，可查看博文JSON方法详解</p>
<h2 id="当数组元素是空元素nullundefined时">当数组元素是空元素、null、undefined时</h2>
<p>以上介绍的数组元素的类型都是原始类型(String、Number、Boolean)，但数组元素还可以是另外三种特殊情况：<code>空元素</code>、<code>null</code>、<code>undefined</code>，接下来将简单介绍下出现这三种情况时的比较方式。</p>
<h3 id="null-和-undefined">null 和 undefined</h3>
<p>当使用 <code>JSON.stringify</code> 方法时，空元素、null、undefined这三种类型的元素都会被转换成 <code>null</code> 字符串值，可以很好的判断：</p>
<pre><code class="language-js">JSON.stringify() // ''
JSON.stringify() === JSON.stringify() // true
</code></pre>
<p><code>toString</code> 和 <code>join</code> 方法较类似，他们会把这三种类型的值都转换成空字符：</p>
<pre><code class="language-js">.join() // '1,2,true,,,'
.toString() // '1,2,true,,,'
.toString() === .join() // true
</code></pre>
<p>当我们使用上面介绍的第一种循环数组元素的方法进行比较时，null和undefined只需要注意它们两种类型的值是否相等：</p>
<pre><code class="language-js">null == undefined // true
null === undefined // false
</code></pre>
<p>使用严格相等比较的时候，这两种类型不相等。</p>
<h3 id="空元素">空元素</h3>
<p>数组元素是空元素时，使用循环方式处理，则会有一些不一样，主要和数组的空元素的特点有关：</p>
<ul>
<li>数组通过下标读取空元素时，返回undefined。</li>
<li>当使用 <code>for</code>、<code>while</code>、<code>for-of</code>、<code>find</code>、<code>findIndex</code> 等语法时，空元素会返回 <code>undefined</code> 值；undefined值能被比较，所以这时候进行数组元素比较时，结果是正确的。</li>
<li>当使用数组实例方法循环如 <code>forEach</code>、<code>map</code>、<code>every</code>、<code>some</code>、<code>filter</code> 等方法时，空元素会被跳过；由于值被跳过，在使用这些方式进行数组元素比较时，结果可能是错误的。</li>
</ul>
<pre><code class="language-js">const arr1 = , arr2 =
arr1.length === arr2.length && arr1.every((v, i) => v === arr2) // true
arr1.length === arr2.length && arr1.filter((v, i) => v !== arr2).length === 0 // true
arr1.length === arr2.length && !!arr1.find((v, i) => v !== arr2) // false
arr1.length === arr2.length && arr1.findIndex((v, i) => v !== arr2) === -1 // false
</code></pre>
<p>以上代码，数组arr1有一个空元素，与数组arr2的元素并不相同，但是我们使用 <code>every</code> 和 <code>filter</code> 比较得到的值为 <code>true</code>，这显然是不对的；而使用 <code>find</code> 和 <code>findIndex</code> 比较结果为 <code>false</code> ，是正确的。</p>
<h2 id="总结">总结</h2>
<p>以上四类数组比较的方式，依据我测试的结果，速度上，循环方式中的 <code>for</code> 语法是最快的，而且该方式还能正确比较空元素、null、undefined三种特殊情况，综合上看<strong>使用for循环是最佳选择</strong>。</p>
<blockquote>
<p>第一种循环类方式，性能表现整体优于另外三种方式。<br>
join方法比toString方法更耗时。<br>
如果数据量不是很大，这几种方式耗时可能都在0.1ms以内，几乎可以忽略。</p>
</blockquote>
<p>最后，我们总结下以上内容，主要介绍了四种能够比较常规数组(数组为原始数据类型)是否相等的四种方式。也介绍了当数组元素是另外三种特殊情况(空元素、null、undefined)时，上面介绍的四种比较方式是否有效。当然，如果数组元素是复杂数据类型如Object、Function等则比较无意义，不在本文讨论范围内。</p><br><br>
来源：https://www.cnblogs.com/jimojianghu/p/17292315.html
頁:
[1]