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:

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
Xem Thêm  Cách thêm Trang tính kiểu vào Trang HTML - cách nhập biểu định kiểu trong html

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. Các 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ử »

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

Xem Thêm  Tuyên bố về trường hợp chuyển đổi JavaScript với các ví dụ thực tế - trường hợp chuyển đổi trong js

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).

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

Javascript Arrays – Creating, Accessing and Looping Through Arrays in Javascript

  • Tác giả: Clever Techie
  • Ngày đăng: 2019-09-10
  • Đánh giá: 4 ⭐ ( 8053 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Upgrade your Clever Techie learning experience:
    https://www.patreon.com/clevertechie

    UPDATE! (9/13/19) New features and improvements for Clever Techie Patreons:

    1. Download full source code with detailed comments – easy to learn and understand code
    2. Weekly source code file updates by Clever Techie – every time I learn new things about a topic I will add it to the source file and let you know about the update – keep up with the latest coding technologies
    3. Library of custom Clever Techie functions with descriptive, easy to understand comments – skyrocket coding productivity, code more efficiently by using Clever library of custom re-usable functions
    4. Syntax code summary – memorize and review previously learned code faster
    4. Organized file structure – access all Clever Techie lessons, source code, graphics, diagrams and cheat sheet from a single workspace – no more searching around for previously covered material and source code – save enormous amount of time and effort
    5. Outline of topics the source file covers – fast review of all previously learned coding lessons
    6. Access to all full HD 1080p videos with no ads
    7. Console input examples – interactive examples that make it easier to understand and learn coding
    8. Access to updated PHP Programming Book by Clever Techie
    9. Early access to Clever Techie videos

    Subscribe to Clever Techie patreon:
    https://www.patreon.com/clevertechie

    ““““““““““““““““““““““““““““““““““““““““““““““`
    Update (9/10/19)

    THE PROBLEM: There are so many sources to learn programming from, where do we go? How do we make sure all the information
    we are learning from these lessons is organized and quickly accessible so we don’t lose it and forget about? How do we
    combine the programming concepts that we are learning together to have a bigger picture understanding of how the whole
    programming language works so we can become good programmers able to create web sites, programs and systems? How do we structure our source code and combine it with notes so that the code is easy to understand and lets us jump to different sections of the file so we can quickly refresh our memory of what the code does?

    THE SOLUTION: Clever Techie Patreon:
    https://www.patreon.com/clevertechie

    New features and improvements coming to Clever Techie Patreons:

    Outline of all topics which the source file covers

    2. Syntax code summary
    3. Descriptive code comments
    4. Console input examples
    5. Jump to a topic from outline
    6. Jump to source code from syntax code summary
    7. Organized file structure – access previous lessons, source code, graphics and diagrams from single workspace
    9. Visual code benefits and tools – themes, icons, workspace, breadcrumbs, bookmarks, code snippets
    10. Library of custom functions with descriptive comments
    11. Re-using the code, having quick access to source, notes, libraries, templates, for quicker, more efficient learning and productivity – save enormous amount of time and effort
    12. Source code file updates by Clever Techie – every time I learn new things about a topic I will add it to the source file and let you know about the update

    Subscribe to Clever Techie Patreon here:
    https://www.patreon.com/clevertechie

    “““““““““““““““““““““““““““““““““““““““““““““““

    Download this video’s files here:
    https://www.patreon.com/posts/29868179

    ( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! )

    “““““““““““““““““““““““““““““““““““““““““““““““

    ( Website ) https://clevertechie.com – PHP, JavaScript, WordPress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams.

    ( YouTube Channel ) https://www.youtube.com/c/CleverTechieTube

    ( Google Plus ) https://goo.gl/J71p6f – clever techie video tutorials.

    ( Facebook ) https://www.facebook.com/CleverTechie/

    ( Twitter ) https://twitter.com/theclevertechie

    “““““““““““““““““““““““““““““““““““““““““““““““

Map JavaScript:Hướng dẫn về phương thức .map ()

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 5 ⭐ ( 5842 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Khai báo và duyệt mảng trong javascript

  • Tác giả: mylop.edu.vn
  • Đánh giá: 4 ⭐ ( 7198 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này mình sẽ hướng dẫn cách khai báo mảng và duyệt mảng trong Javascript, bằng cách sử dụng vòng lặp for, while và foreach để lặp.

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

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 8132 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”];…

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

  • Tác giả: www.daipho.com
  • Đánh giá: 5 ⭐ ( 1717 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ẽ

Sử dụng forEach trong javascript

  • Tác giả: codestus.com
  • Đánh giá: 5 ⭐ ( 8997 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

Vòng lặp for in và for of trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 6226 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng lặp for in và for of trong JavaScript – Lập Trình Từ Đầu 1 JavaScript Căn Bản

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

Xem Thêm  Mảng Python với các ví dụ - truy cập mảng trong python

By ads_php