Copy an array into the middle of a larger array in Javascript

Question

I've searched through the answers here, but I can only find this question answered for other languages.

So I have 2 Uint8 typed arrays.

var arr1 = [0,0,0];
var arr2 = [0,1,2,3,4,5,6,7,8,9];

I want to replace the contents of arr2 with arr1 starting at the 4th position. So that arr2 will be:

arr2 = [0,1,2,0,0,0,6,7,8,9];

If I wasn't trying to do this in the middle of the array I could use set like this:

arr2.set(arr1);

And I would get:

arr2 = [0,0,0,4,5,6,7,8,9];

I know I can loop through the arr2 and individually copy the values, but performance wise this is very slow compared to set (and performance matters to me because it's copying an entire array of canvas img data 24 times a second).

Is there any function that can copy into the middle of an array, but with the performance of set?

is the 4th position a random position or will it always be the 4th position? — Sagiv b.g
– Sagiv b.g, Commented Dec 31, 2017 at 23:58
@Sagivb.g It's random based on the input data, but I'll always have a variable ahead of time to reference the position. — YAHsaves
– YAHsaves, Commented Dec 31, 2017 at 23:59
@Eineki, no sorry I tested that several times. Set's performance beats looping over the array hands down. It's nearly 300% faster on large arrays. — YAHsaves
– YAHsaves, Commented Jan 1, 2018 at 0:43
@YAHsaves maybe I explained myself badly. I was saying that you would have used the set method itself, since it has the optional offset parameter used to do exactly what you needed. — Eineki
– Eineki, Commented Jan 1, 2018 at 10:45

Ori Drori · Accepted Answer · 2018-01-01 00:08:05Z

4

Use the typedarray.set(array[, offset]) offset.

offset Optional

The offset into the target array at which to begin writing values from the source array. If you omit this value, 0 is assumed (that is, the source array will overwrite values in the target array starting at index 0).

const arr1 = new Uint8Array([0,0,0]);
const arr2 = new Uint8Array([0,1,2,3,4,5,6,7,8,9]);

arr2.set(arr1, 4);

console.log(arr2);

edited Jan 1, 2018 at 0:08

answered Jan 1, 2018 at 0:05

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nina Scholz Over a year ago

@OriDrori, happy new year!

Ori Drori Over a year ago

@NinaScholz - happy new year :)

Sagiv b.g · Accepted Answer · 2018-01-01 00:03:09Z

2

You can use the slice method with the spread syntax:

const shim = (source, index, target) => [
  ...source.slice(0, index),
  ...target,
  ...source.slice(index)
]

var arr1 = [0,0,0];
var arr2 = [0,1,2,3,4,5,6,7,8,9];

const newArr = shim(arr2, 3, arr1);
console.log(newArr);

.slice will not mutate the array and will return a new shallow copy of it (unlike splice).

answered Jan 1, 2018 at 0:03

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Comments

Eineki · Accepted Answer · 2018-01-01 00:10:27Z

1

Since you are using typed array. Don't you can use the offset of the set method?

arr2.set(arr1, 3)

To overwrite from the 4th element of the target array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set

To me it does just what you need, if I understand your question.

answered Jan 1, 2018 at 0:10

Eineki

14.9k6 gold badges55 silver badges62 bronze badges

Collectives™ on Stack Overflow

Copy an array into the middle of a larger array in Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related