Arrays vue js在数组中查找一个对象，然后将其扩展到具有额外属性的新数组中

我有三个数组：颜色对象、大小对象、sku对象。这些数据通过API调用从数据库中获取，并存储在Vue data（）中。然后，我使用map和find操作符，用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和setter

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

---

我应该将Object.assign放在哪里，或者有更好的方法吗？

我会将它简化一点，因为您的问题与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} ...],
//  [ ... ],
//  [ ....] 
//]   

i、 e.链接另一个映射以到达

sku

表示，然后映射到结果对象。然后，可以将结果指定给对象的二维矩阵

---

如果您的矩阵很大，并且不想为矩阵中的每个单元格重新创建新对象，那么可以使用map提供索引这一事实作为第二个可选的箭头函数参数：

size.map（（s，i）=>cols.map（（c，j）=>{…}

。代码的可读性较差，但您可以直接操作矩阵。

我将对其进行简化，因为您的问题与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} ...],
//  [ ... ],
//  [ ....] 
//]   

i、 e.链接另一个映射以获得

sku

表示，然后映射到结果对象。然后，您可以将结果分配到对象的2D矩阵

如果您的矩阵很大，并且不想为矩阵中的每个单元格重新创建新对象，那么可以使用map提供索引这一事实作为第二个可选的箭头函数参数：

size.map（（s，i）=>cols.map（（c，j）=>{…}

。代码可读性较差，但您可以直接操作矩阵。

这是我的解决方案：

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属性存在于两个源对象中，但只输出一次。

这是我的解决方案：

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属性在两个源对象中都存在，但只输出一次。

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

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
                )
             ) 
         )
     )
 )

---

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

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
                )
             ) 
         )
     )
 )

---

谢谢Alex。这不是我想要的，因为sku数组是一个对象数组，我需要一个具有选定属性和sku对象所有属性（如果存在）的新对象，但这是技术的一个很好的简化。你是对的，它与Vue没有直接关系，Vue的约束是属性具有o当您第一次将对象推入数据存储时存在，否则将不会创建getter和setter。在我发表文章后，我解决了它-不是一直都是这样吗！我在下面发布了我自己的解决方案，但感谢Hanks Alex的输入。这不是我想要的，因为sku数组是一个对象数组，我需要一个具有选定属性和sku对象的所有属性（如果存在）的新对象，但这是该技术的一个很好的简化。您是对的，它与Vue没有直接关系，Vue的约束是，当您第一次将对象推入数据存储时，属性必须存在，否则getter和setter不存在我在下面发布了我自己的解决方案，但是谢谢你的输入。是的，这也行。我仍然会添加另一个

.map（color=>this.style.name+color.colour\u code+size.code）。map（nSku=>Object.assign（…

避免计算两个字符串-对于

find（）

和

sku

的值。比如，DNR原则。是的，这也行。我仍然会添加另一个

.map（color=>this.style.name+color.color\u code+size.code）。map（nSku=>Object.assign（…

避免计算两个字符串-对于

find（））

和对于

sku

的值，如DNR原则。