Lặp lại mảng JavaScript
Phương thức lặp mảng hoạt động trên mọi mục của mảng.
Mảng JavaScript forEach ()
Phương forEach()thức gọi một hàm (một hàm gọi lại) một lần cho mỗi phần tử mảng.
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Lưu ý rằng hàm có 3 đối số:
- Giá trị mặt hàng
- Mục lục
- Chính mảng
Ví dụ trên chỉ sử dụng tham số giá trị. Ví dụ có thể được viết lại thành:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
Bản đồ mảng JavaScript ()
Phương map()thức tạo một mảng mới bằng cách thực hiện một chức năng trên mỗi phần tử của mảng.
Phương map()thức không thực thi hàm cho các phần tử mảng không có giá trị.
Phương map()thức không thay đổi mảng ban đầu.
Ví dụ này nhân mỗi giá trị mảng với 2:
Thí dụ
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Lưu ý rằng hàm có 3 đối số:
- Giá trị mặt hàng
- Mục lục
- Chính mảng
Khi một hàm gọi lại chỉ sử dụng tham số giá trị, các tham số chỉ mục và mảng có thể bị bỏ qua:
Thí dụ
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Bộ lọc mảng JavaScript ()
Phương filter()thức này tạo một mảng mới với các phần tử mảng vượt qua một bài kiểm tra.
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:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Lưu ý rằng hàm có 3 đối số:
- Giá trị mặt hàng
- Mục lục
- Chính mảng
Trong ví dụ trên, hàm gọi lại không sử dụng các tham số chỉ mục và mảng, vì vậy chúng có thể bị bỏ qua:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Mảng JavaScript giảm ()
Phương reduce()thức này chạy một hàm trên mỗi phần tử mảng để tạo ra (giảm nó thành) một giá trị duy nhất.
Phương reduce()thức hoạt động từ trái sang phải trong mảng. Xem thêm reduceRight().
Phương reduce()thức này 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:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Lưu ý rằng hàm có 4 đối số:
- Tổng (giá trị ban đầu / giá trị trả về trước đó)
- Giá trị mặt hàng
- Mục lục
- Chính mảng
Ví dụ trên không sử dụng tham số chỉ mục và mảng. Nó có thể được viết lại thành:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Phương reduce()thức có thể chấp nhận một giá trị ban đầu:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
JavaScript Array ReduceRight ()
Phương reduceRight()thức này chạy một hàm trên mỗi phần tử mảng để tạo ra (giảm nó thành) một giá trị duy nhất.
Các reduceRight()công việc từ phải sang trái trong mảng. Xem thêm reduce().
Phương reduceRight()thức này 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:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Lưu ý rằng hàm có 4 đối số:
- Tổng (giá trị ban đầu / giá trị trả về trước đó)
- Giá trị mặt hàng
- Mục lục
- Chính mảng
Ví dụ trên không sử dụng tham số chỉ mục và mảng. Nó có thể được viết lại thành:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
JavaScript Array every ()
Phương every()thức kiểm tra xem tất cả các giá trị của mảng có vượt qua kiểm tra 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:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Lưu ý rằng hàm có 3 đối số:
- Giá trị mặt hàng
- Mục lục
- Chính mảng
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:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
JavaScript Array some ()
Phương some()thức kiểm tra xem một số giá trị mảng có vượt qua kiểm tra 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:
Thí dụ
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Lưu ý rằng hàm có 3 đối số:
- Giá trị mặt hàng
- Mục lục
- Chính mảng
JavaScript Array indexOf ()
Phương indexOf()thức tìm kiếm một giá trị phần tử trong một mảng và trả về vị trí của nó.
Lưu ý: Mục đầu tiên có vị trí 0, mục thứ hai có vị trí 1, v.v.
Thí dụ
Tìm kiếm một mảng cho mục "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Cú pháp
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf()trả về -1 nếu mục không được tìm thấy.
Nếu mục 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.
JavaScript Array 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.
Thí dụ
Tìm kiếm một mảng cho mục "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Cú pháp
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
JavaScript Array find ()
Phương find()thức trả về giá trị của phần tử mảng đầu tiên vượt qua một hàm kiểm tra.
Ví dụ này tìm (trả về giá trị của) phần tử đầu tiên lớn hơn 18:
Thí dụ
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Lưu ý rằng hàm có 3 đối số:
- Giá trị mặt hàng
- Mục lục
- Chính mảng
Hỗ trợ trình duyệt
find() là một tính năng của ES6 (JavaScript 2015).
Nó được hỗ trợ trong tất cả các trình duyệt hiện đại:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() không được hỗ trợ trong Internet Explorer.
JavaScript Array findIndex ()
Phương findIndex()thức trả về chỉ số của phần tử mảng đầu tiên vượt qua một hàm kiểm tra.
Ví dụ này tìm chỉ mục của phần tử đầu tiên lớn hơn 18:
Thí dụ
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Lưu ý rằng hàm có 3 đối số:
- Giá trị mặt hàng
- Mục lục
- Chính mảng
Hỗ trợ trình duyệt
findIndex() là một tính năng của ES6 (JavaScript 2015).
Nó được hỗ trợ trong tất cả các trình duyệt hiện đại:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() không được hỗ trợ trong Internet Explorer.
JavaScript Array.from ()
Phương Array.from()thức 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.
Thí dụ
Tạo một mảng từ một chuỗi:
Array.from("ABCDEFG");
Hỗ trợ trình duyệt
from() là một tính năng của ES6 (JavaScript 2015).
Nó được hỗ trợ trong tất cả các trình duyệt hiện đại:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() không được hỗ trợ trong Internet Explorer.
Khóa mảng JavaScript ()
Phương Array.keys()thức này trả về một đối tượng Array Iterator với các khóa của một mảng.
Thí dụ
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.