Hôm nay chúng ta sẽ thực hành viết các hàm JS đơn giản, qua đó sẽ cải thiện dần khả năng tạo các hàm phức tạp hơn.
Bài toán 1: nhập vào ba số chỉ độ dài, hãy xem nó có phải là ba độ dài của một cạnh tam giác không?
Cách giải: ba độ dài a, b, c chỉ tạo được thành hình tam giác nếu ba điều kiện sau đồng thời thỏa mãn:
- a + b > c
- b + c > a
- a + c > b
Như vậy chúng ta sẽ sử dụng đến câu lệnh if và toán tử &&
Biến đầu vào sẽ là 3 độ dài trên.
Hàm cụ thể:
<p id="demo"></p>
<script>
function triAngle(a, b, c) {
if (((a + b) > c) && ((b + c) > a) && ((a + c) > b)) {
x = "TRUE";
}
else { x = "FALSE";}
return x;
}
document.getElementById("demo").innerHTML = triAngle(2, 3, 4);
</script> Nhưng đoạn mã trên có lỗ hổng. Nó không đánh giá dữ liệu đầu vào, vì thế kết quả của triAngle("a", 3, 4) thì lại là FALSE. Kết quả False thì cũng không sai nhưng chưa hoàn toàn chính xác.
Chúng ta sẽ bổ sung mã để xác nhận dữ liệu đầu vào là hợp lệ. Ở đây dữ liệu hợp lệ là dạng số. Tức là cả 3 biến đầu vào a, b, c phải là số cả thì mới được.
Chúng ta sẽ dùng hàm isNaN() để biết dữ liệu có phải là số không, với hàm này, nếu không phải là số nó sẽ trả về TRUE, còn nếu là số nó sẽ trả về FALSE. Ta sẽ dùng toán tử phủ định ! để đảo lại cho tiện tư duy tức là !isNaN(x) sẽ là TRUE nếu x là số.
Do vậy đoạn mã xác thực dữ liệu đầu vào sẽ kiểu thế này:
if (!isNaN(a) && !isNaN(b) && !isNaN(c)) // tức là cả 3 phải là số nó mới trả về kết quả TRUE.Đoạn mã đầy đủ sẽ thế này:
<p id="demo"></p>
<script>
function triAngle(a, b, c) {
if (!isNaN(a) && !isNaN(b) && !isNaN(c)) {
if (((a + b) > c) && ((b + c) > a) && ((a + c) > b)) {
x = "TRUE";
}
else { x = "FALSE";}
}
else {
x = "KKK";
}
return x;
}
document.getElementById("demo").innerHTML = triAngle("a", 3, 4);
</script>Nếu dữ liệu đầu vào không hợp lệ nó sẽ xuất ra giá trị KKK ra màn hình.
Bài toán 2: Một mảng gồm 10 số từ 0 tới 9, show ra 3 số ngẫu nhiên nhưng không được trùng nhau. Tức là 1, 5, 7 thì được, nhưng 3, 2, 3 sẽ không đạt yêu cầu.
Có hai hàm trong JS sẽ giúp ta làm việc này:
- Hàm
Math.floor(Math.random() * 10);sẽ tạo ra giá trị ngẫu nhiên từ 0 tới 9; - Hàm
[…new Set(ranDom)];sẽ loại bỏ các phần tử trùng nhau trong mảng;
Ý tưởng ở đây là ta tạo một giá trị ngẫu nhiên, rồi đưa nó vào mảng, vì yêu cầu tránh trùng lặp ta dùng hàm thứ hai để loại trùng. Sau đó ta đếm số phần tử của mảng đã bỏ trùng, đạt đến số lượng 3 là đạt yêu cầu.
Vậy ở trên là vòng lặp có điều kiện, điều kiện ở đây là số lượng đạt 3, còn vòng lặp là cứ tạo ra giá trị ngẫu nhiên, đưa vào mảng, rồi loại trùng. Vậy chúng ta cần dùng thêm hàm while để tạo ra vòng lặp có điều kiện.
Câu lệnh hoàn chỉnh sẽ như sau. Kết quả trả về sẽ gồm mảng gồm ba số từ 0 đến 9 và không trùng nhau.
<p id="demo"></p>
<script>
function random3() {
let i = 0;
ranDom = []; // mảng chứa giá trị ngẫu nhiên
uniqueNums = []; // mảng loại bỏ trùng lặp
while (i < 3) {
ranDom[i] = Math.floor(Math.random() * 10); // lấy giá trị ngẫu nhiên từ 0 tới 9
uniqueNums = [...new Set(ranDom)]; // loại trùng lặp
i = uniqueNums.length; // đếm số lượng của mảng bỏ trùng
}
return uniqueNums;
}
document.getElementById("demo").innerHTML = random3();
</script>Bài toán 3: Cho một danh mục gồm 7 sản phẩm, hãy viết hàm show ra ngẫu nhiên 3 sản phẩm (cũng không trùng nhau) trong 7 sản phẩm đó.
Ở trên là số, bây giờ giá sử chúng ta có mảng gồm 7 sản phẩm là Coca, Pepsi, Fanta, 7up, Redbull, Nước khoáng, Trà.
Vậy làm thế nào để lấy 3 sản phẩm bất kỳ trong 7 sản phẩm đó.
Vì đã có bài 2 dẫn lối rồi, chúng ta sẽ chỉ cần thay đổi mã một chút:
<p id="demo"></p>
<script>
const product = ["Coca", "Pepsi", "Fanta", "7up", "Redbull", "Nước khoáng", "Trà"];
function randon3p(product) {
let i = 0;
ranDom = []; // mảng chứa sản phẩm ngẫu nhiên
uniqueNums = []; // mảng loại bỏ trùng lặp
while (i < 3) {
k = Math.floor(Math.random() * 7); // lấy giá trị ngẫu nhiên
ranDom[i] = product[k]; // gán sản phẩm ngẫu nhiên vào mảng ranDom
uniqueNums = [...new Set(ranDom)]; // loại trùng
i = uniqueNums.length; // đếm số lượng mảng đã loại trùng để làm điều kiện cho while, không có cái này vòng lặp sẽ vô tận
}
return uniqueNums;
}
document.getElementById("demo").innerHTML = randon3p(product);
</script>Bài toán 4: Cho 7 sản phẩm bất kỳ gồm tên sản phẩm và giá, hãy viết hàm để lấy ra (các) sản phẩm có giá cao nhất để hiện ra màn hình.
Cấu trúc của mảng đầu vào:
product = ["Coca 7", "Pepsi 12", "Fanta 10", "7up 9", "Redbull 12", "Nước khoáng 3", "Trà 5"];
Trong đó tên đứng trước, giá đứng sau. Tên không bị trùng nhau, giá có thể giống nhau. Cấu trúc đã được chuẩn hóa (tức là không có chuyện thiếu giá, hoặc giá không phải số). Ý là ta tập trung tạo hàm thôi chứ không cần chuẩn hóa thông tin đầu vào nữa.
Vậy là giá lúc nào cũng đứng cuối, chúng ta chỉ việc tách giá ra khỏi sản phẩm, đưa nó vào mảng, rồi tìm giá trị lớn nhất, sau đó quay ra tìm xem sản phẩm nào có giá lớn nhất đó rồi show ra là được.
<p id="demo"></p>
<script>
products = ["Coca 7", "Pepsi 12", "Fanta 10", "7up 9", "Redbull 12", "Nước khoáng 3", "Trà 5"];
function maxPrice(products) {
const price = [];
for (let i = 0; i < products.length; i++) {
let ps = products[i].split(" "); // mảng tách tên và giá
let x = ps.length - 1; // lấy vị trí của giá trong mảng vừa tách
let pr = parseFloat(ps[x]); // lấy giá và chuyển thành giá trị số
price[i] = pr; // đưa giá sản phẩm vào mảng
}
let maxPrice = Math.max(...price); // tìm được giá trị lớn nhất trong mảng
const maxProducts = []; let v = 0;
for (let j = 0; j < products.length; j++) {
let ps = products[j].split(" "); // mảng tách tên và giá
let x = ps.length - 1; // lấy vị trí của giá trong mảng vừa tách
let pr = parseFloat(ps[x]); // lấy giá và chuyển thành giá trị số
if (pr == maxPrice) {maxProducts[v] = products[j]; v++;} // đưa sản phẩm có giá đúng với giá cao nhất tìm được vào mảng
}
return maxProducts;
}
document.getElementById("demo").innerHTML = maxPrice(products); // show các sản phẩm có giá cao nhất ra khỏi màn hình
</script>Bài toán 5: Cho 7 sản phẩm bất kỳ gồm tên sản phẩm và giá, hãy viết hàm để sắp xếp các sản phẩm đó theo giá giảm dần
Cấu trúc mảng đầu vào như ở bài 4.
Chúng ta sẽ dùng hàm ở bài 4 để xử lý cái này. Đầu tiên tìm sản phẩm có giá lớn nhất trong mảng ban đầu.
Tiếp đó loại bỏ sản phẩm có giá lớn nhất đó trong mảng đầu, rồi lại quay ra tìm sản phẩm có giá lớn nhất trong mảng các sản phẩm còn lại.
Cứ thế cho đến khi hết.
<p id="demo"></p>
<script>
const products = ["Coca 7", "Pepsi 2", "Fanta 10", "Seven Up 9", "Redbull 15", "Nước khoáng 9", "Trà 3"];
let count = products.length; // lấy số lượng của mảng
function maxPriceRemove(products) {
const price = []; // tạo mảng giá
for (let i = 0; i < products.length; i++) {
let ps = products[i].split(" "); // mảng tách tên và giá
let x = ps.length - 1; // lấy vị trí của giá trong mảng vừa tách
let pr = parseFloat(ps[x]); // lấy giá và chuyển thành giá trị số
price[i] = pr; // đưa giá sản phẩm vào mảng
}
let maxPrice = Math.max(...price); // tìm được giá trị lớn nhất trong mảng
let maxProducts; let v;
for (let j = 0; j < products.length; j++) {
let ps = products[j].split(" "); // mảng tách tên và giá
let x = ps.length - 1; // lấy vị trí của giá trong mảng vừa tách
let pr = parseFloat(ps[x]); // lấy giá và chuyển thành giá trị số
if (pr === maxPrice) { // so sánh
maxProducts = products[j]; // lấy được sản phẩm có giá cao nhất
v = j; break} // tìm được vị trí của sản phẩm có giá cao nhất trong mảng, tìm đc thì bẻ vòng lặp luôn
}
products.splice(v,1); //loại bỏ sản phẩm có giá lớn nhất của product để vòng lặp sau sẽ tìm được sản phẩm có giá lớn thứ nhì
return maxProducts; // trả kết quả về hàm
}
const rankProducts = []; // tạo mảng sản phẩm đã sắp xếp
for (let i = 0; i < count; i++) {
rs = maxPriceRemove(products); // lấy sản phầm có giá lớn nhất
rankProducts[i] = rs; // đưa nó vào mảng
}
document.getElementById("demo").innerHTML = rankProducts; // show các sản phẩm có giá từ cao đến thấp ra màn hình
</script> Hẹn gặp lại các bạn trong các bài viết khác.