Trong bài trước chúng ta đã được làm quen với các phương thức sắp xếp mảng. Trong bài này wecode sẽ giới thiệu với các bạn các phương pháp duyệt mảng.
Duyệt mảng trong java là quá trình truy cập từng phần tử của một mảng. Duyêt mảng thường được thực hiện bắt đầu với phần tử đầu tiên và cho đến khi kết thúc mảng. Tuy nhiên, nó cũng có thể duyệt theo chiều ngược lại hoặc bỏ qua các phần tử của mảng. Trong bài này, chúng ta sẽ tập trung vào việc duyệt một mảng bằng các phương thức mà không cần xử dụng các vòng lặp
Duyệt mảng với phương thức forEach()
Phương thức forEach() gọi một hàm mỗi lần cho mỗi phần tử mảng.
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>Calls a function once for each array element.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + " ";
}
</script>
</body>
</html>Trong ví dụ trên chúng ta thấy hàm myFuntion của chúng ta có chứa 3 tham số:
- value
- index
- array
Tuy nhiên chúng ta chỉ sử dụng có một tham số value, vì vậy ví dụ trên có thể được viết lại như sau:
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>Gọi hàm một lần cho mỗi phần tử của mảng.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + " ";
}
</script>
</body>
</html>Phương thức map()
- Phương thức map () tạo một mảng mới bằng cách thực hiện một hàm trên mỗi phần tử mảng.
- Phương thức map () không thực thi hàm cho các phần tử mảng không có giá trị.
- Phương thức map () không thay đổi mảng ban đầu.
Ví dụ này nhân mỗi giá trị của mảng với 2:
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p>Tạo một mảng mới bằng cách thực hiện một hàm trên mỗi phần tử.</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>Trong ví dụ trên chúng ta thấy hàm myFuntion của chúng ta có chứa 3 tham số:
- value
- index
- array
Tuy nhiên chúng ta chỉ sử dụng có một tham số value, vì vậy ví dụ trên có thể được viết lại như sau:
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p>Tạo một mảng mới bằng cách thực hiện một hàm trên mỗi phần tử.</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>Phương thức filter()
Phương thức filter () tạo một mảng mới với các phần tử của mảng thỏa mãn điều kiện
Ví dụ này tạo một mảng mới từ các phần tử có giá trị lớn hơn 18:
<html>
<body>
<h2>JavaScript Array.filter()</h2>
<p>Tạo ra một mảng mới với các phần tử thỏa mãn điều kiện >18.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>Phương thức reduce()
- Phương thức Reduce () chạy một hàm trên mỗi phần tử mảng để tạo thành một giá trị duy nhất.
- Phương thức Reduce () hoạt động từ trái sang phải trong mảng.
- Phương thức Reduce () không giảm mảng ban đầu.
Ví dụ này tìm tổng của tất cả các số trong một mảng:
<html>
<body>
<h2>JavaScript Array.reduce()</h2>
<p>Ví dụ này tính tổng tất cả các phần tử của mảng:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "Tổng các phần tử = " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>Lưu ý rằng hàm có 4 tham số:
Total (giá trị ban đầu / giá trị trả về trước đó)
- Value
- Index
- Array
Tuy nhiên chúng ta không sử dụng tham số index và array. Nên chúng ta có thể được viết lại thành:
<html>
<body>
<h2>JavaScript Array.reduce()</h2>
<p>Ví dụ này tính tổng tất cả các phần tử của mảng:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "Tổng các phần tử = " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>Phương thức Reduce () có thể chấp nhận một giá trị khởi tạo ban đầu:
<html>
<body>
<h2>JavaScript Array.reduce()</h2>
<p>Ví dụ này tính tổng tất cả các phần tử của mảng</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>Phương thức reduceRight()
- Phương thức ReduceRight () gọi một hàm trên mỗi phần tử mảng để tạo thành một giá trị duy nhất.
- ReduceRight () hoạt động từ phải sang trái trong mảng.
- Phương thức ReduceRight () không làm giảm mảng ban đầu.
Ví dụ này tìm tổng của tất cả các số trong một mảng:
<html>
<body>
<h2>JavaScript Array.reduceRight()</h2>
<p>Ví dụ này tính tổng tất cả các phần tử trong mảng:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>Phương thức every()
Phương thức every () kiểm tra xem tất cả các giá trị của mảng có thỏa mãn điều kiện đưa ra hay không.
Ví dụ này kiểm tra xem tất cả các giá trị mảng có lớn hơn 18 hay không:
<html>
<body>
<h2>JavaScript Array.every()</h2>
<p>Phương thức every() kiểm tra xem tất cả các phần tử của mảng có thỏa mãn điều kiện (>18) hay không.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "Tất cả các phần tử lớn hơn 18: " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Lưu ý rằng hàm có 3 tham số:
- Value
- Index
- array
Khi một hàm gọi lại chỉ sử dụng tham số đầu tiên (giá trị), các tham số khác có thể bị bỏ qua, vì vậy ta có thể viết lại ví dụ như sau:
<html>
<body>
<h2>JavaScript Array.every()</h2>
<p>Phương thức every() kiểm tra xem tất cả các phần tử của mảng có thỏa mãn điều kiện (>18) hay không.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "Tất cả các phần tử lớn hơn 18: " + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>Phương thức some()
Phương thức some () kiểm tra xem một số giá trị mảng có thỏa mãn điều kiện đưa ra hay không.
Ví dụ này kiểm tra xem một số giá trị mảng có lớn hơn 18 hay không:
<html>
<body>
<h2>JavaScript Array.some()</h2>
<p>Phương thức some() kiểm tra xem có một số giá trị của mảng thỏa mãn điều kiện hay không.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Mảng có một vài giá trị lớn hơn 18: " + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>Phương thức indexOf()
Phương thức indexOf () tìm kiếm một giá trị phần tử trong mảng và trả về vị trí của nó.
<html>
<body>
<h2>JavaScript Array.indexOf()</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Orange") + 1;
document.getElementById("demo").innerHTML = "Orange có vị trí trong mảng là: " + position;
</script>
</body>
</html>Lưu ý: phần tử đầu tiên của mảng có vị trí =0, vì thế vị trí thực tế của Orange trong ví dụ trên là 1.
Cú pháp của phương thức
array.indexOf(item, start)Trong đó:
- item (tham số bắt buộc): giá trị cần tìm
- start (tham số tùy chọn): vị trí bắt đầu tìm kiếm. Giá trị là âm sẽ bắt đầu ở vị trí đã cho tính từ bên phải (đếm từ cuối ) và tìm kiếm đến cuối.
Array.indexOf () trả về -1 nếu không tìm thấy giá trị cần tìm.
Nếu giá trị cần tìm xuất hiện nhiều hơn một lần, nó sẽ trả về vị trí của lần xuất hiện đầu tiên.
Phương thức lastIndexOf()
Array.lastIndexOf () giống như Array.indexOf (), nhưng trả về vị trí của lần xuất hiện cuối cùng của phần tử được chỉ định.
Cú pháp phương thức
array.lastIndexOf(item, start)Trong đó:
- item (tham số bắt buộc): giá trị cần tìm
- start (tham số tùy chọn): vị trí bắt đầu tìm kiếm. Giá trị là âm sẽ bắt đầu ở vị trí đã cho tính từ bên phải (đếm từ cuối ) và tìm kiếm đến cuối.
<html>
<body>
<h2>JavaScript Array.lastIndexOf()</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Vị trí cuối cùng được tìm thấy của Apple: " + position;
</script>
</body>
</html>Phương thức find()
Phương thức find () trả về giá trị của phần tử mảng đầu tiên thỏa mãn điều kiện.
Ví dụ này tìm phần tử đầu tiên lớn hơn 18:
<html>
<body>
<h2>JavaScript Array.find()</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "Phần tử đầu tiên lớn hơn 18 là: " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>Phương thức find() không hỗ trợ trên trình duyệt Internet Explorer.
Phương thức findIndex()
Phương thức findIndex () trả về chỉ số của phần tử mảng đầu tiên thỏa mãn điều kiện đưa ra.
Ví dụ này tìm vị trí của phần tử đầu tiên lớn hơn 18:
<html>
<body>
<h2>JavaScript Array.find()</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
document.getElementById("demo").innerHTML = "Vị trí của phần tử đầu tiên lớn hơn 18 là: " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>Phương thức findIndex() không hỗ trợ trên trình duyệt Internet Explorer.
Phương thức from()
Phương thức Array.from () trả về một đối tượng Array từ bất kỳ đối tượng nào có thuộc tính length hoặc bất kỳ đối tượng nào có thể lặp lại.
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Phương thức Array.from() trả về một đối tượng Mảng từ mỗi chuỗi.</p>
<p id="demo"></p>
<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = "Mảng được tạo ra: "+myArr;
</script>
<p>Phương thức Array.from() không hỗ trợ trình duyệt Internet Explorer.</p>
</body>
</html>Phương thức keys()
Phương thức Array.keys () trả về một đối tượng Array Iterator với các khóa của một mảng.
Ví dụ sau Tạo một đối tượng Array Iterator, chứa các khóa của mảng:
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Phương thức Array.keys() trả về một mảng Array Iterator gồm các chỉ mục của mảng.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + " ";
}
document.getElementById("demo").innerHTML = text;
</script>
<p>Phương thức Array.keys() không hỗ trợ trình duyệt Internet Explorer.</p>
</body>
</html>Phương thức entries()
Thử ví dụ sau:
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>
<p>entries() trả về một mảng với các cặp key/value:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
<p>Phương thức entries() không hỗ trợ trên trình duyệt Internet Explorer 11 (or earlier).</p>
</body>
</html>Phương thức entries () trả về một đối tượng mảng mới với các cặp khóa / giá trị:
- [0, “Banana”]
- [1, “Orange”]
- [2, “Apple”]
- [3, “Mango”]
Phương thức entries() không làm thay đổi mảng ban đầu.
Phương thức include()
Phương thức Array.includes () cho phép chúng ta kiểm tra xem một phần tử có trong một mảng hay không
Cú pháp của phương thức
array.includes(search-item)Hãy thử ví dụ sau:
<html>
<body>
<h1>Array includes()</h1>
<p>Kiểm tra xem mảng có chứa "Mango" hay không:</p>
<p id="demo"></p>
<p><strong>Note:</strong> Phương thức include() không hỗ trợ trình duyệt Edge 13 (và mới hơn).</p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = "Mảng có chưa Mango: "+fruits.includes("Mango");
</script>
</body>
</html>Trên đây là những hướng dẫn nhanh về các phương thức duyệt mảng. Hy vọng bạn sẽ có nhiều trải nghiệm thú vị hơn với mảng trong Javascript.