I am saving some data in order using arrays, and I want to add a function that the user can reverse the list. I can't think of any possible method, so if anybody knows how, please help.
Add a comment
|
38 Answers
Javascript has a reverse() method that you can call in an array
var a = [3,5,7,8];
a.reverse(); // 8 7 5 3
Not sure if that's what you mean by 'libraries you can't use', I'm guessing something to do with practice. If that's the case, you can implement your own version of .reverse()
function reverseArr(input) {
var ret = new Array;
for(var i = input.length-1; i >= 0; i--) {
ret.push(input[i]);
}
return ret;
}
var a = [3,5,7,8]
var b = reverseArr(a);
Do note that the built-in .reverse() method operates on the original array, thus you don't need to reassign a.
3 Comments
Ali Mert Çakar
use [...arr].reverse() for undestructive reversing
codeandcloud
const b = a.toReversed(); returns a new array with the original in tact
B Kazimy
isnt there a way so to map an array from the last item to the first item instead of reversing the array and then map them?
Array.prototype.reverse()is all you need to do this work. See compatibility table.
var myArray = [20, 40, 80, 100];
var revMyArr = [].concat(myArray).reverse();
console.log(revMyArr);
// [100, 80, 40, 20]
2 Comments
Larry
nice, non-destructive
Mohammad Usman
It should be noted that
concat copies object references into the new array. Both the original and new array refer to the same object...Heres a functional way to do it.
const array = [1,2,3,4,5,6,"taco"];
function reverse(array){
return array.map((item,idx) => array[array.length-1-idx])
}
2 Comments
DNLST
Great and short solution if u don't want to change orig array!
freethebees
This is great if you are writing a pure function or don't want to mutate the original array for any other reason.
20 bytes
let reverse=a=>[...a].map(a.pop,a)
8 Comments
Derek 朕會功夫
@user169320
[...a] clones the array, .map(a.pop, a) pops the array (returns the last element of the array) and push it to a new array, which results in a reversed array.
trincot
...and the 2nd argument to
map makes sure that pop is executed with a as this, like as if you would have done a.pop()trincot
When you pass on a function reference (so without executing it), which is later used for execution, then that function reference has no trace at all of the object you want to have it executed on: it is just a plain function. In the above code you might as well have put
[].pop instead of a.pop: it would be exactly the same function. When the implementation of map executes that function, it does not know on which array it should be executed. And if you don't tell that, it will fail. The second argument to map gives the necessary info to map.
Radu Chiriac
Quite clever but bear in mind that this will mutate your original array making it empty (use a deep-freeze before, maybe)
|
const original = [1, 2, 3, 4];
const reversed = [...original].reverse(); // 4 3 2 1
Concise and leaves the original unchanged. Careful with object arrays, as the new array will still reference the same objects.
For object arrays or multi-dimensional arrays you can use lodash
const reversed = _.cloneDeep(original).reverse();
3 Comments
Sathis Sakthivel
very useful , you are fade out my issues on reverse state
Greg
Just lost half a day due to not realizing this was an in-place operation. Thank you for the help!
WestMountain
It's a shame that if you write
_.reverse(original) it will not work, they don't say it in documentationreveresed = [...array].reverse()
Comments
The shortest reverse method I've seen is this one:
let reverse = a=>a.sort(a=>1)
4 Comments
Derek 朕會功夫
Doesn’t this depend on how the sorting is implemented? Since the comparing function isn’t consistent (i.e. it always returns 1) the behavior is undefined.
Elia Grady
Actually I was surprised to see it work the way it did.
[1,2,3,4].sort(a=>1) returns the correct answer for example. The idea is that it closely tied to how the sort method can take a sorting algorithm and since it does it one by one, it's always swaps.Derek 朕會功夫
The problem with this is that it might not reverse the array with different interpreters.
Elia Grady
I'm not suggesting this as a good practice, just thought it's an interesting, unconventional take on a well known operation.
two ways:
counter loop
function reverseArray(a) { var rA = [] for (var i = a.length; i > 0; i--) { rA.push(a[i - 1]) } return rA; }Using .reverse()
function reverseArray(a) { return a.reverse() }
Comments
You can do
var yourArray = ["first", "second", "third", "...", "etc"]
var reverseArray = yourArray.slice().reverse()
console.log(reverseArray)
You will get
["etc", "...", "third", "second", "first"]
1 Comment
xy2_
A good non-destructive solution. Note that
slice does a shallow copy.53 bytes
function reverse(a){
for(i=0,j=a.length-1;i<j;)a[i]=a[j]+(a[j--]=a[i++],0)
}
Just for fun, here's an alternative implementation that is faster than the native .reverse method.
1 Comment
Alexander Dixon
I always look for that diamond in the rough where the solution is simple, compatible, and concise. You won this question for me, in this case. May you please explain it in detail?
**
Shortest reverse array method without using reverse method:
**
var a = [0, 1, 4, 1, 3, 9, 3, 7, 8544, 4, 2, 1, 2, 3];
a.map(a.pop,[...a]);
// returns [3, 2, 1, 2, 4, 8544, 7, 3, 9, 3, 1, 4, 1, 0]
a.pop method takes an last element off and puts upfront with spread operator ()
MDN links for reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
1 Comment
QuentinUK
Same as Torkel Velure 's answer [...a].map(a.pop,a)
Here is a version which does not require temp array.
function inplaceReverse(arr) {
var i = 0;
while (i < arr.length - 1) {
arr.splice(i, 0, arr.pop());
i++;
}
return arr;
}
// Useage:
var arr = [1, 2, 3];
console.log(inplaceReverse(arr)); // [3, 2, 1]
1 Comment
Ry-
Doesn’t require a temp array, just Θ(n²) time. This should be done with single swaps.
I've made some test of solutions that not only reverse array but also makes its copy. Here is test code. The reverse2 method is the fastest one in Chrome but in Firefox the reverse method is the fastest.
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var reverse1 = function() {
var reversed = array.slice().reverse();
};
var reverse2 = function() {
var reversed = [];
for (var i = array.length - 1; i >= 0; i--) {
reversed.push(array[i]);
}
};
var reverse3 = function() {
var reversed = [];
array.forEach(function(v) {
reversed.unshift(v);
});
};
console.time('reverse1');
for (var x = 0; x < 1000000; x++) {
reverse1();
}
console.timeEnd('reverse1'); // Around 184ms on my computer in Chrome
console.time('reverse2');
for (var x = 0; x < 1000000; x++) {
reverse2();
}
console.timeEnd('reverse2'); // Around 78ms on my computer in Chrome
console.time('reverse3');
for (var x = 0; x < 1000000; x++) {
reverse3();
}
console.timeEnd('reverse3'); // Around 1114ms on my computer in Chrome
Comments
> var arr = [1,2,3,4,5,6];
> arr.reverse();
[6, 5, 4, 3, 2, 1]
Comments
array.reverse()
Above will reverse your array but modifying the original. If you don't want to modify the original array then you can do this:
var arrayOne = [1,2,3,4,5];
var reverse = function(array){
var arrayOne = array
var array2 = [];
for (var i = arrayOne.length-1; i >= 0; i--){
array2.push(arrayOne[i])
}
return array2
}
reverse(arrayOne)
2 Comments
Łukasz Jagodziński
The first example is not true.
arrayTwo has a reference to the arrayOne so both arrays will be reversed.
enjareyes
You're right- thanks! I removed the first example so this is now correct :)
function reverseArray(arr) {
let reversed = [];
for (i = 0; i < arr.length; i++) {
reversed.push((arr[arr.length-1-i]))
}
return reversed;
}
Comments
As others mentioned, you can use .reverse() on the array object.
However if you care about preserving the original object, you may use reduce instead:
const original = ['a', 'b', 'c'];
const reversed = original.reduce( (a, b) => [b].concat(a) );
// ^
// |
// +-- prepend b to previous accumulation
// original: ['a', 'b', 'c'];
// reversed: ['c', 'b', 'a'];
Comments
Using .pop() method and while loop.
var original = [1,2,3,4];
var reverse = [];
while(original.length){
reverse.push(original.pop());
}
Output: [4,3,2,1]
Comments
I'm not sure what is meant by libraries, but here are the best ways I can think of:
// return a new array with .map()
const ReverseArray1 = (array) => {
let len = array.length - 1;
return array.map(() => array[len--]);
}
console.log(ReverseArray1([1,2,3,4,5])) //[5,4,3,2,1]
// initialize and return a new array
const ReverseArray2 = (array) => {
const newArray = [];
let len = array.length;
while (len--) {
newArray.push(array[len]);
}
return newArray;
}
console.log(ReverseArray2([1,2,3,4,5]))//[5,4,3,2,1]
// use swapping and return original array
const ReverseArray3 = (array) => {
let i = 0;
let j = array.length - 1;
while (i < j) {
const swap = array[i];
array[i++] = array[j];
array[j--] = swap;
}
return array;
}
console.log(ReverseArray3([1,2,3,4,5]))//[5,4,3,2,1]
// use .pop() and .length
const ReverseArray4 = (array) => {
const newArray = [];
while (array.length) {
newArray.push(array.pop());
}
return newArray;
}
console.log(ReverseArray4([1,2,3,4,5]))//[5,4,3,2,1]
Comments
Pure functions to reverse an array using functional programming:
var a = [3,5,7,8];
// ES2015
function immutableReverse(arr) {
return [ ...a ].reverse();
}
// ES5
function immutableReverse(arr) {
return a.concat().reverse()
}
Comments
It can also be achieved using map method.
[1, 2, 3].map((value, index, arr) => arr[arr.length - index - 1])); // [3, 2, 1]
Or using reduce (little longer approach)
[1, 2, 3].reduce((acc, curr, index, arr) => {
acc[arr.length - index - 1] = curr;
return acc;
}, []);
Comments
reverse in place with variable swapping (mutative)
const myArr = ["a", "b", "c", "d"];
for (let i = 0; i < (myArr.length - 1) / 2; i++) {
const lastIndex = myArr.length - 1 - i;
[myArr[i], myArr[lastIndex]] = [myArr[lastIndex], myArr[i]]
}
Comments
Use swapping and return the original array.
const reverseString = (s) => {
let start = 0, end = s.length - 1;
while (start < end) {
[s[start], s[end]] = [s[end], s[start]]; // swap
start++, end--;
}
return s;
};
console.log(reverseString(["s", "t", "r", "e", "s", "s", "e", "d"]));
Comments
Reverse by using the sort method
- This is a much more succinct method.
const resultN = document.querySelector('.resultN');
const resultL = document.querySelector('.resultL');
const dataNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const dataLetters = ['a', 'b', 'c', 'd', 'e'];
const revBySort = (array) => array.sort((a, b) => a < b);
resultN.innerHTML = revBySort(dataNum);
resultL.innerHTML = revBySort(dataLetters);<div class="resultN"></div>
<div class="resultL"></div>
2 Comments
Ry-
This in-place reversal isn’t efficient and the sort method is incorrect (an inconsistent comparison function has implementation-defined behaviour).
iPzard
In addition to what Ry mentioned, this is an inefficient method considering in-place changes can be done in O(n/2), because you only need to really transverse half the array. Sort function's time complexity is O(n log n), which is worse than even an O(n) solution.
Using ES6 rest operator and arrow function.
const reverse = ([x, ...s]) => x ? [...reverse(s), x] : [];
reverse([1,2,3,4,5]) //[5, 4, 3, 2, 1]
Comments
Infact the reverse() may not work in some cases, so you have to make an affectation first as the following
let a = [1, 2, 3, 4];
console.log(a); // [1,2,3,4]
a = a.reverse();
console.log(a); // [4,3,2,1]
or use concat
let a = [1, 2, 3, 4];
console.log(a, a.concat([]).reverse()); // [1,2,3,4], [4,3,2,1]
Comments
ES2023 Array Method toReversed():
The
toReversed()method ofArrayinstances is thecopyingcounterpart of thereverse()method. It returns a new array with the elements in reversed order.
const originalArray = [1, 2, 3];
const reversedArray = originalArray.toReversed();
console.log(`Original Array ==> ${originalArray}`); //[1, 2, 3]
console.log(`Reversed Array ==> ${reversedArray}`); //[3, 2, 1].as-console-wrapper { max-height: 100% !important; top: 0; }
Comments
What about without using push() !
Solution using XOR !
var myARray = [1,2,3,4,5,6,7,8];
function rver(x){
var l = x.length;
for(var i=0; i<Math.floor(l/2); i++){
var a = x[i];
var b = x[l-1-i];
a = a^b;
b = b^a;
a = a^b;
x[i] = a;
x[l-1-i] = b;
}
return x;
}
console.log(rver(myARray));
JavaScript already has reverse() method on Array, so you don't need to do that much!
Imagine you have the array below:
var arr = [1, 2, 3, 4, 5];
Now simply just do this:
arr.reverse();
and you get this as the result:
[5, 4, 3, 2, 1];
But this basically change the original array, you can write a function and use it to return a new array instead, something like this:
function reverse(arr) {
var i = arr.length, reversed = [];
while(i) {
i--;
reversed.push(arr[i]);
}
return reversed;
}
Or simply chaning JavaScript built-in methods for Array like this:
function reverse(arr) {
return arr.slice().reverse();
}
and you can call it like this:
reverse(arr); //return [5, 4, 3, 2, 1];
Just as mentioned, the main difference is in the second way, you don't touch the original array...
