Hãy xem xét mảng đối tượng JavaScript sau. Mỗi đối tượng đại diện cho một người chơi trong nền tảng trò chơi bao gồm một mã định danh duy nhất [id], name của họ và số lượng wins đã đạt được
const players = [{
id: 1,
name: "Leanne Graham",
wins: 13,
}, {
id: 2,
name: "Ervin Howell",
wins: 8,
}, {
id: 3,
name: "Clementine Bauch",
wins: 19
}];
Làm thế nào để bạn tìm thấy người chơi có nhiều chiến thắng nhất?
Một đặc điểm đáng chú ý của mảng này là nó chưa được sắp xếp nên chúng ta không thể đơn giản lấy phần tử đầu tiên [hoặc cuối cùng, tùy thuộc vào hướng sắp xếp]. Thay vào đó, chúng ta cần một thuật toán so sánh các phần tử với nhau và trả về phần tử có giá trị wins tối đa
Mảng. giảm là bạn của chúng tôi ở đây. Nếu bạn chưa từng thấy chữ ký hàm trước đây, nó sẽ đọc hơi khó hiểu
Hãy áp dụng Array.reduce vào trường hợp sử dụng của chúng ta để tìm phần tử có giá trị lớn nhất trong mảng của chúng ta
const playerWithMostWins = players.reduce[
[prev, current] => {
return prev.wins > current.wins ? prev : current
}
];
Và nếu bạn cần thay đổi logic thành người chơi có ít chiến thắng nhất [vì bức tường xấu hổ?], thì đó là chức năng tương tự nhưng chỉ với một chức năng so sánh khác
Tại sao không mảng. tìm hoặc Toán. tối đa?
const playerWithMostWins = players.reduce[
[prev, current] => {
return prev.wins > current.wins ? prev : current
}
];
const playerWithMostWins = players.reduce[
[prev, current] => {
return prev.wins > current.wins ? prev : current
}
];
const leanne = players.find[p => p.name === "Leanne Graham"];
const playerWithMostWins = players.reduce[
[prev, current] => {
return prev.wins > current.wins ? prev : current
}
];
const mostWins = Math.max[...players.map[[p] => p.wins], 0];
Nhưng hãy nhớ rằng đây là một hoạt động
const playerWithMostWins = players.reduce[
[prev, current] => {
return prev.wins > current.wins ? prev : current
}
];
Array.reduceNguyên tắc chung của tôi khi nào tôi cần đạt được Array.reduce là nếu tôi đang sử dụng các từ so sánh trong câu hỏi mà tôi đang cố gắng hỏi. Các từ so sánh phổ biến là nhất, ít nhất, tối đa, thấp nhất, mới nhất, cũ nhất, v.v.
- Người dùng nào có nhiều người theo dõi nhất?
- Quảng cáo nào có số lượng nhấp chuột ít nhất?
- Quỹ nào có năng suất tối đa?
- Người dùng nào có số lượng bài đăng thấp nhất?
- Tập tin nào là cũ nhất?
- Trò chơi nào là mới nhất?
Một trường hợp sử dụng phổ biến đối với tôi khi sử dụng phương pháp Array.reduce này là khi tôi cần điều chỉnh React UI một cách có điều kiện dựa trên các giá trị tương đối của một phần tử
Quay lại ví dụ ban đầu của chúng tôi, khi tôi biết người chơi nào giành được nhiều chiến thắng nhất, tôi có thể đặt biểu tượng cảm xúc chiếc cúp vô cùng quý giá này 🏆 bên cạnh tên của họ
- Leanne Graham [13]
- Ervin Howell [8]
- Clementine Bauch [19] 🏆
Và đây là mã thành phần đầy đủ
________số 8_______Vì vậy, lần tới khi bạn cần một cách nhanh chóng và dễ dàng để tìm phần tử mảng có nhiều nhất hoặc ít nhất một thứ gì đó, tôi hy vọng bạn sẽ xem xét Array.reduce
Toán học. Hàm max[] thường lấy tất cả các phần tử trong một mảng và xem xét kỹ lưỡng từng giá trị để lấy giá trị lớn nhất. Đó là phương pháp được thảo luận trong ví dụ dưới đây
Bản thử trực tiếp
Thí dụ
đầu ra
55.
2] sắp xếp[]
Sử dụng hàm sắp xếp và so sánh, chúng ta có thể sắp xếp các phần tử trong mảng theo thứ tự giảm dần hoặc tăng dần, sau này sử dụng thuộc tính độ dài, chúng ta có thể tìm thấy giá trị cần thiết
Có nhiều phương pháp để tìm các số nhỏ nhất và lớn nhất trong một mảng JavaScript và hiệu suất của các phương pháp này thay đổi dựa trên số lượng phần tử trong mảng. Hãy thảo luận riêng về từng vấn đề và đưa ra kết quả thử nghiệm cuối cùng
Đối với các mảng thông thường, bạn có thể sử dụng hàm Math. tối đa với ba dấu chấm
let max = Math.max[...arrayOfNumbers];hãy để arrayOfNumbers = [4, 12, 62, 70, -10]; . nhật ký [Toán. tối đa [. arrayOfNumbers]];
Sử dụng dấu ba chấm […] giúp dễ dàng gọi bất kỳ hàm nào cần đối số
Toán học. hàm max sử dụng phương thức apply[] để tìm phần tử lớn nhất trong một mảng số
Math.min.apply[Math, testArr];
Math.max.apply[Math, testArr];hãy để arrayOfNumbers = [4, 12, 62, 70, -10]; . nhật ký [Toán. tối đa. áp dụng [Math, arrayOfNumbers]];
Toán tử cũng được sử dụng để lấy giá trị lớn nhất của một mảng. Nó mở rộng một mảng số vào danh sách các đối số, chẳng hạn như với Math. tối thiểu [] và Toán. tối đa[]
Math.min[...testArr];
Math.max[...testArr];
Math.min.apply[Math, testArr];
Math.max.apply[Math, testArr];Bạn có thể sử dụng vòng lặp tiêu chuẩn cho hàng tấn đối số vì vòng lặp for không có giới hạn về kích thước
let max = testArray[0];
for [let i = 1; i < testArrayLength; ++i] {
if [testArray[i] > max] {
max = testArray[i];
}
}
let min = testArray[0];
for [let i = 1; i < testArrayLength; ++i] {
if [testArray[i] < min] {
min = testArray[i];
}
}cho arrayList = [1, 2, 3, 4, 3, 21, 0]; . chiều dài; . nhật ký [tối đa];
Bạn cũng có thể sử dụng phương thức reduce[] để lấy số lượng mục
testArr.reduce[function [a, b] {
return Math.max[a, b];
}];
testArr.reduce[function [a, b] {
return Math.min[a, b];
}];hãy để mảngList = [1, 2, 3, 4, 3, 20, 0]; . giảm [[trước, hiện tại] => { trả về Toán học. max[trước, hiện tại] }]; . nhật ký [maxNum];
Các phương thức áp dụng và trải rộng có giới hạn là 65536 xuất phát từ giới hạn số lượng đối số tối đa. Vào năm 2019, giới hạn là kích thước tối đa của ngăn xếp cuộc gọi, nghĩa là kích thước tối đa cho các số trong trường hợp áp dụng và giải pháp trải rộng là khoảng 120000. Tập lệnh sau sẽ tính toán giới hạn cho môi trường cụ thể của bạn
let testArr = Array.from[{
length: 10000
}, [] => Math.floor[Math.random[] * 2000000]];
for [i = 10000; i < 1000000; ++i] {
testArr.push[Math.floor[Math.random[] * 2000000]];
try {
Math.max.apply[null, testArr];
} catch [e] {
console.log[i];
break;
}
}Khi bạn kiểm tra tất cả các ví dụ đã cho ở trên, kết quả cho thấy vòng lặp tiêu chuẩn là nhanh nhất. Sau đó đến các phương pháp áp dụng và lây lan, sau chúng là giảm, đây là phương pháp chậm nhất. Khi xử lý các mảng lớn có hơn 40 phần tử, toán tử trải rộng được coi là lựa chọn tồi tệ hơn so với các phương thức khác