Lặp lại mảng JavaScript – javascript lặp qua mảng

Bạn đang xem : javascript lặp qua mảng

Lặp lại mảng JavaScript

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

Mảng JavaScript forEach ()

Phương thức forEach () 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.

Ví dụ

số const = [45, 4, 9, 16, 25];
let txt = “”;
number.forEach (myFunction);

hàm myFunction (giá trị, chỉ số, mảng) {

txt + = value + “& lt; br & gt;”;
}

Hãy tự mình thử »

Lưu ý rằng hàm có 3 đối số:

  • Giá trị mặt hàng
  • Chỉ mục 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
tới:

Ví dụ

số const = [45, 4, 9, 16, 25];
let txt = “”;
number.forEach (myFunction);

hàm myFunction (giá trị) {

txt + = value + “& lt; br & gt;”;
}

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 chức năng trên mỗi phần tử của mảng.

Phương thức map () không thực thi hàm cho mảng
các phần tử 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 number1 = [45, 4, 9, 16, 25];
const number2 = number1.map (myFunction);

hàm myFunction (giá trị, chỉ số, mảng) {
trả về giá trị * 2;
}

Hãy tự mình thử »

Lưu ý rằng hàm có 3 đối số:

  • Giá trị mặt hàng
  • Chỉ mục mục
  • Bản thân mảng

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

Ví dụ

const number1 = [45, 4, 9, 16, 25];
const number2 = number1.map (myFunction);

hàm myFunction (giá trị) {
trả về giá trị * 2;
}

Hãy tự mình thử »

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ụ

số const = [45, 4, 9, 16, 25];
const over18 = number.filter (myFunction);

hàm myFunction (giá trị, chỉ mục, mảng) {
giá trị trả về & gt; 18;
}

Hãy tự mình thử »

Lưu ý rằng hàm có 3 đối số:

  • Giá trị mặt hàng
  • Chỉ mục mục
  • Bản thân mảng

Trong ví dụ trên, hàm gọi lại không sử dụng chỉ mục và mảng
nên có thể bỏ qua chúng:

Ví dụ

số const = [45, 4, 9, 16, 25];
const over18 =
number.filter (myFunction);

function myFunction (value) {
giá trị trả về & gt; 18;
}

Hãy tự mình thử »

JavaScript Array Reduce ()

