IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Array Iteration Methods - Các phương thức lặp mảng trong JavaScript

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

by GokiSoft.Com - 16:46 19/05/2020 3,296 Lượt Xem

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:

Bình luận



Tài Liệu Tham Khảo

Đã sao chép!!!