Đảo ngược mảng trong JavaScript

Đảo ngược mảng trong JavaScript

Anh NguyễnBạn nghĩ gì về bài viết này?

Bài viết này sẽ giới thiệu đến bạn một số công thức để đảo ngược mảng trong JavaScript hay còn gọi là đảo ngược thứ tự của các phần tử trong mảng. Bạn có thể sử dụng hàm reverse(), sort() hoặc vòng lặp for để đảo ngược.

Tuy nhiên, hãy chú ý rằng, tuỳ vào hàm hoặc giải thuật mà bạn sử dụng thì sẽ cho ra 2 kết quả:

  • Đảo ngược mảng ban đầu trong JavaScript
  • Đảo ngược mảng trong JavaScript mà không làm thay đổi mảng ban đầu

Đảo ngược mảng ban đầu trong JavaScript

Sử dụng reverse

Đảo ngược mảng trong JavaScript

Một điều cần lưu ý khi sử dụng reverse là nó sẽ làm thay đổi mảng ban đầu. Đây là quá trình tự phá hủy (Destructive processing) và tái tạo lại mảng ban đầu với các phần tử theo thứ tự ngược lại.

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reverse();

console.log(originalArray); // [ 'c', 'b', 'a' ]
console.log(newArray); // [ 'c', 'b', 'a' ]Code language: JavaScript (javascript)

Như bạn có thể thấy ở ví dụ trên, cả mảng ban đầu và mảng tạo mới đều có các giá trị giống nhau theo thứ tự đảo ngược của mảng ban đầu.


const originalArray = [1, 2, 3, 4, 5];

originalArray.reverse();

console.log(originalArray);
 // [5, 4, 3, 2, 1]Code language: JavaScript (javascript)

Trường hợp sử dụng với dãy số cũng tương tự.

Sử dụng sort

Nếu bạn không biết thì hàm sort() thường được sử dụng để sắp xếp các phần tử trong mảng. Tuy nhiên, nó còn công dụng là đảo ngược mảng như sau:

const originalArray = [1, 2, 3, 4, 5];
originalArray.sort(function() {
    return -1;
})

console.log(originalArray); // [ 5, 4, 3, 2, 1 ]
Code language: JavaScript (javascript)

Sắp xếp trong JavaScript

Có thể viết gọn đoạn mã trên với arrow function:


const originalArray = [1, 2, 3, 4, 5];
originalArray.sort(() => 1);

console.log(originalArray); // [ 5, 4, 3, 2, 1 ]

Code language: JavaScript (javascript)

Arrow Function là gì?

Làm thế nào để đảo ngược mảng trong JavaScript mà không làm thay đổi mảng gốc?

Nếu không muốn làm thay đổi mảng gốc, chúng ta có thể tạo ra một bản sao của mảng ban đầu rồi thực hiện đảo ngược trên bản sao đó.

Dưới đây là một số công thức sẽ không làm thay đổi mảng ban đầu. Hãy cùng xem nào 👀

Sử dụng slice và reverse

Thông thường, hàm slice() dùng để cắt các phần tử trong mảng và tạo thành mảng mới. Khi không có đối số và kết hợp với hàm reverse(), nó sẽ đảo ngược thứ tự của các phần tử trong mảng so với mảng gốc.

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.slice().reverse();

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]Code language: JavaScript (javascript)

Sử dụng spread và reverse

Đảo ngược mảng trong JavaScript

Spread ở đây chính là Spread Operator được giới thiệu trong ES6. Nó được kí hiệu bằng dấu ... như ở ví dụ phía dưới. Về công dụng, nó chính là bản sao của mảng ban đầu.

const originalArray = ['a', 'b', 'c'];
const newArray = [...originalArray].reverse();

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]Code language: JavaScript (javascript)

Spread Operator trong JavaScript

Sử dụng reduce và spread

Hàm reduc() này thực thi trên mỗi phần tử và trả về một giá trị. Giá trị trả về này được gán cho đối số tích lũy (accumulator) trong mỗi lần lặp.

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduce((accumulator, value) => {
  return [value, ...accumulator];
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]Code language: JavaScript (javascript)

Sử dụng reduceRight và spread

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => {
  console.log(value);
  return [...accumulator, value];
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]Code language: JavaScript (javascript)

Sử dụng reduceRight và push

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => {
  accumulator.push(value);
  return accumulator;
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]Code language: JavaScript (javascript)

Sử dụng vòng lặp for để đảo ngược mảng trong JavaScript

Nếu không sử dụng các hàm có sẵn tương tác với mảng trong JavaScript ở các ví dụ phía trên. Bạn có thể kết hợp vòng lặp for cùng hàm push() để đảo ngược mảng trong JavaScript. Tất nhiên, với cách này cũng không làm thay đổi mảng ban đầu.

Đảo ngược mảng trong JavaScript

Vòng lặp for để tạo ra vòng lặp chạy từ cuối mảng lên đầu, lấy từng phần tử trong mảng rồi dùng hàm push() để thêm các phần tử vào trong mảng mới.


const originalArray = [1, 2, 3, 4, 5];
const newArray;

for (let i = originalArray.length - 1; i >= 0; i--) {
  newArray.push(originalArray[i]);
}

console.log(originalArray); // [ 1, 2, 3, 4, 5 ]
console.log(newArray); // [ 5, 4, 3, 2, 1 ]Code language: JavaScript (javascript)

Hàm push() trong JavaScript

Hiệu năng

With slice and reverse: 83.085ms
With one loop: 309.763ms
Code language: CSS (css)

Như bạn có thể thấy, khi sử dụng các hàm có sẵn trong JavaScript, thời gian chạy của chương trình đã giảm đi đáng kể so với dùng vòng lặp. Vì vậy, hãy cố gắng sử dụng các hàm có sẵn trong JavaScript khi có thể để đạt hiệu năng tốt hơn nhé.

Kết luận

Trên đây là toàn bộ công thức giúp bạn có thể đảo ngược mảng trong JavaScript. Hãy ghi nhớ các trường hợp hoặc lưu lại bài viết để có thể tìm ra và sử dụng một cách nhanh chóng. Chúc bạn thành công!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận