Giới thiệu

Khi làm việc với JavaScript, đôi khi chúng ta gặp phải các tình huống yêu cầu chúng ta phải có được các phần tử tối thiểu và tối đa của một mảng - có thể là để thiết lập ranh giới cho thanh trượt hoặc hiển thị thống kê cho người dùng.

Trong bài viết này, chúng ta sẽ xem xét cách lấy phần tử tối thiểu và tối đa của một mảng trong JavaScript. Chúng ta cũng sẽ xem xét bốn phương pháp khác nhau và so sánh tốc độ của chúng khi xử lý các mảng lớn.

Cách lấy các phần tử tối thiểu và tối đa của một mảng bằng cách sử dụng Toán học Đối tượng

Math là đối tượng tiện lợi toàn cầu được tích hợp sẵn của JavaScript chứa rất nhiều phương thức và hằng số mà bạn có thể cần khi thực hiện các phép toán. Hai phương pháp mà chúng tôi sẽ sử dụng trong bài viết này là Math.min() và Math.max() - cả hai đều chấp nhận một danh sách các số làm đối số. Như tên của chúng gợi ý, một phần tử trả về phần tử có giá trị thấp nhất và phần tử kia trả về phần tử có giá trị cao nhất:

console.log(Math.min(20, 23, 27));
console.log(Math.max(20, 23, 27));

console.log(Math.min(-20, -23, -27));
console.log(Math.max(-20, -23, -27));

Nếu ít nhất một trong các phần tử đã chuyển không phải là số hoặc không thể chuyển đổi thành số, cả hai Math.min() và Math.max() Trả về NaN:

console.log(Math.min('-20', -23, -27));
console.log(Math.max('number', -23, -27));

Tương tự, nếu chúng ta cố gắng chuyển một mảng làm đối số của Math.min() chức năng, chúng tôi nhận được một NaN, vì nó được coi là một phần tử duy nhất, không thể chuyển đổi thành giá trị vô hướng:

const myArray = [2, 3, 1];
console.log(Math.min(myArray));

Tuy nhiên, một cách khắc phục nhanh chóng cho điều này là sử dụng toán tử spread để mở gói các phần tử:

const myArray = [2, 3, 1];
console.log(Math.min(...myArray));

Nếu bạn muốn đọc thêm về Nhà điều hành Spread - hãy đọc Hướng dẫn về Toán tử Spread trong JavaScript!

Nhận phần tử tối đa và tối thiểu với giảm()

Các hoạt động giảm thiểu, đôi khi được gọi là gấp, là một số hoạt động mạnh mẽ nhất từ ​​lập trình chức năng, với nhiều loại ứng dụng. Các reduce() , chạy một hàm giảm thiểu (được định nghĩa trong một lệnh gọi lại) trên mỗi phần tử mảng và cuối cùng trả về một giá trị duy nhất.

Nó có giá trị bao gồm phương pháp do cách nó có thể được áp dụng phổ biến:

const myArray = [20, 23, 27];

let minElement = myArray.reduce((a, b) => {
    return Math.min(a, b);
});

console.log(minElement);

Tìm phần tử tối thiểu và tối đa với ứng dụng()

Sản phẩm apply() phương thức được sử dụng để gọi một hàm với một this giá trị và một mảng đối số. Điều này giúp chúng tôi có thể nhập các mảng vào Math.min() chức năng tĩnh:

const myArray = [20, 23, 27];

let minElement = Math.min.apply(Math, myArray);
console.log(minElement);

let minElement = Math.min.apply(null, myArray);
console.log(minElement);

Nhận các phần tử tối thiểu và tối đa với các vòng lặp tiêu chuẩn - Hiệu suất nhanh nhất

Vòng lặp được sử dụng trong JavaScript để thực hiện các tác vụ lặp đi lặp lại dựa trên một điều kiện. Điều kiện trở lại true or false. Một vòng lặp sẽ tiếp tục chạy cho đến khi điều kiện xác định trả về false. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng for vòng lặp - nó thường được sử dụng để chạy mã một số lần.

