Trong bài trước chúng ta đã được tìm hiểu về các phương thức xử lý mảng trong Javascript. Trong bài này chúng ta sẽ cùng nhau khám phá các phương thức sắp xếp mảng trong Javascript nhé.
Sắp xếp là một trong những dạng bài toán thường gặp nhất trong thực tế vì vậy wecode hy vọng bài này sẽ giúp cho các bạn có thêm những kỹ năng xử lý mảng tốt hơn và đặc biệt là có thể ứng dụng trong thực tế một cách hiệu quả.
Sắp xếp mảng bằng phương thức sort()
Phương thức sort() sắp xếp một mảng theo thứ tự tăng dần của bảng chữ cái
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Mảng trước khi sắp xếp: "+fruits;
fruits.sort();
document.getElementById("demo2").innerHTML = "Mảng sau khi sắp xếp: "+fruits;
</script>
</body>
</html>Đảo ngược một mảng với reverse()
Phương thức reverse() giúp chúng ta đảo ngược các phần tử trong một mảng.
Bạn có thể sử dụng nó để sắp xếp một mảng theo thứ tự giảm dần (Kết hợp với sort())
<html>
<body>
<h2>JavaScript Array Sort Reverse</h2>
<p>Phương thức reverse() dùng để đảo ngược các phần tử trong một mảng.</p>
<p>Bằng các kết hợp sort() và reverse() bạn có thể sắp xếp mảng theo thứ tự giảm dần:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Mảng trước khi sắp xếp: "+fruits;
// First sort the array
fruits.sort();
// Then reverse it:
fruits.reverse();
document.getElementById("demo2").innerHTML = "Mảng sau khi sắp xếp: "+fruits;
</script>
</body>
</html>Sắp xếp theo số
Theo mặc định, hàm sort() sắp xếp các giá trị dưới dạng chuỗi .
Điều này hoạt động tốt cho các chuỗi (ví dụ: “Apple” đứng trước “Banana”).
Tuy nhiên, nếu các số được sắp xếp dưới dạng chuỗi, thì “25” sẽ được coi là lớn hơn “100”, vì “2” lớn hơn “1”.
Vì điều này,phương thức sort() sẽ tạo ra kết quả không chính xác khi sắp xếp các số.
Bạn có thể sửa lỗi này bằng cách cung cấp một hàm so sánh:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Sắp xếp dãy số theo thứ tự tăng dần:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const arr = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = "Mảng trước khi sắp xếp: "+arr;
arr.sort(function(a, b){return a - b});
document.getElementById("demo2").innerHTML = "Mảng sau khi sắp xếp: "+arr;
</script>
</body>
</html>Sử dụng thủ thuật tương tự để sắp xếp một mảng số giảm dần:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Sắp xếp dãy số theo thứ tự giảm dần:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const arr = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = "Mảng trước khi sắp xếp: "+arr;
arr.sort(function(a, b){return b-a});
document.getElementById("demo2").innerHTML = "Mảng sau khi sắp xếp: "+arr;
</script>
</body>
</html>Hàm So sánh
Mục đích của hàm so sánh là xác định một thứ tự sắp xếp thay thế.
Hàm so sánh phải trả về giá trị âm, 0 hoặc dương, tùy thuộc vào các đối số:
function(a, b){return a - b}Khi hàm sort() so sánh hai giá trị, nó sẽ gửi các giá trị đến hàm so sánh và sắp xếp các giá trị theo giá trị được trả về (âm, 0, dương).
- Nếu kết quả là âm thì a được sắp xếp trước b.
- Nếu kết quả là dương thì b được sắp xếp trước a.
- Nếu kết quả là 0 thì không có thay đổi nào được thực hiện với thứ tự sắp xếp của hai giá trị.
Thí dụ:
Hàm so sánh so sánh tất cả các giá trị trong mảng, hai giá trị cùng một lúc (a, b).
Khi so sánh 40 và 100, phương thức sort() này gọi hàm so sánh (40, 100).
Hàm tính toán 40 – 100 (a – b) và vì kết quả là âm (-60) nên hàm sắp xếp sẽ sắp xếp 40 dưới dạng giá trị thấp hơn 100.
Bạn có thể sử dụng đoạn mã này để thử nghiệm với việc sắp xếp theo số và theo thứ tự bảng chữ cái:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click vào nút lệnh bạn cần thực hiện và quan sát kết quả.</p>
<button onclick="myFunction1()">Sắp xếp Alphabet</button>
<button onclick="myFunction2()">Sắp xếp dạng Số</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = "Kết quả sắp xếp theo Alphabet: "+points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = "Kết quả sắp xếp theo Số: "+points;
}
</script>
</body>
</html>Sắp xếp một mảng theo thứ tự ngẫu nhiên
Hãy thử ví dụ sau:
<html>
<body>
<h2>JavaScript Array Random Sort</h2>
<p>Click vào nút bên dưới nhiều lần và quan sát kết quả.</p>
<button onclick="myFunction()">Bấm để thử</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10, 99, 69];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(){return 0.5 - Math.random()});
document.getElementById("demo").innerHTML = "Kết quả: "+points;
}
</script>
</body>
</html>Tìm giá trị lớn nhất của mảng (hoặc nhỏ nhất)
Không có hàm tích hợp nào để tìm giá trị lớn nhất hoặc nhỏ nhất trong một mảng.
Tuy nhiên, sau khi bạn đã sắp xếp một mảng, bạn có thể sử dụng chỉ mục để lấy giá trị cao nhất và thấp nhất.
Sắp xếp tăng dần:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Giá trị nhỏ nhất của mảng là: <span id="demo"></span>.</p>
<script>
const arr = [40, 100, 1, 5, 25, 10, 99, 69];
arr.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = arr[0];
</script>
</body>
</html>Sắp xếp giảm dần:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Giá trị lớn nhất của mảng là: <span id="demo"></span>.</p>
<script>
const arr = [40, 100, 1, 5, 25, 10, 99, 69];
arr.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = arr[0];
</script>
</body>
</html>Sử dụng Math.max () trên một mảng
Bạn có thể sử dụng Math.max.apply để tìm số lớn nhất trong một mảng:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Giá trị lớn nhất của mảng: <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
</script>
</body>
</html>Math.max.apply(null, [1, 2, 3])tương đương với Math.max(1, 2, 3).
Sử dụng Math.min () trên một mảng
Bạn có thể sử dụng Math.min.apply để tìm số nhỏ nhất trong một mảng:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Giá trị nhỏ nhất của mảng: <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10,99,69];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
</script>
</body>
</html>Math.min.apply(null, [1, 2, 3]) tương đương với Math.min(1, 2, 3).
Sắp xếp mảng đối tượng
Mảng JavaScript thường chứa các đối tượng:
Ví dụ chúng ta có mảng các đối tượng sau:
const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];Ngay cả khi các đối tượng có các thuộc tính của các kiểu dữ liệu khác nhau, phương thức sort() này có thể được sử dụng để sắp xếp mảng.
Giải pháp là viết một hàm so sánh để so sánh các giá trị thuộc tính:
cars.sort(function(a, b){return a.year - b.year});Hãy thử ví dụ sau:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Sắp xếp danh sách xe theo năm sản xuất:</p>
<p id="demo"></p>
<script>
const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
displayCars();
cars.sort(function(a, b){return a.year - b.year});
displayCars();
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script>
</body>
</html>So sánh các thuộc tính chuỗi phức tạp hơn một chút:
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click vào nút lệnh để sắp xếp theo loại xe.</p>
<button onclick="myFunction()">Sắp xếp loại xe</button>
<p id="demo"></p>
<script>
const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
displayCars();
function myFunction() {
cars.sort(function(a, b){
let x = a.type.toLowerCase();
let y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
displayCars();
}
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script>
</body>
</html>Như thế là chúng ta đã được làm quen với các phương thức sắp xếp mảng khác nhau. Hy vọng bài này sẽ giúp bạn có thêm những trải nghiệm thú vị cùng với Mảng trong Javascript.