比较返回差异的2个数组

在前端开发中,我们经常需要比较两个数组的内容是否相同或者有何不同。本文将介绍如何使用JavaScript来比较返回差异的两个数组,并提供一些示例代码以供参考。

1. 浅层比较

浅层比较是指只比较两个数组的值是否相等,而不比较它们的数据类型和引用地址。这种比较方法比较简单,通常可以使用Array.prototype.join()String.prototype.split()函数来实现。

示例代码:

----- ------ - --------- --------- ----------
----- ------ - --------- --------- --------

-- -------------- --- -------------- -
  ---------------- ------ --- ---------
- ---- -
  ---------------- ------ --- --- ---------
-

上述代码将数组转换为字符串并使用逗号分隔符连接它们的元素,然后比较这两个字符串是否相等。如果相等,则说明两个数组的元素完全一致。

但是,浅层比较有一个缺点,即无法区分一些数据类型。例如,数字1和字符串'1'在浅层比较中被视为相等的元素。

2. 深层比较

深层比较是指比较两个数组的值、数据类型和引用地址是否完全相同。这种比较方法比较复杂,通常需要使用递归函数来实现。

示例代码:

-------- --------------- ----- -
  -- -------------------
  -- ----- --- ----- -
    ------ -----
  -

  -- ------------------
  -- ------- ---- --- ------ ----- -
    ------ ------
  -

  -- ----------
  -- -------------------- -- -------------------- -
    -- -------------------
    -- ------------ --- ------------ -
      ------ ------
    -

    -- ------------
    --- ---- - - -- - - ------------ ---- -
      -- -------------------- --------- -
        ------ ------
      -
    -

    ------ -----
  -

  -- ----------
  -- ------- ---- --- -------- -- ------ ---- --- --------- -
    ----- ----- - ------------------
    ----- ----- - ------------------

    -- --------------------
    -- ------------- --- ------------- -
      ------ ------
    -

    -- ---------
    --- ------ --- -- ------ -
      -- ---------------------- ----------- -
        ------ ------
      -
    -

    ------ -----
  -

  -- -------------
  ------ ---- --- -----
-

----- ------ - --------- - ----- -------- -- --- ----
----- ------ - --------- - ----- -------- -- --- ----

-- ------------------ -------- -
  ---------------- ------ --- ---------
- ---- -
  ---------------- ------ --- --- ---------
-

上述代码使用递归函数deepEqual()来比较两个数组是否相等。该函数首先判断两个对象的引用地址是否相同,如果是,则返回true;否则,继续比较它们的类型。如果两个对象都是数组,则递归比较它们的每个元素;如果两个对象都是对象,则递归比较它们的属性值;否则,直接比较它们的值是否相等。

3. 总结

浅层比较和深层比较都有

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/14241