在电商项目中,必定有规格选择这一个需求,目前的轻型来说,大概有2中处理方式:

1、平铺式规格处理:我前一家公司就使用这种,后端将规格全部组合好,再返给前端,例如有一款手机,它的规格可能是 红色+4G运存+128G存储,所以的规格平铺展示,但存在一定的缺陷,规格的类目不能过多,如果过多,用户会看花眼,如下图:

这是真实的商品,一件衣服,分了很多尺码、颜色、第二件组合尺码,排列组合起来总共有90种情况,所以不宜平铺展示;

2、分级式规格处理:如下图

这样处理的优点是,多种类目可以清晰地展示在页面上,更易于用户操作选择;但问题是,选择了不同的规格类目,需要在后端返回的组合好的数组中去查找比较,最终得到几种类型组合好的规格总ID,如下图:

可以看出,当我们选择 尺码:S,颜色:黑色,第二件尺码:818917时,需要将每一种规格的ID组合起来,在数组内进行比较,如果完全符合,就返回对应的组合ID,看似非常简单的需求,做起来到底有没有问题呢?

假如进行字符串对比,'27:250,28:566,33:413' === '27:250,28:566,33:413' ,看起来没有任何问题,但是,假如后端偷偷告诉你,规格组合库中的顺序,有可能是乱的,那么要如何处理?

最终有可能比对的是:A=[1,2,3,4,5] 与 B=[3,5,4,1,2],我们要比较两个数组中,元素是否相等,这里用ES6中数组的方法:

  /**
   * @description: 判断两个数组元素是否相同(允许顺序不同)
   * @param {type} 
   */
  sameArr(arr1, arr2) {
    return arr1.every(item => arr2.includes(item)) && arr2.every(item => arr1.includes(item))
  },

every方法,会将每一项数值进行比较,当所有数值都符合条件时,才会返回true,只要有一项不符合,返回false,所以将数组1和数据2交叉遍历比较,最终return一个布尔值,因为如果两者的情况是 true && false,输出后,结果也是false,所以当return的值是true时,那么两项必定同时为true,证明两个数组的元素完全相同;

在实际的业务场景中,如下处理:

    //从全部规格组合数组中 查找比对 当前选中规格
    const skuResult = _skuDataArr.filter(item => {
      if(this.sameArr(item.properties, _curChooseArr)){
        return item;
      }
    })

利用ES6中数组的filter搭配数组元素检测,如果两个数组元素完全相同,则返回该项,稳妥地筛选出符合条件的组合项;

综上,使用ES6的新方法,很容易就能实现数组以及对象的一些操作,十分方便。