Phương thức Reduce () chạy một hàm trên mỗi phần tử mảng để tạo (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 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ụ

số const = [45, 4, 9, 16, 25];
let sum = number.reduce (myFunction);

hàm myFunction (tổng, giá trị, chỉ số, mảng) {
trả về tổng + giá trị;
}

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ặt hàng
  • Chỉ mục mục
  • Bản thân mảng

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

Ví dụ

số const = [45, 4, 9, 16, 25];
let sum = number.reduce (myFunction);

hàm myFunction (tổng số, giá trị) {
trả về tổng + giá trị;
}

Hãy tự mình thử »

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

Xem Thêm  Cách thêm hình ảnh & hình nền trong HTML - thêm hình ảnh vào html

Ví dụ

số const = [45, 4, 9, 16, 25];
let sum = number.reduce (myFunction,
100);

hàm myFunction (tổng, giá trị) {
trả về tổng + giá trị;
}

Hãy tự mình thử »

JavaScript Array ReduceRight ()

Phương thức ReduceRight () chạy một hàm trên mỗi phần tử mảng để tạo (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ụ

số const = [45, 4, 9, 16, 25];
let sum = number.reduceRight (myFunction);

hàm myFunction (tổng, giá trị, chỉ số, mảng) {
trả về tổng + giá trị;
}

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ặt hàng
  • Chỉ mục mục
  • Bản thân mảng

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

Ví dụ

số const = [45, 4, 9, 16, 25];
let sum = number.reduceRight (myFunction);

hàm myFunction (tổng, giá trị) {
trả về tổng + giá trị;
}

Hãy tự mình thử »

Mảng JavaScript every ()

Phương thức every () kiểm tra xem tất cả các giá trị của mảng có vượt qua được 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ụ

số const = [45, 4, 9, 16, 25];
let allOver18 =
number.every (myFunction);

hàm myFunction (giá trị, chỉ mục, mảng) {
trở về
giá trị & gt; 18;
}

Hãy tự mình thử »

Lưu ý rằng hàm có 3 đối số:

  • Giá trị mặt hàng
  • Chỉ mục mục
  • Bản thân mảng

Khi một hàm gọi lại chỉ sử dụng tham số đầu tiên (giá trị), thì
có thể bỏ qua các tham số:

Ví dụ

số const = [45, 4, 9, 16, 25];
let allOver18 =
number.every (myFunction);

chức năng myFunction (giá trị) {
trả về
giá trị & gt; 18;
}

Hãy tự mình thử »

JavaScript Array some ()

Phương thức some () kiểm tra xem một số giá trị mảng có vượt qua được 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ụ

số const = [45, 4, 9, 16, 25];
let someOver18 =umbers.some (myFunction);

hàm myFunction (giá trị, chỉ số, mảng) {
trở về
giá trị & gt; 18;
}

Hãy tự mình thử »

Lưu ý rằng hàm có 3 đối số:

  • Giá trị mặt hàng
  • Chỉ mục mục
  • Bản thân mảng

JavaScript Array indexOf ()

Phương thức indexOf () tìm kiếm một giá trị phần tử trong 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.

Ví dụ

Tìm kiếm một mảng cho mục “Apple”:

const fruit = [“Apple”, “Orange”, “Apple”, “Mango”];
let position = fruit.indexOf (“Apple”) + 1;

Hãy tự mình thử »

Cú pháp

.indexOf (mục, bắt đầu)

mục
Yêu cầu. Mục cần tìm kiếm.

bắt đầu
Không bắt buộc. Bắt đầu tìm kiếm ở đâu. Giá trị âm sẽ bắt đầu ở vị trí đã cho đếm từ cuối và tìm kiếm đến cuối.

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

Nếu mục xuất hiện nhiều lần, nó sẽ trả về vị trí của mục đầu tiên
sự xuất hiện.

Mảng JavaScript lastIndexOf ()

Array.lastIndexOf () giống với 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.

Ví dụ

Tìm kiếm một mảng cho mục “Apple”:

const fruit = [“Apple”, “Orange”, “Apple”, “Mango”];
let position = fruit.lastIndexOf (“Apple”) + 1;

Hãy tự mình thử »

Xem Thêm  Hình ảnh nền trung tâm trong CSS - trung tâm ảnh nền css

Cú pháp

.lastIndexOf (mục, bắt đầu)

mục
Yêu cầu. Mục cần tìm kiếm

bắt đầu
Không bắt buộc. Bắt đầu tìm kiếm ở đâu. Giá trị âm sẽ bắt đầu ở vị trí đã cho đếm từ cuối và tìm kiếm từ đầu

Tìm mảng JavaScript ()

Phương thức find () trả về giá trị của phần tử mảng đầu tiên vượt qua một
chức năng 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
trên 18 tuổi:

Ví dụ

số const = [4, 9, 16, 25, 29];
hãy để trước =
number.find (myFunction);

hàm myFunction (giá trị, chỉ mục, mảng) {
trả về
giá trị & gt; 18;
}

Hãy tự mình thử »

Lưu ý rằng hàm có 3 đối số:

  • Giá trị mặt hàng
  • Chỉ mục mục
  • Bản thân mảng

Hỗ trợ trình duyệt

find () là một tính năng ES6 (JavaScript 2015).

Nó được hỗ trợ trong tất cả các trình duyệt hiện đại:

Trình duyệt Chrome
Bờ rìa
Firefox
Cuộc đi săn
Opera

Đúng
Đúng
Đúng
Đúng
Đúng

find () không được hỗ trợ trong Internet Explorer.

Mảng JavaScript findIndex ()

Phương thức findIndex () trả về chỉ mục của phần tử mảng đầu tiên
vượt qua một chức năng 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:

Ví dụ

số const = [4, 9, 16, 25, 29];
hãy để trước =
number.findIndex (myFunction);

hàm myFunction (giá trị, chỉ mục, mảng) {
trở về
giá trị & gt; 18;
}

Hãy tự mình thử »

Lưu ý rằng hàm có 3 đối số:

  • Giá trị mặt hàng
  • Chỉ mục mục
  • Bản thân mảng

Hỗ trợ trình duyệt

findIndex () là một tính năng ES6 (JavaScript 2015).

Nó được hỗ trợ trong tất cả các trình duyệt hiện đại:

Trình duyệt Chrome
Bờ rìa
Firefox
Cuộc đi săn
Opera

Đúng
Đúng
Đúng
Đúng
Đúng

findIndex () không được hỗ trợ trong Internet Explorer.

JavaScript Array.from ()

Phương thức Array.from () trả về một đối tượng Mảng từ bất kỳ đối tượng nào có độ dài
tài sản hoặc bất kỳ đối tượng có thể lặp lại nào.

Ví dụ

Tạo một mảng từ một chuỗi:

Array.from (“ABCDEFG”);

Hãy tự mình thử »

Hỗ trợ trình duyệt

from () là một tính năng ES6 (JavaScript 2015).

Nó được hỗ trợ trong tất cả các trình duyệt hiện đại:

Trình duyệt Chrome
Bờ rìa
Firefox
Cuộc đi săn
Opera

Đúng
Đúng
Đúng
Đúng
Đúng

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 Trình lặp mảng, chứa các khóa của mảng:

const trái cây = [“Chuối”, “Cam”, “Táo”, “Xoài”];
const key = fruit.keys ();

cho (để x trong số các phím) {
text + = x + “& lt; br & gt;”;
}

Hãy tự mình thử »

Hỗ trợ trình duyệt

key () 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:

Trình duyệt Chrome
Bờ rìa
Firefox
Cuộc đi săn
Opera

Đúng
Đúng
Đúng
Đúng
Đúng

key () không được hỗ trợ trong Internet Explorer.

Mục nhập mảng ()

Ví dụ

Tạo một Trình lặp lại mảng, sau đó lặp lại các cặp khóa / giá trị:

const trái cây = [“Chuối”, “Cam”, “Táo”, “Xoài”];
const f = fruit.entries ();

for (let x of f) {
document.getElementById (“demo”). innerHTML + = x;
}

Hãy tự mình thử »

Phương thức entry () trả về đối tượng Trình lặp mảng với các cặp khóa / giá trị:

[0, “Banana”]
[1, “Orange”]
[2, “Apple”]
[3, “Mango”]

Phương thức entry () không thay đổi mảng ban đầu.

Hỗ trợ trình duyệt

entry () là một tính năng của ES6 (JavaScript 2015).

Xem Thêm  SanTienAo là gì? Hướng dẫn mua bán A-Z trên SanTienAo - santienao 24h

Nó được hỗ trợ trong tất cả các trình duyệt hiện đại:

Trình duyệt Chrome
Bờ rìa
Firefox
Cuộc đi săn
Opera

Đúng
Đúng
Đúng
Đúng
Đúng

entry () không được hỗ trợ trong Internet Explorer.

Mảng JavaScript bao gồm ()

ECMAScript 2016 đã giới thiệu Array.includes () cho các mảng.
Điều này cho phép chúng tôi kiểm tra xem một phần tử có trong một mảng hay không (bao gồm NaN, không giống như indexOf).

Ví dụ

const trái cây = [“Chuối”, “Cam”, “Táo”, “Xoài”];

Fruit.includes (“Xoài”); // là đúng

Hãy tự mình thử »

Cú pháp

.includes (tìm kiếm-mục)

Array.includes () cho phép kiểm tra các giá trị NaN. Không giống như Array.indexOf ().

Array.includes () không được hỗ trợ trong Internet Explorer và Edge 12/13.

Các phiên bản trình duyệt đầu tiên được hỗ trợ đầy đủ là:

Hỗ trợ trình duyệt

include () là một tính năng của ECMAScript 2016.

Nó được hỗ trợ trong tất cả các trình duyệt hiện đại:

Trình duyệt Chrome
Bờ rìa
Firefox
Cuộc đi săn
Opera

Đúng
Đúng
Đúng
Đúng
Đúng

include () không được hỗ trợ trong Internet Explorer.

Toàn bộ tham chiếu mảng

Để tham khảo đầy đủ về Mảng, hãy truy cập:

Toàn bộ tham chiếu mảng JavaScript .

Tham chiếu chứa các mô tả và ví dụ về tất cả Mảng
thuộc tính và phương thức.


Xem thêm những thông tin liên quan đến chủ đề javascript lặp qua mảng

Asynchronous Programming Trong JavaScript: Thứ Tự Thực Hiện Micro Task, Macro Task

  • Tác giả: Lập Trình Thật Kỳ Diệu
  • Ngày đăng: 2020-02-27
  • Đánh giá: 4 ⭐ ( 6408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Asynchronous Programming Trong JavaScript: Thứ Tự Thực Hiện Micro Task, Macro Task
    ► Facebook Page: \r
    https://www.facebook.com/LapTrinhThatKyDieu/\r
    ► Facebook Group: https://www.facebook.com/groups/laptrinhthatkydieu/\r
    ► Facebook Group Angular Vietnam: https://www.facebook.com/groups/AngularVietnam/

Lặp qua một mảng trong JavaScript

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 6178 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có một vài lựa chọn: 1. forVòng lặp tuần tự : var myStringArray = [“Hello”,”World”];…

Hiểu Rõ Về Các Loại Vòng Lặp Trong Javascript Và Cấu Trúc Từng Loại Vòng Lặp

  • Tác giả: funix.edu.vn
  • Đánh giá: 3 ⭐ ( 7432 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng lặp là một khái niệm rất quen thuộc trong lập trình. Với vòng lặp trong Javascript, chúng thường được dùng để xử lý đối tượng hoặc mảng.

Sử dụng forEach trong javascript

  • Tác giả: codestus.com
  • Đánh giá: 4 ⭐ ( 2443 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi làm việc với mảng bạn thường làm gì, lặp qua một mảng?
    Trong JavaScript, chúng ta có thể sử dụng một số phương thức được cung cấp như map, reduce, etc để lặp mảng

Mảng trong JavaScript | JS ARRAY

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 6201 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu về Mảng (Hay còn gọi là Array), cách tạo và thao tác với Mảng trong JavaScript.

Duyệt mảng trong JavaScript

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 4 ⭐ ( 8056 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách duyệt mảng trong JavaScript. Bạn sẽ học được 3 cách căn bản để duyệt mảng trong JavaScript sau bài học này.

JavaScript: vòng lặp forEach trong mảng

  • Tác giả: www.daipho.com
  • Đánh giá: 5 ⭐ ( 1438 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong JavaScript, Phương thức forEach duyệt qua từng phần tử trong mảng theo thứ tự tăng dần và thực thi một hàm cho mỗi phần tử đó. Phương thức này sẽ

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình