Đảo ngược mảng trong JavaScript | Laptrinhcanban.com

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

Hướng dẫn tất cả cách đảo ngược mảng trong JavaScript. Bạn sẽ học được cách sử dụng các phương thức như reverse(), sort() hoặc vòng lặp for để đảo ngược mảng JavaScript sau bài học này.

Chúng ta có 2 phương pháp để đảo ngược mảng trong JavaScript như sau:

  • Đả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

Chúng ta sẽ cùng tìm hiểu các phương pháp này ở dưới đây:

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

Sử dụng phương thức reverse() trong JavaScript

Phương thức reverse() trong JavaScript sẽ đảo ngược thứ tự các phần tử trong mảng ban đầu. Đây là một 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.

Chúng ta sử dụng phương thức reverse() trong JavaScript với cú pháp sau đây:

org_arr.reverse()

Trong đó org_arr là mảng ban đầu cần đảo ngược lại. Phương thức reverse() sẽ trả về kết quả là mảng ban đầu với các phần tử sắp xếp theo thứ tự ngược lại.

Ví dụ, chúng ta dùng Phương thức reverse() để đảo ngược một dãy số trong JavaScript như sau:

let org_arr = [1, 2, 3, 4, 5];

org_arr.reverse();
console.log(org_arr);
//> [5, 4, 3, 2, 1]

Tương tự chúng ta sử dụng reverse() để đảo ngược mảng trong JavaScript phần tử là chuỗi như sau:

let arr = ['Ali' , 'Bob' , 'Eva' , 'Adam'];
arr.reverse();
console.log(arr);
//> ['Adam', 'Eva', 'Bob', 'Ali']

Sử dụng phương thức sort() trong JavaScript

Phương thức sort() trong JavaScript vốn được sử dụng để sắp xếp mảng trong JavaScript. Ứng dụng sort(), chúng ta có thể thực hiện đảo ngược mảng chỉ định trong JavaScript như sau:

let org_arr = [1, 2, 3, 4, 5];
org_arr.sort(function() {
return -1;
})
console.log(org_arr); //>[ 5, 4, 3, 2, 1 ]

Chúng ta có thể sử dụng hàm arrow() trong JavaScript để viết code ngắn gọn hơn như sau:

let org_arr = [1, 2, 3, 4, 5];
org_arr.sort(()=>-1);
console.log(org_arr); //>[ 5, 4, 3, 2, 1 ]

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

Ở phần trên chúng ta đã biết khi sử dụng reverse() để đảo ngược mảng trong JavaScript thì mảng ban đầu sẽ bị thay đổi. Trong trường hợp bạn muốn đảo ngược mảng mà không làm thay đổi mảng ban đầu, hãy tạo ra một bản sao của mảng ban đầu và sử dụng reverse() với bản sao này thay cho mảng gốc.

Có rất nhiều cách sao chép mảng trong JavaScript để chúng ta lựa chọn kết hợp với reverse() trước khi tiến hành đảo ngược mảng.

Kết hợp slice() và reverse()

Phương thức slice() vốn được sử dụng để cắt một phạm vi trong mảng ban đầu và trả về kết quả dưới dạng một mảng mới. Khi lược bỏ tất cả các đối số của slice() thì sẽ tạo ra một mảng mới giống hệt mảng ban đầu. Sau khi tạo mảng mới, chúng ta dùng reverse() với mảng mới này để tiến hành đảo ngược mảng như sau:

let org_arr = [1, 2, 3, 4, 5];
let new_arr = org_arr.slice().reverse();

console.log(org_arr);//>[ 1, 2, 3, 4, 5 ]
console.log(new_arr);//>[ 5, 4, 3, 2, 1 ]

Kết hợp toán tử ba chấm và reverse()

Toán tử 3 chấm trong JavaScript được biểu diễn dưới dạng ...data. Toán tử 3 chấm được sử dụng nhiều trong JavaScript, và một trong những công dụng của nó chính là chuyển một mảng thành mảng mới trong JavaScript. Sau khi tạo mảng mới, chúng ta dùng reverse() với mảng mới này để tiến hành đảo ngược mảng như sau:

let org_arr = [1, 2, 3, 4, 5];
let new_arr = [...org_arr].reverse();

console.log(org_arr);//>[ 1, 2, 3, 4, 5 ]
console.log(new_arr);//>[ 5, 4, 3, 2, 1 ]

Đảo ngược mảng trong JavaScript bằng vòng lặp for

Ngoài cách sử dụng các phương thức có sẵn như trên, chúng ta cũng có thể sử dụng vòng lặp for kết hợp với phương thức push() để đảo ngược mảng trong JavaScript mà không làm thay đổi mảng ban đầu.

Chúng ta sử dụng vòng lặp for để tạo ra vòng lặp, lấy từng phần tử trong chuỗi ban đầu theo thứ tự ngược lại, sau đó dùng phương thức push() để gán chúng vào mảng mới như ví dụ cụ thể sau đây:

let org_arr = [1, 2, 3, 4, 5];
let new_arr = [];

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

console.log(org_arr);//>[ 1, 2, 3, 4, 5 ]
console.log(new_arr);//>[ 5, 4, 3, 2, 1 ]

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách đảo ngược mảng trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.