By GokiSoft.Com| 16:46 19/05/2020|
Tài Liệu Javascript

JavaScript Array Iteration Methods - Các phương thức lặp mảng trong JavaScript

Các phương thức lặp mảng hoạt động trên từng phần tử của mảng.


Array.forEach()


Phương thức forEach() gọi một hàm (một hàm callback - gọi lại) mỗi lần cho mỗi thành phần mảng.

ví dụ

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>";
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>


Ghi chú lại hàm đó lấy 3 đối số:

  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính mảng đó


Ví dụ trên chỉ sử dụng tham số giá trị. Ví dụ trên có thể được viết lại thành:

ví dụ

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>


Array.forEach() được hỗ trợ trong tất cả các trình duyệt trừ IE8 hoặc sớm hơn:



Array.map()


Phương thức map() tạo ra một mảng mới bằng thực hiện một hàm trên mỗi thành phần mảng.

Phương thức map() không thực thi chức năng cho các thành phần mảng không có giá trị.

Phương thức map() không thay đổi mảng gốc.

Đây là ví dụ việc nhân mỗi mảng với giá tri bằng 2:

ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}
</script>

</body>
</html>


Ghi chú lại hàm lấy 3 đối số:

  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính mảng đó

Khi một hàm callback chỉ sử dụng tham số giá trị, chỉ số và các tham số mảng còn lại có thể bị bỏ qua:

ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value) {
  return value * 2;
}
</script>

</body>
</html>


Array.map() được hỗ trợ trong tất cả các trình duyệt trừ IE8 :D hoặc sớm hơn.


Array.filter()


Phương thức filter() tạo một mảng mới với các thành phần mảng vượt qua một kiểm tra.

Ví dụ sau tạo ra một mảng mới từ các thành phần với giá trị lớn hơn 18:

ví dụ

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>


Ghi chú lại hàm lấy 3 đối số:

  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính mảng đó

Trong ví dụ trên, hàm callback không sử dụng chỉ số và các tham số mảng, nên chúng có thể bị bỏ qua:

ví dụ

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>


Array.filter() được hỗ trợ trong tất cả các trình duyệt trừ IE8 hoặc sớm hơn.


Array.reduce()


Phương thức reduce() chạy một hàm trên mỗi thành phần mảng để cung cấp (giảm nó thành) một giá trị duy nhất.

Phương thức  reduce() chạy từ trái sang phải trong mảng. Hãy cũng xem reduceRight().

Tip: Phương thức reduce() không giảm đi mảng gốc.

Ví dụ sau tìm tổng của toàn bộ các số trong mảng:

ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>


Ghi chú lại, hàm lấy 4 giá trị:

  • Tổng (giá trị ban đầu/ giá trị trả về trước đó)
  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính array đó

Ví dụ trên không sử dụng chỉ số và các tham số mảng. Nó có thể được viết lại thành:

ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>


Phương thức reduce() có thể chấp nhận giá trị khởi đầu:

ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}


Array.reduce()được hỗ trợ trong tất cả các trình duyệt trừ IE8 hoặc sớm hơn.


Array.reduceRight()


Phương thức reduceRight() chạy một hàm trên mỗi phần tử mảng để cung cấp một giá trị duy nhất.

reduceRight() chạy từ phải sang trái trong mảng. Hãy cũng xem reduce().

Tip: Phương thức reduceRight() không giảm đi mảng gốc.

Ví dụ sau tìm tổng của tất cả các số trong một mảng:

ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduceRight()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>


Ghi chú lại, hàm lấy 4 giá trị:

  • Tổng (giá trị ban đầu/ giá trị trả về trước đó)
  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính array đó

Ví dụ trên không sử dụng chỉ số và các tham số mảng. Nó có thể được viết lại thành:

ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduceRight()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>


Array.reduceRight() được hỗ trợ trong tất cả các trình duyệt trừ IE8 hoặc sớm hơn.



Array.every()


Phương thức every() kiểm trả nếu toàn bộ các giá trị của mảng vượt qua một bài kiểm tra.

Ví dụ này kiểm tra nếu toàn bộ các giá trị của mảng lớn hơn 18:

