Trong bài đăng ngắn này, chúng ta sẽ khám phá phương thức Array.find siêu hữu ích của JavaScript để giúp tìm một mục duy nhất trong một mảng!

Bạn đang xem : mảng javascript tìm mục

Mặc dù chúng tôi tin rằng nội dung này mang lại lợi ích cho cộng đồng của chúng tôi, nhưng chúng tôi vẫn chưa xem xét kỹ lưỡng nội dung đó. Nếu bạn có bất kỳ đề xuất cải tiến nào, vui lòng cho chúng tôi biết bằng cách nhấp vào nút “báo cáo sự cố” ở cuối hướng dẫn.

Phương thức JavaScript Array.find là một cách thuận tiện để tìm và trả về lần xuất hiện đầu tiên của một phần tử trong một mảng, trong một hàm kiểm tra đã xác định. Khi bạn muốn lấy một cây kim từ đống cỏ khô, hãy lấy find () !

Khi nào thì sử dụng Array.find

Hàm và cú pháp của find () rất giống phương thức Array.filter , ngoại trừ phương thức này chỉ trả về một phần tử duy nhất. Một điểm khác biệt nữa là khi không tìm thấy gì, phương thức này trả về giá trị undefined .

Vì vậy, nếu bạn chỉ cần một giá trị duy nhất, hãy sử dụng find () ! Thay vào đó, khi bạn cần tìm / trả về nhiều giá trị, hãy truy cập vào filter () .

Cách sử dụng Array.find

Sử dụng find () thật dễ dàng! Tham số bắt buộc duy nhất của phương pháp này là một hàm kiểm tra và nó có thể đơn giản hoặc phức tạp nếu cần. Ở dạng cơ bản nhất của nó:

  mảng 

.

tìm

(

testingF Chức năng

)

;

Ví dụ đơn giản:

Dưới đây là một ví dụ đơn giản với một mảng chuỗi:

  

const

cây

=

[

"bạch dương"

,

"maple"

,

"sồi"

,

"poplar"

]

;

const

result

=

cây

.

tìm

(

cây

= & gt; cây

.

startVới

(

" m "

)

)

; < / p>

Ở dạng không viết tắt, không phải ES6:

  

const

kết quả

=

cây

.

tìm

(

hàm

< p class = "dấu chấm câu"> (

cây

)

{

trả về

cây

.

startVới

(

" m "

)

;

}

)

;

Sử dụng với các đối tượng:

Chúng tôi cũng có thể sử dụng find () để dễ dàng tìm kiếm các mảng đối tượng!

  

const

cây

=

[

{

tên

:

" bạch dương "

,

đếm

:

4

}

,

{

tên

:

" maple "

,

đếm

:

5

}

,

{

tên

:

" sồi "

,

đếm

:

2

}

]

;

const

result

=

cây

.

tìm

(

cây

= & gt; cây

.

tên

===

"cây sồi"

)

;

Sử dụng cùng một ví dụ, hãy lưu ý nếu chúng tôi sử dụng find () khi một bài kiểm tra có nhiều kết quả, chúng tôi chỉ nhận được giá trị đầu tiên được tìm thấy:

  

const

kết quả

=

cây

.

tìm

(

cây

< p class = "token operator"> = & gt;

tree

.

count

& gt;

2

)

;

Đây là một trường hợp mà bạn có thể nên sử dụng filter () để thay thế. Thấy sự khác biệt?

Mẹo: Tách chức năng kiểm tra

Đôi khi bạn muốn sử dụng lại cùng một hàm kiểm tra find () ở nhiều nơi. Trong trường hợp đó, việc tạo một chức năng kiểm tra riêng có thể thực sự hữu ích.

Hãy trình diễn kỹ thuật này, mở rộng trên các ví dụ trước của chúng tôi:

  

const

rụng rời

=

[

{

tên

:

" bạch dương "

,

đếm

:

4

}

,

{

tên

:

" maple "

,

đếm

:

5

}

,

{

tên

:

" sồi "

,

đếm

:

2

}

]

;

const

evergreens

=

[

{

tên

:

" cedar "

,

đếm

:

2

}

,

{

tên

:

" linh sam "

,

đếm

:

6

}

,

{

tên

:

" thông "

,

đếm

:

3

}

]

;

const

hasFiveOrMore

=

el

= & gt;

el

.

đếm

& gt; =

5

;

const

decResult

=

suy đồi

.

tìm

(

hasFiveOrMore

)

;

const

evgResult

=

evergreens

.

tìm thấy

(

hasFiveOrMore

)

;

Đơn giản, nhưng mạnh mẽ! 💪

Sử dụng tham số chỉ mục

Giống như filter () , có một tham số index tùy chọn mà chúng tôi có thể sử dụng. Đây là một ví dụ cuối cùng, sử dụng nó như một phần của chức năng thử nghiệm của chúng tôi:

  

const

evergreens

=

[

{

tên

:

" cedar "

,

đếm

:

2

}

,

{

tên

:

" bốn "

,

đếm

:

6

}

,

{

tên

:

" thông "

,

đếm

:

3

}

]

;

const

result

=

evergreens

.

find

(

(

cây

,

i

)

= & gt;

{

nếu

(

cây

.

đếm

& gt;

1

& amp; & amp;

trong

! ==

0

)

trả về

< p class = "token boolean"> true

;

}

)

;

index

có thể không phải là thứ bạn cần thường xuyên - nhưng thật tuyệt khi luôn có sẵn

Kết luận

Array.find là một phương pháp đơn giản nhưng cực kỳ hữu ích để tìm kiếm các mảng JavaScript. Có một số phương pháp hữu ích có sẵn trên mảng, để có hướng dẫn đầy đủ hơn, hãy xem Cách sử dụng phương thức mảng trong JavaScript: Phương thức lặp lại

Chỉ cần nhớ: chỉ sử dụng find khi bạn muốn trả về một phần tử duy nhất và nó trả về undefined nếu không tìm thấy gì! Nếu không, hãy sử dụng phương thức filter khi bạn cần trả về nhiều phần tử


Xem thêm những thông tin liên quan đến chủ đề mảng javascript tìm mục

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

  • Tác giả: Clever Techie
  • Ngày đăng: 2019-09-10
  • Đánh giá: 4 ⭐ ( 8475 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

    ``````````````````````````````````````````````````````````````````````````````````````````````

Mảng trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 6741 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng trong JavaScript - JS Array - Lập Trình Từ Đầu 1 JavaScript Căn Bản

Cách tìm một mục trong một mảng bằng JavaScript

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

Mảng trong javascript

  • Tác giả: www.offjs.com
  • Đánh giá: 5 ⭐ ( 8625 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng là một đối tượng lưu trử nhiều giá trị theo chỉ mục index

Tìm hiểu về mảng trong JavaScript

  • Tác giả: itzone.com.vn
  • Đánh giá: 3 ⭐ ( 4622 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

Mảng (Array) trong JavaScript

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 3 ⭐ ( 9299 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng Array - Mảng giúp bạn lưu giữ nhiều giá trị trong một biến đơn. Nó lưu giữ một tập hợp theo dãy có kích cỡ cố định của các phần tử trong cùng kiểu (type).

Tìm hiểu về Array (mảng) trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 4074 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Hôm nay mình sẽ giới thiệu cho các bạn một kiểu dữ liệu trong Javascript, đó là Array. Nó sẽ giúp bạn có thể biểu diễn được những dữ liệu phức tạp và dễ dàng hơn trong việc quản lí cũng như...

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  datetime (Transact-SQL) - SQL Server - cách nhập datetime trong sql

By ads_php