Nhận phần tử tối thiểu

Đầu tiên, chúng ta sẽ khởi tạo phần tử tối thiểu thành phần tử đầu tiên của một mảng. Sau đó, chúng tôi lặp lại toàn bộ mảng để xem liệu giá trị của bất kỳ phần tử nào khác có nhỏ hơn giá trị nhỏ nhất hiện tại hay không - nếu có, chúng tôi sẽ đặt giá trị nhỏ nhất mới thành giá trị của phần tử hiện tại:

const myArray = [20, 23, 27];

let minElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] < minElement) {
        minElement = myArray[i];
    }
}

console.log(minElement);

Nhận phần tử tối đa

Đầu tiên chúng ta sẽ khởi tạo phần tử tối đa thành phần tử đầu tiên trong mảng. Sau đó, chúng tôi sẽ lặp lại toàn bộ mảng để xem có phần tử nào khác lớn hơn phần tử đã khởi tạo hay không, vì vậy nó sẽ thay thế nó:

const myArray = [20, 23, 27];

let maxElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] > maxElement) {
        maxElement = myArray[i];
    }
}

console.log(maxElement);

Điểm chuẩn hiệu suất

Sử dụng JS Benchmark - chúng tôi đã chạy tất cả các phương pháp này trên nhiều đầu vào khác nhau, từ 100 đến 1000000 phần tử trong mảng. Hiệu suất là tương đối và phụ thuộc vào độ dài của mảng.

• Đối với mảng nhỏ (100), reduce() phương pháp thực hiện tốt nhất, tiếp theo là các vòng lặp tiêu chuẩn, toán tử spread và sau đó là apply() phương pháp. Các á quân gần như ngang nhau về thành tích.
• Đối với mảng trung bình (1000), các vòng lặp tiêu chuẩn hoạt động tốt nhất, tiếp theo là reduce(), toán tử spread và apply() phương pháp. Các vòng lặp tiêu chuẩn nhanh hơn đáng kể so với reduce() ở đây, do đó, khá nhanh hơn so với những người chạy về phía trước.
• Đối với các mảng thực sự lớn (1000000), các vòng lặp tiêu chuẩn hoạt động tốt hơn tất cả các methosds khác ở một mức độ lớn đến mức trường hợp cho các vòng lặp tiêu chuẩn là rất mạnh.

Các vòng lặp tiêu chuẩn có quy mô thực sự tốt và chỉ thua đối thủ khi áp dụng cho các mảng nhỏ. Nếu bạn đang xử lý một vài mục hoặc các mảng nhỏ hơn, tất cả các phương pháp sẽ khá liền mạch. Mảng càng lớn, lợi ích của việc sử dụng các vòng lặp tiêu chuẩn càng lớn.

Lưu ý: Đừng lấy điểm chuẩn theo mệnh giá! Chúng được chạy trên các máy khác nhau, có thể có các phiên bản trình duyệt và công cụ JS khác nhau. Kiểm tra những điều này trong ứng dụng của bạn và chọn tùy chọn có thể mở rộng, nhanh nhất cho usecase của riêng bạn.

Kết luận

Trong hướng dẫn này, chúng tôi đã xem xét cách lấy các phần tử tối thiểu và tối đa của một mảng trong JavaScript. Chúng tôi đã xem xét Math.min() và Math.max() phương pháp, toán tử spread, reduce() phương pháp, apply() và đã viết một cách tiếp cận tùy chỉnh để nhận các phần tử thông qua for Vòng lặp.

Cuối cùng, chúng tôi đã đánh giá kết quả, lưu ý rằng bạn sử dụng cách tiếp cận nào cho các mảng nhỏ không thực sự quan trọng, trong khi bạn nên sử dụng tiêu chuẩn cho các vòng lặp cho các mảng lớn hơn.