Lặp lại mảng JavaScript
Phương pháp lặp mảng
Các phương thức lặp mảng hoạt động trên mọi mục mảng:
Mảng JavaScript choEach()
Phương thức forEach() gọi một hàm (hàm gọi lại) một lần cho mỗi phần tử mảng.
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Hãy tự mình thử »Lưu ý rằng hàm có 3 đối số:
- Giá trị mục
- Chỉ số mục
- Bản thân 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:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
Hãy tự mình thử »Bản đồ mảng JavaScript()
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ị mảng với 2:
Ví dụ
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Hãy tự mình thử »Lưu ý rằng hàm có 3 đối số:
- Giá trị mục
- Chỉ số mục
- Bản thân mảng
Khi 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ể được bỏ qua:
Ví dụ
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Hãy tự mình thử »Mảng JavaScript FlatMap()
ES2019 đã thêm phương thức Array flatMap() vào JavaScript.
Phương thức flatMap() trước tiên ánh xạ tất cả các phần tử của một mảng và sau đó tạo một mảng mới bằng cách làm phẳng mảng đó.
Ví dụ
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);
Hãy tự mình thử »Hỗ trợ trình duyệt
JavaScript Array flatMap() được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ tháng 1 năm 2020:
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
Bộ lọc mảng JavaScript()
Phương thức filter() tạo một mảng mới với các phần tử mảng đã vượt qua 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:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
} Hãy tự mình thử »Lưu ý rằng hàm có 3 đối số:
- Giá trị mục
- Chỉ số mục
- Bản thân mảng
Trong ví dụ trên, hàm callback không sử dụng tham số chỉ mục và mảng nên có thể bỏ qua:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
} Hãy tự mình thử »Giảm mảng JavaScript()
Phương thức reduce() 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 thức reduce() hoạt động từ trái sang phải trong mảng. Xem thêm reduceRight() .
Phương thức reduce() 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:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
} Hãy tự mình thử »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ục
- Chỉ số mục
- Bản thân 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:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
} Hãy tự mình thử » Phương thức reduce() có thể chấp nhận giá trị ban đầu:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
} Hãy tự mình thử »Mảng JavaScript lessRight()
Phương thức reduceRight() 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.
reduceRight() hoạt động từ phải sang trái trong mảng. Xem thêm reduce() .
Phương thức reduceRight() 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:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
} Hãy tự mình thử »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ục
- Chỉ số mục
- Bản thân 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:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
} Hãy tự mình thử »Mảng JavaScript mọi()
Phương thức every() kiểm tra xem tất cả các giá trị mảng có vượt qua bài 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:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Hãy tự mình thử »Lưu ý rằng hàm có 3 đối số:
- Giá trị mục
- Chỉ số mục
- Bản thân mảng
Khi 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í dụ
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
} Hãy tự mình thử »Mảng JavaScript một số()
Phương thức some() kiểm tra xem một số giá trị mảng có vượt qua bài 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:
Ví dụ
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Hãy tự mình thử »Lưu ý rằng hàm có 3 đối số:
- Giá trị mục
- Chỉ số mục
- Bản thân mảng
Mảng JavaScript.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 độ dài hoặc bất kỳ đối tượng có thể lặp lại nào.
Hỗ trợ trình duyệt
from() là một tính năng ES6 (JavaScript 2015).
ES6 được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại kể từ tháng 6 năm 2017:
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |
from() không được hỗ trợ trong Internet Explorer.
Khóa mảng JavaScript()
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ụ
Tạo một đối tượng Array Iterator, chứa các khóa của mảng:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Hãy tự mình thử »Hỗ trợ trình duyệt
keys() là một tính năng ES6 (JavaScript 2015).
ES6 được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại kể từ tháng 6 năm 2017:
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |
keys() không được hỗ trợ trong Internet Explorer.
Mục nhập mảng JavaScript()
Ví dụ
Tạo một Trình vòng lặp mảng, sau đó lặp lại các cặp khóa/giá trị:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
Hãy tự mình thử » Phương entries() trả về một đối tượng Array Iterator với các cặp khóa/giá trị:
[0, "Chuối"]
[1, "Cam"]
[2, "Táo"]
[3, "Xoài"]
Phương thứcentry entries() không thay đổi mảng ban đầu.
Hỗ trợ trình duyệt
entries() là một tính năng ES6 (JavaScript 2015).
ES6 được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại kể từ tháng 6 năm 2017:
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |
entries() không được hỗ trợ trong Internet Explorer.
Mảng JavaScript với phương thức()
ES2023 đã thêm phương thức Array with() như một cách an toàn để cập nhật các phần tử trong một mảng mà không làm thay đổi mảng ban đầu.
Ví dụ
const months = ["Januar", "Februar", "Mar", "April"];
const myMonths = months.with(2, "March");
Hãy tự mình thử »Trải rộng mảng JavaScript (...)
Toán tử ... mở rộng một iterable (như một mảng) thành nhiều phần tử hơn:
Ví dụ
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
Hãy tự mình thử »Hỗ trợ trình duyệt
... là một tính năng ES6 (JavaScript 2015).
ES6 được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại kể từ tháng 6 năm 2017:
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |
... không được hỗ trợ trong Internet Explorer.
Tham chiếu mảng hoàn chỉnh
Để có tài liệu tham khảo Mảng đầy đủ, hãy truy cập:
Tham chiếu mảng JavaScript hoàn chỉnh .
Tham chiếu chứa các mô tả và ví dụ về tất cả các thuộc tính và phương thức của Mảng.
