JavaScript: Swapping array values by index

Question

I'm trying to animate the sorting of a few elements with jQuery and my sorting map is defined like this:

var mapping = [
  [0, 5],
  [1, 4],
  [2, 3],
  [3, 2],
  [4, 1],
  [5, 0]
];

mapping[0][0] is the element's index and mapping[0][1] is the target index.

My solution was basically this:

var elements = [1, 2, 3, 4, 5, 6];

for (var i = 0; i < elements.length; i++) {
  var clone1 = elements[mapping[i][0]];
  var clone2 = elements[mapping[i][1]];

  elements[mapping[i][0]] = clone2;
  elements[mapping[i][1]] = clone1;
}

console.log(elements);

The problem is, I am working on the object I'm modifying and the operations undo themselves; instead of reversing the array, I get the same array back.

How would I swap elements like this in JavaScript? Here's a JSFiddle example of the code.

Dan D. · Accepted Answer · 2012-05-22 08:06:18Z

2

// [source, target]
var mapping = [
  [0, 5],
  [1, 4],
  [2, 3],
  [3, 2],
  [4, 1],
  [5, 0]
];

var elements = [1, 2, 3, 4, 5, 6];

function swapElements(elements, mapping) {
    var tmp = new Array(elements.length);
    for(var i = 0, l = mapping.length; i < l; i++) {
        tmp[mapping[i][1]] = elements[mapping[i][0]];
    }
    for(var i = 0, l = elements.length; i < l; i++) {
        elements[i] = tmp[i];
    }
}

swapElements(elements, mapping);

console.log(elements);

edited May 22, 2012 at 8:06

answered May 22, 2012 at 8:00

Dan D.

75k15 gold badges111 silver badges129 bronze badges

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

2 Comments

Blender Over a year ago

Thanks, that was really close to what I was looking for. In my actual code, elements can have an arbitrary length and mapping is usually 2 to 5 in length, so I modified your code a little: jsfiddle.net/fxnTG/2

Dan D. Over a year ago

Ah, well, I only had the one test case.

Félix Adriyel Gagnon-Grenier · Accepted Answer · 2014-07-25 19:43:08Z

1

Some functional fun with accessor function

var at = function(arr) { return function(i) { return arr[i] } };
[5,4,3,2,0,1].map( at(['a','b','c','d','e','f']) )

this will returns ['f','e','d','c','a','b']

edited Jul 25, 2014 at 19:43

Félix Adriyel Gagnon-Grenier

8,92510 gold badges58 silver badges69 bronze badges

answered Jul 25, 2014 at 19:37

zoomy

111 bronze badge

Comments

Just_Mad · Accepted Answer · 2012-05-22 07:53:18Z

0

You swap elements twice from 0 to 5 and from 5 to 0 again :) Try

for (var i = 0; i < elements.length / 2; i++)

and it will be ok.

Look here

answered May 22, 2012 at 7:53

Just_Mad

4,0753 gold badges24 silver badges31 bronze badges

1 Comment

Blender Over a year ago

Well, it's not that easy. The example mapping maps up to 5, but I have a list with 40 elements and the mapping element only contains the row swaps that occur. I used the reversing example just to illustrate my problem.

supNate · Accepted Answer · 2012-05-22 07:55:52Z

0

You're changing the array during a loop of it. And it's swapped twice for each pair, so the result is the same. You may need another arr to store mapped value:

var result = [];
for(var i = 0; i<mapping.length; i++){
    result[mapping[i][0]] = elements[mapping[i][1]];
}
console.log(result);

answered May 22, 2012 at 7:55

supNate

4303 silver badges11 bronze badges

Comments

McGarnagle · Accepted Answer · 2012-05-22 07:55:59Z

0

Just define a temporary array:

var elements = [1, 2, 3, 4, 5, 6];
var temp = [];
for (var i = 0; i < elements.length; i++) {
  temp.push(elements[mapping[i][1]]);
}
elements = temp;

answered May 22, 2012 at 7:55

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Comments

Caleb · Accepted Answer · 2012-05-22 08:18:59Z

0

Just_Mad's answer is correct if you are only trying to reverse the list. But if you want to be able to handle any mapping configuration you will need a different approach.

If you don't care about memory space you could just iterate through the mapping list and copy the element at index "mapping[i][0]" to a new array at index "mapping [i][1]". Then just return the new array. This should handle whatever mapping you put into the system (you just have to decide if and how you want to handle mappings that leave empty spaces and/or override spaces)

answered May 22, 2012 at 8:18

Caleb

1,0987 silver badges7 bronze badges

Collectives™ on Stack Overflow

JavaScript: Swapping array values by index

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related