javascript - How can you sort an array without mutating the original array? - Stack Overflow

admin管理员组

文章数量:1129449

Let's suppose I wanted a sort function that returns a sorted copy of the inputted array. I naively tried this

function sort(arr) {
  return arr.sort();
}

and I tested it with this, which shows that my sort method is mutating the array.

var a = [2,3,7,5,3,7,1,3,4];
sort(a);
alert(a);  //alerts "1,2,3,3,3,4,5,7,7"

I also tried this approach

function sort(arr) {
  return Array.prototype.sort(arr);
}

but it doesn't work at all.

Is there a straightforward way around this, preferably a way that doesn't require hand-rolling my own sorting algorithm or copying every element of the array into a new one?

Let's suppose I wanted a sort function that returns a sorted copy of the inputted array. I naively tried this

function sort(arr) {
  return arr.sort();
}

and I tested it with this, which shows that my sort method is mutating the array.

var a = [2,3,7,5,3,7,1,3,4];
sort(a);
alert(a);  //alerts "1,2,3,3,3,4,5,7,7"

I also tried this approach

function sort(arr) {
  return Array.prototype.sort(arr);
}

but it doesn't work at all.

Is there a straightforward way around this, preferably a way that doesn't require hand-rolling my own sorting algorithm or copying every element of the array into a new one?

• javascript
• arrays
• sorting

Share Improve this question Follow edited Feb 11, 2022 at 15:38 danronmoon 3,87355 gold badges3535 silver badges5858 bronze badges asked Mar 6, 2012 at 22:11 Peter OlsonPeter Olson 143k4949 gold badges208208 silver badges248248 bronze badges 5

• 1 create a deep copy of the array and sort it instead. – evanmcdonnal Commented Mar 6, 2012 at 22:12
• 2 @evanmcdonnal A shallow copy might be good enough if all is wanted is a reordering and not a duplicate of every item in the array. – Kekoa Commented Mar 6, 2012 at 22:14
• .sort requires the this value to be the array, so for the last snippet to work you would do .sort.call(arr) (though it doesn't solve your problem). – pimvdb Commented Mar 6, 2012 at 22:15
• @Kekoa Yeah that's a good point. There is no need to consume more memory if you're only going to change the order of the elements and not the elements themselves. – evanmcdonnal Commented Mar 6, 2012 at 22:16
• zzzzBov's method is working like a charm! stackoverflow.com/a/9592774/7011860 – zimmerbimmer Commented Jun 27, 2019 at 6:14

Add a comment  | 

12 Answers 12

Sorted by: Reset to default 546

With the introduction of the new .toSorted method in JavaScript, there's now a straightforward way to get a sorted copy of the array without modifying the original array:

const sorted = arr.toSorted();

For more details, you can refer to the MDN documentation on .toSorted.

Note: Before using .toSorted, make sure to check the compatibility with your environment. This method requires Node.js >= 20.0.0 or a recent version of modern browsers. If you are working in an environment that does not support this version, you may need to use the older method below.

---

For completeness, here's the older method using ES6 spread syntax to create a copy before sorting:

const sorted = [...arr].sort();

The spread-syntax as array literal (copied from MDN):

const arr = [1, 2, 3];
const arr2 = [...arr]; // like arr.slice()

Just copy the array. There are many ways to do that:

function sort(arr) {
  return arr.concat().sort();
}

// Or:
return Array.prototype.slice.call(arr).sort(); // For array-like objects

Try the following

function sortCopy(arr) { 
  return arr.slice(0).sort();
}

The slice(0) expression creates a copy of the array starting at element 0.

You can use slice with no arguments to copy an array:

var foo,
    bar;
foo = [3,1,2];
bar = foo.slice().sort();

ES2023 Array Method toSorted():

The toSorted() method of Array instances is the copying version of the sort() method. It returns a new array with the elements sorted in ascending order.

const arr = [2, 1, 3];
const arrSorted = arr.toSorted();
console.log(arr); //[2, 1, 3]
console.log(arrSorted); //[1, 2, 3]

You can also do this

d = [20, 30, 10]
e = Array.from(d)
e.sort()

This way d will not get mutated.

function sorted(arr) {
  temp = Array.from(arr)
  return temp.sort()
}

//Use it like this
x = [20, 10, 100]
console.log(sorted(x))

Update - Array.prototype.toSorted() proposal

The Array.prototype.toSorted(compareFn) -> Array is a new method that was proposed to be added to the Array.prototype and is currently in stage 3 (Soon to be available).

This method will keep the target Array untouched and return a copy with the change performed instead.

Remember that if no argument is passed to sort, it will not properly sort numbers by value. For numbers, try this. This does not mutate the original array.

function sort(arr) {
  return arr.slice(0).sort((a,b) => a-b);
}

Anyone who wants to do a deep copy (e.g. if your array contains objects) can use:

let arrCopy = JSON.parse(JSON.stringify(arr))

Then you can sort arrCopy without changing arr.

arrCopy.sort((obj1, obj2) => obj1.id > obj2.id)

Please note: this can be slow for very large arrays.

There's a new tc39 proposal, which adds a toSorted method to Array that returns a copy of the array and doesn't modify the original.

For example:

const sequence = [3, 2, 1];
sequence.toSorted(); // => [1, 2, 3]
sequence; // => [3, 2, 1]

As it's currently in stage 3, it will likely be implemented in browser engines soon, but in the meantime a polyfill is available here or in core-js.

You can also extend the existing Array functionality. This allows chaining different array functions together.

Array.prototype.sorted = function (compareFn) {
    const shallowCopy = this.slice();
    shallowCopy.sort(compareFn);

    return shallowCopy;
}

[1, 2, 3, 4, 5, 6]
    .filter(x => x % 2 == 0)
    .sorted((l, r) => r - l)
    .map(x => x * 2)

// -> [12, 8, 4]

Same in typescript:

// extensions.ts
Array.prototype.sorted = function (compareFn?: ((a: any, b: any) => number) | undefined) {
    const shallowCopy = this.slice();
    shallowCopy.sort(compareFn);

    return shallowCopy;
}

declare global {
    interface Array<T> {
        sorted(compareFn?: (a: T, b: T) => number): Array<T>;
    }
}

export {}

// index.ts
import 'extensions.ts';


[1, 2, 3, 4, 5, 6]
    .filter(x => x % 2 == 0)
    .sorted((l, r) => r - l)
    .map(x => x * 2)

// -> [12, 8, 4]

To sort a function without mutating the original, simply use .map() before sort to create a copy of the original array:

const originalArr = [1, 45, 3, 21, 6];
const sortedArr = originalArr.map(value => JSON.parse(JSON.stringify(value))).sort((a, b) => a - b);

console.log(sortedArr); // the logged output will be 1,3,6,21,45

The original array has not been modified, but you have a sorted version of it available to you. JSON.parse(JSON.stringify()) make sure it is a deep copy, not a shallow copy.

本文标签： javascriptHow can you sort an array without mutating the original arrayStack Overflow