Javascript Array Loop

23/07/2019

Bài sau » « Bài trước

Array.forEach()

Phương thức forEach() gọi function (callback function) một lần cho mỗi phần tử trong Array.

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>"; }

Function nhận vào 3 tham số:

  • value: Giá trị của item hiện tại
  • index: Chỉ số index của item hiện tại
  • array: Truyền vào mảng hiện tại

Array.forEach() được support trên tất cả các trình duyệt, ngoại trừ trên IE 8 trở về trước.

Array.map()

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

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

Phương thức map() không làm thay đổi giá trị của mảng ban đầu.

var txt = ""; var numbers = [45, 4, 9, 16, 25]; var x = numbers.map(myFunction); document.getElementById("demo").innerHTML = x; // kết quả là 90,8,18,32,50 function myFunction(value, index, array) { return value * 2; }

Function nhận vào 3 tham số:

  • value: Giá trị của item hiện tại
  • index: Chỉ số index của item hiện tại
  • array: Truyền vào mảng hiện tại

Array.map() được support trên tất cả các trình duyệt, ngoại trừ trên IE 8 trở về trước.

Array.filter()

Phương thức filter() tạo ra 1 mảng mới mà thỏa mãn các điều kiện.

var txt = ""; var numbers = [45, 4, 9, 16, 25]; var x = numbers.filter(myFunction); document.getElementById("demo").innerHTML = x; // Kết quả là: 45,25 function myFunction(value, index, array) { return value > 18; }

Function nhận vào 3 tham số:

  • value: Giá trị của item hiện tại
  • index: Chỉ số index của item hiện tại
  • array: Truyền vào mảng hiện tại

Array.filter() được support trên tất cả các trình duyệt, ngoại trừ trên IE 8 trở về trước.

Array.reduce()

Phương thức reduce() lặp các phần tử theo thứ tự từ trái qua phải và giảm chúng thành 1 giá trị.

Phương thức reduceRight() lặp phần tử theo thứ tự từ phải qua trái.

Ví dụ tính tổng các phần tử trong mảng.

var txt = ""; var numbers = [45, 4, 9, 16, 25]; var x = numbers.reduce(myFunction); document.getElementById("demo").innerHTML = x; // kết quả là 99 function myFunction(total, value, index, array) { return total + value; }

Function nhận vào 4 tham số:

  • total: Giá trị ban đầu / giá trị trả về trước đó
  • value: Giá trị của item hiện tại
  • index: Chỉ số index của item hiện tại
  • array: Truyền vào mảng hiện tại

Phương thức reduce() có thể nhận vào giá trị tổng ban đầu.

var txt = ""; var numbers = [45, 4, 9, 16, 25]; var x = numbers.reduce(myFunction, 100); document.getElementById("demo").innerHTML = x; // kết quả là 199 function myFunction(total, value, index, array) { return total + value; }

Array.reduce() được support trên tất cả các trình duyệt, ngoại trừ trên IE 8 trở về trước.

Array.every()

Phương thức every() dùng để check nếu tất cả các phần tử có thỏa mãn điều kiện hay không. Trả về 2 giá trị là: true và false.

Ví dụ check xem các phần tử trong array có lớn hơn 18 hay không ?

var txt = ""; var numbers = [45, 4, 9, 16, 25]; var x = numbers.every(myFunction); document.getElementById("demo").innerHTML = x; // Kết quả biến x là: false function myFunction(value, index, array) { return value > 18; }

Array.every() được support trên tất cả các trình duyệt, ngoại trừ trên IE 8 trở về trước.

Array.some()

Phương thức some() dùng để check nếu một số phần tử có thỏa mãn điều kiện hay không. Trả về 2 giá trị là: true và false.

Ví dụ check xem một số phần tử trong array có lớn hơn 18 hay không ?

var txt = ""; var numbers = [45, 4, 9, 16, 25]; var x = numbers.some(myFunction); document.getElementById("demo").innerHTML = x; // Kết quả biến x là: true function myFunction(value, index, array) { return value > 18; }

Array.some() được support trên tất cả các trình duyệt, ngoại trừ trên IE 8 trở về trước.

Array.indexOf()

Phương thức indexOf() tìm kiếm 1 giá trị có trong Array hay không và trả về vị trí của nó.

var fruits = ["Apple", "Orange", "Apple", "Mango"]; var a = fruits.indexOf("Apple"); // kết quả a là vị trí index = 0

Array.indexOf() được support trên tất cả các trình duyệt, ngoại trừ trên IE 8 trở về trước.

Cú pháp:

Array.indexOf(item, start)

Trong đó :

- item: là giá trị cần tìm kiếm

- start: không bắt buộc - là vị trí bắt đầu tìm kiếm. Nếu giá trị là âm, thì sẽ vị trí sẽ đếm từ cuối Array và tìm kiếm đến cuối.

Array.indexOf() sẽ trả về -1 nếu không tìm thấy kết quả.

Nếu item tìm kiếm có nhiều hơn 1, thì kết quả trả về vị trí của item đầu tiên.

Array.lastIndexOf()

Phương thức lastIndexOf() tương tự với indexOf(), nhưng nó tìm kiếm từ cuối Array trở về trước.

var fruits = ["Apple", "Orange", "Apple", "Mango"]; var a = fruits.lastIndexOf("Apple"); // kết quả a là vị trí index = 2

Array.lastIndexOf() được support trên tất cả các trình duyệt, ngoại trừ trên IE 8 trở về trước.

Array.find()

Phương thức find() trả về giá trị của phần tử array đầu tiên thỏa mãn điều kiện.

Ví dụ tìm giá trị trong Array lớn hơn 18.

var numbers = [4, 9, 16, 25, 29]; var first = numbers.find(myFunction); document.getElementById("demo").innerHTML = "Giá trị đầu tiên lớn hơn 18 là " + first; // Kết quả biến first là 25. function myFunction(value, index, array) { return value > 18; }

Function nhận vào 3 tham số:

  • value: Giá trị của item hiện tại
  • index: Chỉ số index của item hiện tại
  • array: Truyền vào mảng hiện tại

Array.find() không được support trên các phiên bản cũ của trình duyệt. Từ Chrome version 45, IE version 12, Firefox version 25, Safari version 8 và Opera version 32 mới có thể hoạt động. Vì vậy, nên cân nhắc kỹ trước khi dùng.

Array.findIndex()

Phương thức findIndex() tương tự với phương thức find(). Nhưng chỉ khác là findIndex() trả về chỉ số index của phần tử array đầu tiên thỏa mãn điều kiện.

Bài sau » « Bài trước
Back to top