Question

我有三个数组：颜色对象，大小对象，sku对象。这些使用API调用从数据库中获取并存储在Vue data（）中。然后，如果有sku，则我可以使用地图构建大小和颜色的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和setters

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

我将Object.assign放在哪里，还是有更好的方法？

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提供索引作为第二个可选箭头函数参数的事实：{{1 }}。该代码的可读性较差，但是您可以直接操纵矩阵。

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并被选中的新对象，如果找到匹配的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
                )
             ) 
         )
     )
 )

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

3 个答案: