Estoy intentando combinar mis dos conjuntos, pero muevo solo el objeto.

Tengo una matriz llamada parentArr que intento combinar con growthArr. Cuando se utiliza el método .push(), devuelve parentArr como una matriz dentro de growthArr. Estoy intentando combinar los objetos de parentArr y no anidarlo dentro de una matriz.

Aquí hay un ejemplo de lo que está sucediendo:

let growthArr = [
    {
     name: 'online stores',
      parent: 'high'
    }, {
       name: 'retail stores',
      parent: 'low'
     }, {
       name: 'walk in',
      parent: 'high'
    }
    ]
    
    
    let parentArr = [
    {
        id: 'low',
        color: '#fafafa'
    }, {
        id: 'med-low',
        color: '#B62721'
     }, {
        id: 'med',
        color: '#FF5733'
    }, {
        id: 'med-high',
        color: '#FF33FC'
    }, {
        id: 'high',
        color: '#33FF64'
    }
    ]
    
    
    growthArr.push(parentArr)
    
    
    console.log(growthArr)

Para evitar esto, he intentado hacer growthArr.push.apply(parentArr) pero al hacerlo, mi parentArr no se muestra en absoluto.

Aquí está mi resultado esperado, una matriz con ambos objetos en growthArr y parentArr

[
  {
    "name": "online stores",
    "parent": "high"
  },
  {
    "name": "retail stores",
    "parent": "low"
  },
  {
    "name": "walk in",
    "parent": "high"
  },
    {
      "id": "low",
      "color": "#fafafa"
    },
    {
      "id": "med-low",
      "color": "#B62721"
    },
    {
      "id": "med",
      "color": "#FF5733"
    },
    {
      "id": "med-high",
      "color": "#FF33FC"
    },
    {
      "id": "high",
      "color": "#33FF64"
    }
]
0
kurtixl 24 jun. 2020 a las 20:42

9 respuestas

La mejor respuesta

Use la sintaxis ... con .push()

growthArr.push(...parentArr)

Esto funciona porque .push() toma cualquier número de argumentos y los empuja a todos a la matriz de destino.

Nota: Esto muta la matriz original sin crear una nueva y sobrescribirla. Esto puede ser importante si hay otras referencias a la matriz que necesitan observar la mutación.


Para su información, su intento hubiera funcionado:

growthArr.push.apply(parentArr)

Excepto que .apply espera que el primer argumento sea el valor this (la matriz de destino). Entonces necesitarías esto:

growthArr.push.apply(growthArr, parentArr)
2
slappy 24 jun. 2020 a las 17:52

concat es lo que quieres usar.

let growthArr = [{
 name: 'online stores',
  parent: 'high'
}, {
   name: 'retail stores',
  parent: 'low'
 }, {
   name: 'walk in',
  parent: 'high'
}]
    
    
let parentArr = [{
    id: 'low',
    color: '#fafafa'
}, {
    id: 'med-low',
    color: '#B62721'
 }, {
    id: 'med',
    color: '#FF5733'
}, {
    id: 'med-high',
    color: '#FF33FC'
}, {
    id: 'high',
    color: '#33FF64'
}]

console.log(
  growthArr.concat(parentArr)
)
2
richytong 24 jun. 2020 a las 17:45

Use ...array para los valores de una matriz.

let growthArr = [{
  name: 'online stores',
  parent: 'high'
}, {
  name: 'retail stores',
  parent: 'low'
}, {
  name: 'walk in',
  parent: 'high'
}];

let parentArr = [{
  id: 'low',
  color: '#fafafa'
}, {
  id: 'med-low',
  color: '#B62721'
}, {
  id: 'med',
  color: '#FF5733'
}, {
  id: 'med-high',
  color: '#FF33FC'
}, {
  id: 'high',
  color: '#33FF64'
}];

growthArr = [...growthArr, ...parentArr];

console.log(growthArr);
2
Antoni 24 jun. 2020 a las 17:45
You have to use **concat** instead of push
let growthArr = [
    {
     name: 'online stores',
      parent: 'high'
    }, {
       name: 'retail stores',
      parent: 'low'
     }, {
       name: 'walk in',
      parent: 'high'
    }
    ]
    
    
    let parentArr = [
    {
        id: 'low',
        color: '#fafafa'
    }, {
        id: 'med-low',
        color: '#B62721'
     }, {
        id: 'med',
        color: '#FF5733'
    }, {
        id: 'med-high',
        color: '#FF33FC'
    }, {
        id: 'high',
        color: '#33FF64'
    }
    ]

   console.info(growthArr.concat(parentArr))
1
Jay Parmar 24 jun. 2020 a las 17:50

Todo lo que necesita para esto es la práctica sintaxis

const
  growthArr = getGrowthArr(),
  parentArr = getParentArr();
growthArr.push(...parentArr);

console.log(growthArr);

function getGrowthArr() {
  return [{
    name: 'online stores',
    parent: 'high'
  }, {
    name: 'retail stores',
    parent: 'low'
  }, {
    name: 'walk in',
    parent: 'high'
  }];
}

function getParentArr() {
  return [{
    id: 'low',
    color: '#fafafa'
  }, {
    id: 'med-low',
    color: '#B62721'
  }, {
    id: 'med',
    color: '#FF5733'
  }, {
    id: 'med-high',
    color: '#FF33FC'
  }, {
    id: 'high',
    color: '#33FF64'
  }];
}
0
Cat 24 jun. 2020 a las 17:47

Utilice el método de matriz concat (). Entonces la sintaxis sería

parentArr.concat(growthArr);
1
classydraught 24 jun. 2020 a las 17:45

Prueba esto .concat. parentArr.concat(growthArr)

1
bad_kotya 24 jun. 2020 a las 17:49

Esto también se puede hacer con la desestructuración en es6 mientras se crea una nueva matriz:

const combined = [...growthArr, ...parentArr];
0
Dimitri L. 24 jun. 2020 a las 17:47

Use parentArr.concat(growthArr).
¡JS puede ser tan simple como eso!

1
user 24 jun. 2020 a las 17:57