ví dụ

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.every()</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>


Ghi chú lại, hàm lấy 3 đối số:

  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính mảng đó

Khi một hàm gọi lại chỉ sử dụng tham số giá trị, chỉ số và các tham số mảng còn lại có thể bị bỏ qua:

ví dụ

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.every()</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>


Array.every()  được hỗ trợ trong tất cả các trình duyệt trừ IE8 hoặc sớm hơn.


Array.some()


Phương thức some() kiểm trả nếu toàn bộ các giá trị của mảng vượt qua một bài kiểm tra.

Ví dụ này kiểm trả nếu toàn bộ các giá trị của mảng lớn hơn 18:

ví dụ

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.some()</h2>

<p>The some() method checks if some array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>


Ghi chú lại, hàm lấy 3 đối số:

  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính mảng đó

Array.some()  được hỗ trợ trong tất cả các trình duyệt trừ IE8 hoặc sớm hơn.


Array.indexOf()


Phương thức indexOf() tìm trong một mảng với một giá trị phần tử và trả về vị trí của nó.

Ghi chú: Phần tử đầu tiên có vị trí 0, phần tử thứ hai có vị trí 1, và tiếp diễn.

ví dụ

Tìm trong chuỗi cho phần tử "Apple":

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.indexOf()</h2>


<p id="demo"></p>

<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + a;
</script>

<p>The indexOf() does not work in Internet Explorer 8 and earlier versions.</p>

</body>
</html>


Array.indexOf() được hỗ trợ trong tất cả các trình duyệt trừ IE8 hoặc sớm hơn.


Cú pháp(Syntax)

array.indexOf(item, start)


phần tửCần thiết. Phần tử để tìm.
startTùy chọn. Nơi bắt đầu tìm kiếm. Giá trị âm sẽ bắt đầu từ vị trí được đưa ra tính từ cuối, và tìm đến cuối.

Array.indexOf() trả về  -1 nếu phần tử không tìm thấy.

Nếu phần tử xuất hiện nhiều hơn 1 lần, nó sẽ trả về vị trí của phần tử đầu tiên gặp được.


Array.lastIndexOf()


Array.lastIndexOf() giống Array.indexOf(), nhưng trả về vị trí của tần xuất xảy ra cuối cùng tìm được của một thành phần cụ thể.

ví dụ

Tìm trong một mảng cho phần tử "Apple":

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.lastIndexOf()</h2>


<p id="demo"></p>

<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
</script>

<p>The lastIndexOf() does not work in Internet Explorer 8 and earlier versions.</p>

</body>
</html>


Array.lastIndexOf()  được hỗ trợ trong tất cả các trình duyệt trừ IE8 hoặc sớm hơn.



Syntax

array.lastIndexOf(item, start)
phần tửCần thiết. Phần tử để tìm.
startTùy chọn. Nơi bắt đầu tìm kiếm. Giá trị âm sẽ bắt đầu từ vị trí được đưa ra tính từ cuối, và tìm đến cuối.


Array.find()


Phương thức find() trả về giá trị của phần tử mảng đầu tiên vượt qua hàm kiểm tra.

Ví dụ này tìm (trả về giá trị của) thành phần đầu tiên lớn hơn 18:

ví dụ

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.find()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>


Ghi chú lại, hàm lấy 3 đối số:

  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính mảng đó

Array.find() không được hỗ trợ trong các trình duyệt cũ. Phiên bản trình duyệt đầu tiên với toàn bộ hỗ trợ được liệt kê dưới này:



Array.findIndex()


Phương thức  findIndex() trả về giá trị của phần tử mảng đầu tiên vượt qua hàm kiểm tra.

Ví dụ này tìm (trả về giá trị của) thành phần đầu tiên lớn hơn 18:

ví dụ

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Ghi chú lại, hàm lấy 3 đối số:

  • Giá trị phần tử
  • Chỉ số phần tử
  • Chính mảng đó

Array.findIndex() không được hỗ trợ trong các trình duyệt cũ. Phiên bản trình duyệt đầu tiên với toàn bộ hỗ trợ được liệt kê dưới này:

Tags: