HomeLập trìnhJavaScriptMảng đảo ngược...

Mảng đảo ngược JavaScript – Hướng dẫn với mã JS mẫu


Đảo ngược một mảng với những hạn chế nhất định là một trong những thách thức phổ biến nhất mà bạn sẽ gặp phải trong các cuộc phỏng vấn xin việc và các câu đố viết mã.

Hướng dẫn này sẽ cho bạn thấy năm các cách để đảo ngược một mảng trong JavaScript có và không có reverse cùng với các đoạn mã mà bạn có thể sử dụng.

Cách đảo ngược một mảng trong JavaScript bằng phương pháp đảo ngược

Khi bạn cần đảo ngược một mảng trong JavaScript, bạn có thể sử dụng reverse phương thức, sẽ đặt phần tử cuối cùng trước và phần tử đầu tiên sau cùng:

let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = numbers.reverse();

console.log(reversedNumbers);
// [5, 4, 3, 2, 1]
Đảo ngược một mảng bằng JavaScript

Nhưng hãy nhớ rằng các reverse phương thức cũng sẽ sửa đổi mảng ban đầu:

let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = numbers.reverse();

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

console.log(numbers);
// [5, 4, 3, 2, 1]
Phương pháp đảo ngược sửa đổi mảng ban đầu

Một số thách thức mã hóa có thể muốn bạn giữ lại mảng ban đầu, vì vậy, hãy xem cách bạn có thể đảo ngược một mảng mà không thay đổi mảng ban đầu.

Đọc thêm  Cách sử dụng Bộ sưu tập JavaScript – Bản đồ và Tập hợp

Cách đảo ngược một mảng trong JavaScript bằng Toán tử trải rộng

Bạn có thể sử dụng kết hợp toán tử trải rộng và reverse phương pháp để đảo ngược một mảng mà không thay đổi bản gốc.

Đầu tiên, bạn đặt các phần tử được trả về từ toán tử trải rộng vào một mảng mới bằng cách đặt cú pháp trải rộng bằng dấu ngoặc vuông []:

[...numbers]

Sau đó, bạn gọi cho reverse phương thức trên mảng. Bằng cách này, các reverse phương thức sẽ được thực thi trên mảng mới thay vì ban đầu:

let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = [...numbers].reverse();

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

console.log(numbers);
// [1, 2, 3, 4, 5]
Sử dụng spread và reverse để đảo ngược mảng

Lưu ý: các spread phương thức là cú pháp ES6. Khi bạn cần hỗ trợ các trình duyệt cũ hơn hoặc bạn muốn sử dụng cú pháp ES5, bạn có thể kết hợp slicereverse các phương pháp. Hãy xem xét điều đó ngay bây giờ.

Cách đảo ngược một mảng trong JavaScript bằng các phương thức Slice và Reverse

Các slice phương thức được sử dụng để trả về các phần tử đã chọn dưới dạng một mảng mới. Khi bạn gọi phương thức mà không có bất kỳ đối số nào, nó sẽ trả về một mảng mới giống hệt với phương thức ban đầu (từ phần tử đầu tiên đến phần tử cuối cùng).

Tiếp theo, bạn gọi reverse phương thức trên mảng vừa được trả về. Đây là lý do tại sao mảng ban đầu không bị đảo ngược:

Đọc thêm  JavaScript Replace – Cách sử dụng phương thức String.prototype.replace() Ví dụ về JS
let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = numbers.slice().reverse();

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

console.log(numbers);
// [1, 2, 3, 4, 5]
Sử dụng phương thức slice và reverse để đảo ngược mảng

Cách đảo ngược một mảng trong JavaScript mà không cần phương pháp đảo ngược

Đôi khi một cuộc phỏng vấn việc làm sẽ thách thức bạn đảo ngược một mảng mà không có reverse phương pháp. Không vấn đề gì! Bạn có thể sử dụng kết hợp một for vòng lặp và một mảng push phương pháp như trong ví dụ dưới đây:

let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = [];

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

console.log(reversedNumbers);
Đảo ngược một mảng với vòng lặp for và phương thức đẩy

Cách viết hàm đảo ngược của riêng bạn trong JS

Cuối cùng, giả sử bạn được giao nhiệm vụ viết hàm đảo ngược của riêng mình, hàm này cần đảo ngược một mảng mà không cần tạo bản sao. Điều này thoạt nghe có vẻ phức tạp, nhưng đừng lo lắng vì nó thực sự khá dễ dàng.

Điều bạn cần làm ở đây là hoán đổi phần tử đầu tiên và phần tử cuối cùng của mảng, sau đó là phần tử thứ hai và phần tử thứ hai với phần tử cuối cùng, v.v. cho đến khi bạn hoán đổi tất cả các phần tử.

js-array-reverse-function-1
Một chức năng để đảo ngược một mảng

Hãy viết một hàm để làm điều đó.

Viết chức năng customReverse và lưu trữ cả chỉ mục đầu tiên tại và chỉ số cuối cùng sử dụng array.length - 1 như các biến.

function customReverse(originalArray) {

  let leftIndex = 0;
  let rightIndex = originalArray.length - 1;
}

Tiếp theo, tạo một while vòng lặp chạy miễn là leftIndex nhỏ hơn so với rightIndex.

Bên trong vòng lặp này, hoán đổi giá trị của leftIndexrightIndex. Bạn có thể lưu trữ tạm thời một trong các giá trị trong một biến tạm thời:

while (leftIndex < rightIndex) {

  // Swap the elements
  let temp = originalArray[leftIndex];
  originalArray[leftIndex] = originalArray[rightIndex];
  originalArray[rightIndex] = temp;
}

Cuối cùng, di chuyển leftIndex lên và rightIndex xuống. Khi mà while vòng lặp lặp lại, nó sẽ hoán đổi phần tử thứ hai và thứ hai thành phần tử cuối cùng, v.v.:

Đọc thêm  23 trang web miễn phí để học JavaScript năm 2022
  function customReverse(originalArray) {

  let leftIndex = 0;
  let rightIndex = originalArray.length - 1;

  while (leftIndex < rightIndex) {

    // Swap the elements with temp variable
    let temp = originalArray[leftIndex];
    originalArray[leftIndex] = originalArray[rightIndex];
    originalArray[rightIndex] = temp;

    // Move indices to the middle
    leftIndex++;
    rightIndex--;
  }
}
Mã mảng đảo ngược hoàn chỉnh

Vòng lặp sẽ dừng ngay khi không còn phần tử nào để đảo ngược. Đối với các mảng có kích thước lẻ, giá trị của leftIndexrightIndex sẽ bằng nhau, vì vậy không trao đổi nữa. Đối với kích thước đồng đều, leftIndex sẽ lớn hơn so với rightIndex.

Bạn có thể kiểm tra chức năng để xem nó có hoạt động bình thường như thế này không:

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

customReverse(myArray);

console.log(myArray);

// output is [5, 4, 3, 2, 1]
Kiểm tra chức năng đảo ngược mảng

Phần kết luận

Xin chúc mừng! Bạn không chỉ học cách đảo ngược một mảng trong JavaScript mà còn học cách viết hàm đảo ngược của riêng bạn.

Dưới đây là một số hướng dẫn JavaScript khác mà bạn có thể quan tâm:



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status