Hướng dẫn JS

JS TRANG CHỦ Giới thiệu JS JS Đến đâu Đầu ra JS Tuyên bố JS Cú pháp JS Bình luận JS Biến JS JS Hãy JS Const Toán tử JS Số học JS Chuyển nhượng JS Các loại dữ liệu JS Các hàm JS Đối tượng JS Sự kiện JS Chuỗi JS Phương thức chuỗi JS Tìm kiếm chuỗi JS Mẫu chuỗi JS Số JS Phương thức số JS Mảng JS Phương thức mảng JS Sắp xếp mảng JS Lặp lại mảng JS JS Array Const JS ngày Định dạng ngày JS Ngày lấy phương thức JS Phương pháp đặt ngày JS Toán JS JS ngẫu nhiên JS Booleans So sánh JS Điều kiện JS Chuyển đổi JS JS Loop cho JS Loop For In JS Loop For Of JS lặp trong khi JS Break JS lặp lại Bộ JS Bản đồ JS JS Typeof Chuyển đổi loại JS JS Bitwise JS RegExp Lỗi JS Phạm vi JS JS Hoists Chế độ nghiêm ngặt JS JS từ khóa này Hàm mũi tên JS Lớp JS JS JSON Gỡ lỗi JS Hướng dẫn kiểu JS Các phương pháp hay nhất về JS JS sai lầm Hiệu suất JS JS dành riêng từ

Phiên bản JS

Phiên bản JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Lịch sử JS

Đối tượng JS

Định nghĩa đối tượng Thuộc tính đối tượng Phương thức đối tượng Hiển thị đối tượng Người truy cập đối tượng Trình tạo đối tượng Nguyên mẫu đối tượng Đối tượng lặp lại Bộ đối tượng Bản đồ đối tượng Tham chiếu đối tượng

Các hàm JS

Định nghĩa hàm Tham số chức năng Lời mời hàm Gọi hàm Áp dụng chức năng Chức năng đóng cửa

Lớp JS

Giới thiệu Lớp học Kế thừa giai cấp Lớp tĩnh

JS Async

Gọi lại JS JS không đồng bộ JS hứa JS Async / Await

JS HTML DOM

Giới thiệu DOM Phương thức DOM Tài liệu DOM Phần tử DOM DOM HTML Các biểu mẫu DOM DOM CSS Hoạt ảnh DOM Sự kiện DOM Trình xử lý sự kiện DOM Điều hướng DOM Nút DOM Bộ sưu tập DOM Danh sách nút DOM

BOM trình duyệt JS

Cửa sổ JS Màn hình JS Vị trí JS Lịch sử JS JS Navigator JS Popup Alert Thời gian JS JS Cookies

API web JS

Giới thiệu API Web API biểu mẫu web API lịch sử web API lưu trữ web API công nhân web API tìm nạp web API vị trí địa lý web

JS AJAX

Giới thiệu về AJAX AJAX XMLHttp Yêu cầu AJAX Phản hồi AJAX Tệp XML AJAX AJAX PHP AJAX ASP Cơ sở dữ liệu AJAX Ứng dụng AJAX Ví dụ về AJAX

JS JSON

Giới thiệu JSON Cú pháp JSON JSON so với XML Các loại dữ liệu JSON Phân tích cú pháp JSON JSON Stringify Đối tượng JSON Mảng JSON Máy chủ JSON JSON PHP HTML JSON JSON JSONP

JS so với jQuery

Bộ chọn jQuery jQuery HTML jQuery CSS jQuery DOM

Đồ họa JS

Đồ họa JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Ví dụ về JS

Ví dụ về JS JS HTML DOM Đầu vào HTML JS Đối tượng HTML JS Sự kiện HTML JS Trình duyệt JS Trình chỉnh sửa JS Bài tập JS JS Quiz Chứng chỉ JS

Tham khảo JS

Đối tượng JavaScript Đối tượng DOM HTML


Mảng sắp xếp JavaScript


Sắp xếp một mảng

Phương sort()thức sắp xếp một mảng theo thứ tự bảng chữ cái:

Thí dụ

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

Đảo ngược một mảng

Phương reverse()thức đả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:

Thí dụ

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();

Sắp xếp theo số

Theo mặc định, sort()hàm 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 ("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" lớn hơn "100", vì "2" lớn hơn "1".

Vì điều này, sort()phương pháp 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 :

Thí dụ

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

Sử dụng thủ thuật tương tự để sắp xếp một mảng giảm dần:

Thí dụ

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});


Chức năng 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 sort()hàm 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 ađược sắp xếp trước b.

Nếu kết quả là dương tính 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, sort()phương thức 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:

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</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 = points;
}

function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

Sắp xếp một mảng theo thứ tự ngẫu nhiên

Thí dụ

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});


Phương pháp Fisher Yates

Ví dụ trên, mảng .sort (), không chính xác, nó sẽ ưu tiên một số số hơn những số khác.

Phương pháp chính xác phổ biến nhất, được gọi là Fisher Yates shuffle, và được giới thiệu trong khoa học dữ liệu sớm nhất vào năm 1938!

Trong JavaScript, phương thức này có thể được dịch sang thế này:

Thí dụ

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length -1; i > 0; i--) {
  let j = Math.floor(Math.random() * i)
  let k = points[i]
  points[i] = points[j]
  points[j] = k
}


Tìm giá trị mảng cao nhất (hoặc thấp 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:

Thí dụ

const 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

Sắp xếp giảm dần:

Thí dụ

const 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

Sắp xếp toàn bộ một mảng là một phương pháp rất kém hiệu quả nếu bạn chỉ muốn tìm giá trị cao nhất (hoặc thấp nhất).


Sử dụng Math.max () trên một mảng

Bạn có thể sử dụng Math.max.applyđể tìm số cao nhất trong một mảng:

Thí dụ

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}

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ố thấp nhất trong một mảng:

Thí dụ

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}

Math.min.apply(null, [1, 2, 3])tương đương với Math.min(1, 2, 3).


Phương thức JavaScript tối thiểu / tối đa của tôi

Cách giải quyết nhanh nhất là sử dụng phương pháp “nhà làm”.

Hàm này 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) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}

Hàm này lặp qua một mảng so sánh từng giá trị với giá trị thấp nhất được tìm thấy:

Ví dụ (Tìm Min)

function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}


Sắp xếp mảng đối tượng

Mảng JavaScript thường chứa các đối tượng:

Thí dụ

const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

Ngay cả khi các đối tượng có thuộc tính của các kiểu dữ liệu khác nhau, sort()phương thức 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:

Thí dụ

cars.sort(function(a, b){return a.year - b.year});

So sánh các thuộc tính chuỗi phức tạp hơn một chút:

Thí dụ

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;
});

Tham chiếu mảng hoàn chỉnh

Để tham khảo đầy đủ về Mảng, hãy truy cập:

Toàn bộ tham chiếu mảng JavaScript .

Tham chiếu chứa các mô tả và ví dụ về tất cả các thuộc tính và phương thức của Mảng.

Kiểm tra bản thân với các bài tập

Bài tập:

Sử dụng đúng phương thức Mảng để sắp xếp fruitsmảng theo thứ tự bảng chữ cái.

const fruits = ["Banana", "Orange", "Apple", "Kiwi"];
;