JavaScript Sorting Arrays - Xắp xếp các mảng trong JavaScript
Sắp xếp một mảng
Phương thức sort() sắp xếp một mảng theo thứ thự abc:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // Sorts the elements of fruits<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Đảo ngược một chuỗi
Phương thức reverse() đảo ngược các thành phần 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:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // First sort the elements of fruits
fruits.reverse(); // Then reverse the order of the elements<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort Reverse</h2>
<p>The reverse() method reverses the elements in an array.</p>
<p>By combining sort() and reverse() you can sort an array in descending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
// Create and display an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
// First sort the array
fruits.sort();
// Then reverse it:
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Sắp xếp số
Mặc định, hàm sort() sắp xếp các giá trị như các chuỗi.
Nó làm việc tốt trên các chuỗi ("Apple" đứng trước "Banana").
Tuy nhiên, nếu các số được sắp xếp như một chuỗi, "25" lại lớn hơn "100", bởi vì "2" lớn hơn "1".
Bởi vì điều này, hàm sort() sẽ cung cấp một kết quả không chính xác khi sắp xếp các chữ số.
Bạn có thể sửa điều này bằng một hàm so sánh:
ví dụ
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the button to sort the array in ascending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
Sử dụng cùng một mẹo để sắp xếp một mảng giảm dần:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the button to sort the array in descending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return b - a});
document.getElementById("demo").innerHTML = points;
}
</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 thay thế nên trả về một số âm, 0, hoặc một giá trị dương, phụ 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ị tới hàm so sánh, và sắp xếp các giá trị so sánh theo giá trị được trả về (âm, 0, dương).
Nếu kết quả là âm a sẽ được xếp trước b.
Nếu kết quả là dương a sẽ được xếp sau b.
Nếu kết quả là 0 không có gì thay đổi.
ví dụ
Hàm so sánh so sánh toàn bộ các giá trị trong mảng, hai giá trị một lần (a, b).
Khi so sánh 40 và 100, phương thức sort() gọi hàm so sánh function(40, 100).
Hàm tính 40 - 100 (a - b), và khi kết quả là âm (-60), hàm sắp xếp sẽ xếp 40 là giá trị thấp hơn 100.
Bạn có thể sử dụng đoạn trích code để thử nghiệm sắp xếp với số hoặc abc:
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script><!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort the array alphabetically or numerically.</p>
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
Sắp xếp một mảng theo thứ tự ngẫu nhiên
ví dụ
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the button (again and again) to sort the array in random order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return 0.5 - Math.random()});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>Phương thức Fisher Yates
Các ví dụ bên trên, array.sort(), không chính xác, nó sẽ ưu tiên một vài số hơn các số còn lại.
Phương thức chính xác phổ biến nhất, được gọi là Fisher Yate shuffle, và đã được giới thiệu trong khoa học dữ liệu sớm nhất là năm 1938!
Trong JavaScript phương thức sẽ được dịch thành thế này:
ví dụ
var points = [40, 100, 1, 5, 25, 10];
for (i = points.length -1; i > 0; i--) {
j = Math.floor(Math.random() * i)
k = points[i]
points[i] = points[j]
points[j] = k
}
<p>Click the button (again and again) to sort the array in random order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
var i, j, k;
for (i = points.length -1; i > 0; i--) {
j = Math.floor(Math.random() * i)
k = points[i]
points[i] = points[j]
points[j] = k
}
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>Tìm giá trị cao nhất(hoặc thấp nhất) trong mảng
Không có hàm nào xây dựng bên trong cho việc đi tìm max và min của giá trị trong một mảng.
Tuy nhiên, sau khi bạn xắp xếp một mảng, bạn có thể sử dụng chỉ số để đạt được giá trị cao nhất và thấp nhất trong một mảng.
Sắp xếp tăng dần
ví dụ
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The lowest number is <span id="demo"></span>.</p>
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
Sắp xếp giảm dần:
ví dụ
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The highest number is <span id="demo"></span>.</p>
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
Tip: Xắp xếp toàn bộ một mảng là phương pháp rất kém hiệu quả khi bạn muốn tìm giá trị cao nhất (hoặc thấp nhất).
Sử dụng Math.max trên mảng
Bạn có thể sử dụng Math.max.apply để tìm số lớn nhất trong một mảng:
ví dụ
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The highest number is <span id="demo"></span>.</p>
<script>
var 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ố bé nhất trong một mảng:
ví dụ
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The lowest number is <span id="demo"></span>.</p>
<script>
var points = [40, 100, 1, 5, 25, 10];
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 Math.min(1, 2, 3).
Phương thức tìm tối đa tối thiểu trong JavaScript
Giải pháp nhanh nhất là dùng phương thức "nhà làm".
Hàm sau lặp qua một mảng so sánh từng giá trị với giá trị cao nhất được tìm thấy:
ví dụ(tìm max)
function myArrayMax(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The highest number is <span id="demo"></span>.</p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
</script>
</body>
</html>
Hàm sau lặp qua một mảng và so sánh mỗi giá trị với giá trị thấp nhất tìm thấy:
ví dụ(tìm min)
function myArrayMin(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The lowest number is <span id="demo"></span>.</p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
</script>
</body>
</html>
Sắp xếp các đối tượng mảng
Các mảng JavaScript thường chứa các đối tượng:
ví dụ
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];Thậm chí nếu các đối tượng có các thuộc tính là các kiểu dữ liệu khác nhau, phương thức sort() có thể được dùng để xắp xếp các 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:
ví dụ
cars.sort(function(a, b){return a.year - b.year});<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on age.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
displayCars();
function myFunction() {
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 thuộc tính chuỗi thì phức tạp hơn chút:
ví dụ
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on type.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
displayCars();
function myFunction() {
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var 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>Tags: