Vue js 在数组中找到一个对象，然后将其分散到具有额外属性的新数组中

Question

我有三个数组：颜色对象、大小对象、SKU 对象。 这些是使用 API 调用从数据库中获取的，并存储在 Vue data(( 中。 然后，我使用地图构建一个大小和颜色的 2D 矩阵(如果存在(并找到运算符

this.sizes.map(
    size=> this.colours.map(
        colour=>(
            this.skus.find(
                sku=> sku.sku == this.style.name + colour.colour_code + size.code
            ) || {sku: this.style.name + colour.colour_code + size.code, selected:false}
        )
    )
 )

我需要将结果分配给一个新数组 (this.matrix(，但是对于 UI，我还需要一个不在 sku 对象中的附加字段 (selected：false(，它不需要存在于数据库中，因为它仅用于状态控制。 为此，我认为我需要使用 Object.assign({selected：false}， sku(，但我无法弄清楚我会把它放在上面的代码中的位置。 我必须按照分配的 this.matrix 来做，否则 Vue 不会生成 getter 和 setter

2D 数组中的每个单元格引用在 SKU 数组中将有 0 或 1 个 SKU。SKU 阵列中的每个 SKU 在 2D 数组中都有一个对应的插槽。

我会把 Object.asassigned 放在哪里，还是有更好的方法？

Answer 1

我会稍微简化一下，因为你的问题与 VueJS 并不真正相关。

let sizes = [1,2,3];
let cols = ['a','b','c']
let sku = ['1.a', '2.c'];
sizes.map( 
   s => cols.map( 
      c => s+"."+c ).map( 
           x => ({sku: x, 
                 selected: sku.find(s => s === x) ? true : false})))
//result is 
//[ 
//  [ {sku: "1.a", selected: true}, {sku: "1.b", selected: false} ...],
//  [ ... ],
//  [ ....] 
//]   

即链接另一个映射以到达sku表示，然后映射到结果对象。然后，您可以将结果分配给 2D 对象矩阵。

如果您的矩阵非常大，并且您不想为矩阵中的每个单元格重新创建一个新对象，则可以使用 map 提供索引的事实作为第二个可选的箭头函数参数：sized.map( (s,i) => cols.map( (c,j) => { ... } 。代码的可读性会降低，但您可以直接操作矩阵。

Answer 2

这是我

的解决方案：

this.sizes.map(
    size=> this.colours.map(
        colour=>(
            Object.assign(
                {
                   sku: this.style.name + colour.colour_code + size.code,
                   selected: false
                },
                this.skus.find(
                    sku=> sku.sku == this.style.name + colour.colour_code + size.code
                )
             ) 
         )
     )
 )

现在，这是创建一个具有 sku 和 selected 的新对象，如果它找到匹配的 sku 对象，则将属性(通过 Object.assign(扩展到一个新对象中。 SKU 属性存在于两个源对象中，但只会输出一次。

Answer 3

现在开始获得 OT，2D 数组中的每个对象都必须具有"sku"属性，因此它需要存在于目标数组中，以防源数组为 NULL。如果我插入一个变量然后调用该变量两次，代码可能会更具可读性，但它正在执行相同的逻辑。

this.sizes.map(
    size=> this.colours.map(
        colour=>(
            skuCode=this.style.name + colour.colour_code + size.code;
            Object.assign(
                {
                   sku: skuCode,
                   selected: false
                },
                this.skus.find(
                    sku=> sku.sku == skuCode
                )
             ) 
         )
     )
 )