比较两个数组内容是否一致

实际业务需求

由于商城新出了一种”组合商品“的商品类型，所以该种商品的规格选择，和普通商品完全不同，需要重新写SKU选择组件；在编写过程中，服务端会给出已经组合好的商品规格，用户交互选择时，有该规格，才能选择，没有该规格，则置灰显示；此时就需要比较两个数组内容是否一致，因为服务端给出的规格，有可能是打乱的，比如说”L号，红色，材质一“，用户交互选择时，本地排序可能是”红色，L号，材质一“，其实内容完全一致，只是顺序不一样，所以需要一个方法去比对；例如数组[9,2,5]和数组[5,9,2]就是完全相同的。

方法思路

常见的数组遍历中，every和some，就非常典型，我们今天就使用every和some去完成比较；

every

先看官方文档的解释，点击查看

every的英文意思就是”每一个“
假如有一个数组[15,13,18,20,3,5]，如果使用了every，假设条件是 >= 7，就要检测每一项是不是>=7，如果是则输出true，只要有一项不符合>=7，都会输出false；
实际代码测试：

const list = [15, 13, 18, 20, 3, 5]

//检测每一项是否都>=7
const result_1 = list.every(it => it >= 7)
console.log(result_1) //输出false

//检测每一项是否都>=2
const result_2 = list.every(it => it >= 2)
console.log(result_2) //输出true

some

先看官方文档的解释，点击查看

every的英文意思就是”一部分“
假如有一个数组[15,13,18,20,3,5]，如果使用了some，假设条件是 >= 7，就要检测其中有一项是不是>=7，只要有一个符合条件，那么就输出true；反之一个都没有达到要求，就输出false；
实际代码测试：

const list = [15, 13, 18, 20, 3, 5]

//检测其中是否有1个>=7
const result_1 = list.some(it => it >= 7)
console.log(result_1) //输出true

//检测其中是否有1个>=100
const result_2 = list.some(it => it >= 100)
console.log(result_2) //输出false

完整解决方法

先上代码：

/**
 * @description: 比较两个数组内的元素是否完全相同 如:[9,2,5] 和 [5,9,2]就是完全相同的
 * @param {Array} listA: 数组A
 * @param {Array} listB: 数组B
 * @return {Boolean} true:相同   false:不同
 */
compareArr(listA, listB) {
  const res = listA.length === listB.length && listA.every(a => listB.some(b => a === b)) && listB.every(_b => listA.some(_a => _a === _b))
  return res
}

代码详解：其实就是3个条件，&&连在一起，第一个条件 listA.length === listB.length，首先最基础保证两个数组长度相等，长度都不同，也不用后续了；
listA.every(a => listB.some(b => a === b))，检查数组A的每一项，看是否在数组B中存在；
listB.every(_b => listA.some(_a => _a === _b))，检查数组B的每一项，看是否在数组A中存在；
两个数组交叉握手检查，从而完成比较；

给几个假数据进行测试验证：

const compareArr = (listA, listB) => {
  const res = listA.length === listB.length && listA.every(a => listB.some(b => a === b)) && listB.every(_b => listA.some(_a => _a === _b))
  return res
}

const listA = [9,2,5]
const listB = [5,9,2]
const result_1 = compareArr(listA, listB)
console.log(result_1) //输出true

const listC = [9,2,5]
const listD = [5,9,888]
const result_2 = compareArr(listC, listD)
console.log(result_2) //输出false

总结

在做规格比较、管理系统的部分商品相关业务场景，都需要比较两个数组的内容，利用ES6的every和some，就能很方便地完成比较。