IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Sorting Arrays - Xắp xếp các mảng trong JavaScript

JavaScript Sorting Arrays - Xắp xếp các mảng trong JavaScript

by GokiSoft.Com - 16:49 19/05/2020 2,785 Lượt Xem

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>





Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!