Create duplicates of both the array and its individual elements by value

Question

Create duplicates of both the array and its individual elements by value

I'm having trouble figuring out how to properly copy an array along with all its elements.

In my model, I have a name and options, both of which are strings.

This is what I currently have:

const myArrayToDuplicate = [myModel, myModel, myModel]

My attempt to duplicate the array is like this:

const duplicate = Object.assign([], myArrayToDuplicate);
console.log(duplicate === myArrayToDuplicate) //false
console.log(duplicate[0] === myArrayToDuplicate[0]) //true -> not desired

Then I tried:

duplicate[0] = Object.assign(myArrayToDuplicate[0]) 
//still true

Could someone advise me on the correct way to achieve this task?

angular typescript

Answer 1

Answer №1

For the best results, I recommend utilizing a deep copy function, like the one offered by lodash:

import * as _ from "lodash";
let copiedArray = _.cloneDeep(myArrayToDuplicate);

This method is particularly useful because it can handle copying arrays of any depth.

Answer 2

For the best results, I recommend utilizing a deep copy function, like the one offered by lodash:

import * as _ from "lodash";
let copiedArray = _.cloneDeep(myArrayToDuplicate);

This method is particularly useful because it can handle copying arrays of any depth.

Answer 3

Answer №2

One potential resolution may involve

const copiedArray = originalArray.map(item => ({...item}))

copiedArray === originalArray // false
copiedArray[0] === originalArray[0] // false

Answer 4

One potential resolution may involve

const copiedArray = originalArray.map(item => ({...item}))

copiedArray === originalArray // false
copiedArray[0] === originalArray[0] // false

Answer 5

Answer №3

const copiedArray = originalArray.map((element) => Object.assign({}, element));

As stated on the official documentation, the Object.assign method copies all properties from the second argument into the first one.

It's worth noting that, as highlighted by Learning a Mess, this approach may not work effectively with complex objects like nested objects.

Answer 6

const copiedArray = originalArray.map((element) => Object.assign({}, element));

As stated on the official documentation, the Object.assign method copies all properties from the second argument into the first one.

It's worth noting that, as highlighted by Learning a Mess, this approach may not work effectively with complex objects like nested objects.

Answer 7

Answer №4

Here are several options to consider

const myArrayToClone = [myModel, myModel, myModel];
const sameMemoryRef = myArrayToClone; // Same memory reference
const newMemoryRef = [...myArrayToClone]; // Different memory reference, but objects remain the same
const  totalMemoryDiff = [...myArrayToClone.map(obj => ({...obj}))]; // Complete memory difference

To summarize:

If you change sameMemoryRef, your original array will also be affected.
If you modify newMemoryRef, the original array remains unchanged
- Changing the objects within it will reflect in the original array
Modifying anything in totalMemoryDiff will not impact the original array.

Answer 8

Here are several options to consider

const myArrayToClone = [myModel, myModel, myModel];
const sameMemoryRef = myArrayToClone; // Same memory reference
const newMemoryRef = [...myArrayToClone]; // Different memory reference, but objects remain the same
const  totalMemoryDiff = [...myArrayToClone.map(obj => ({...obj}))]; // Complete memory difference

To summarize:

If you change sameMemoryRef, your original array will also be affected.
If you modify newMemoryRef, the original array remains unchanged
- Changing the objects within it will reflect in the original array
Modifying anything in totalMemoryDiff will not impact the original array.

Answer 9

Answer №5

To perform a deep copy of an object, you can utilize JSON.parse and JSON.stringify methods.

let originalObj = { name: "John", age: 30 };
let copiedObj = JSON.parse(JSON.stringify(originalObj));

Answer 10

To perform a deep copy of an object, you can utilize JSON.parse and JSON.stringify methods.

let originalObj = { name: "John", age: 30 };
let copiedObj = JSON.parse(JSON.stringify(originalObj));

Answer 11

Answer №6

To create a deep copy, the following method can be used:

const copiedArray = JSON.parse(JSON.stringify(originalArray))

Answer 12

To create a deep copy, the following method can be used:

const copiedArray = JSON.parse(JSON.stringify(originalArray))

Create duplicates of both the array and its individual elements by value

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Transforming Uint8Array into BigInt using Javascript

Utilize prop-types inheritance when a component is rendered via props

Troubleshooting the issue of 'is not a function' in browsers when using TS Namespaces

A guide on implementing code sharing in NestJS using Yarn Workspaces

Provide the context for a template within a dynamically generated component

Remove the JavaScript files from the distribution folder when removing TypeScript files in an Angular 2 project

Angular2 Error: ngClass used in a Host component, "is not recognized as a valid native property"

Using lambdas in JSX attributes is not allowed because it can negatively impact rendering performance

Issue encountered on server using next.js - FetchError: failed to process request for https://jsonkeeper.com/b/4G1G

User's information will only be updated once the page is refreshed

How can TypeScript be forced to output a specific data type?

Using Firebase's REST API to send a PATCH request

Encountered error when attempting to clone Angular project using npm: ELIFECY

Angular 4: Implementing toggle switch functionality in Angular 4 by binding boolean values retrieved from the database

Display embedded ng-template in Angular 6

Methods for hiding and showing elements within an ngFor iteration?

What is the best way to generate inner HTML components within Angular by creating components?

Declarations for TypeScript in NPM packages

Why is the Last Page display on pagination showing as 3 instead of 2 per items?

"Error: Unfinished string literal encountered" occurring in a TypeScript app.component.ts file in NativeScript