Review Làm cách nào để bạn thực hiện tìm kiếm trong javascript?
Mẹo Hướng dẫn Làm cách nào để bạn thực hiện tìm kiếm trong javascript? Mới Nhất
Bùi Lam Khê đang tìm kiếm từ khóa Làm cách nào để bạn thực hiện tìm kiếm trong javascript? được Update vào lúc : 2022-12-21 17:20:07 . Với phương châm chia sẻ Thủ Thuật Hướng dẫn trong nội dung bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi tham khảo nội dung bài viết vẫn ko hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Tác giả lý giải và hướng dẫn lại nha.Tạo bộ lọc list JavaScript và tìm kiếm bản ghi là một trong những kỹ năng cơ bản dành riêng cho nhà phát triển web
Nội dung chính Show- Chức năng lọc trong JavaScriptTìm kiếm bằng hàm find trong JavaScriptĐiều gì xảy ra nếu find không tìm thấy bất kỳ phần tử nàoTriển khai bộ lọc list JavaScript bằng những vòng lặpCảm ơn bạn đã đăng kýTìm hiểu xem có nhà phát triển nào trong bạn hay là không bằng phương pháp trả lời một số trong những câu hỏiKiểm tra xem mảng có chứa những phần tử hay là không bằng phương pháp sử dụng hiệu suất cao bao gồmLấy chỉ mục của một phần tử bằng find IndexVí dụ về bộ lọc list JavaScriptNền tảng của trang của chúng tôi và cách chúng tôi tải dữ liệuTạo HTML cho trường tìm kiếm và kết quảSử dụng trường tìm kiếm để lọc list trong JavaScriptCách tạo hiệu suất cao tìm kiếm văn bản trong JavaScriptThêm list thả xuống để chọn băng tần vào trang webTriển khai bộ lọc list JavaScript với list thả xuốngKết luận về tìm kiếm và lọc dữ liệuLàm cách nào để thực hiện thao tác tìm kiếm trong JavaScript?Làm cách nào để thực hiện yêu cầu tìm kiếm trong JavaScript?Làm cách nào để tìm kiếm trong chuỗi JavaScript?Làm cách nào để tìm kiếm theo tên trong JavaScript?
Lọc nghĩa là chúng tôi tạo một list những bản ghi ngắn lại, được điều chỉnh phù hợp hơn với mong ước của người tiêu dùng, sử dụng một số trong những giá trị đã biết
Tìm kiếm nghĩa là chúng tôi đang sử dụng cụm từ tìm kiếm không xác định để tìm bản ghi trong list hoặc cơ sở tài liệu. Chúng tôi đã quen với việc tìm kiếm nhiều đến mức nhiều trang chỉ đáp ứng tìm kiếm, không lọc, khuôn khổ. Chúng tôi chỉ cho bạn cách sử dụng cả hai, bạn sẽ sử dụng kỹ thuật nào là tùy thuộc vào bạn.
Làm cách nào chúng tôi hoàn toàn có thể lọc và tìm kiếm trong JavaScript bằng phương pháp sử dụng
- Mảng. lọcMảng. tìm thấyvòng lặpMảng. bao gồmMảng. tìm Index
Đầu tiên, chúng tôi lý giải những hiệu suất cao lọc và tìm kiếm bản ghi, sau đó chúng tôi có một ví dụ rõ ràng hơn, cách bạn hoàn toàn có thể sử dụng kiến thức này khi xây dựng trang web của tớ
Bắt đầu khóa học do người cố vấn của chúng tôi hướng dẫn, nơi người cố vấn của chúng tôi dẫn dắt bạn trên mọi bước đường. Yêu cầu bản dùng thử MIỄN PHÍ của bạn ngay ngày hôm nay
dùng thử miễn phíChức năng lọc trong JavaScript
Chúng tôi có một hiệu suất cao tuyệt vời để tạo bộ lọc list JavaScript cho một mảng, mang tên là filter(). Bộ lọc hoạt động và sinh hoạt giải trí với một mảng và tất cả chúng ta hoàn toàn có thể sử dụng nó trên hầu hết những cấu trúc tài liệu
Sao chép vào clipboardGọi hàm lọc trên một mảng không thay đổi mảng, nhưng trả về một mảng mới được lọc. Đối với hàm gọi lại, tất cả chúng ta hoàn toàn có thể sử dụng hàm nội tuyến hoặc như trong ví dụ của tất cả chúng ta, hàm mang tên là isBiggerThanFive
Sao chép vào clipboardTrong hàm gọi lại, bạn hoàn toàn có thể kiểm tra một điều kiện và trả về giá trị đúng hoặc sai
Tìm kiếm bằng hàm find trong JavaScript
Hàm find() rất hữu ích khi tất cả chúng ta cần tìm một phần tử thỏa mãn điều kiện. Nếu tất cả chúng ta xem ví dụ tương tự với những số từ 0 đến 9, điều này sẽ trả về số 6
Sao chép vào clipboardĐối với hiệu suất cao gọi lại, chúng tôi sử dụng cùng hiệu suất cao isBiggerThanFive (xem ở trên) để trả về nếu số to hơn 5
Chúng ta hoàn toàn có thể sử dụng hàm find(), ví dụ như trong list JavaScript, để lọc những phần tử bằng ID.
Cuối cùng, tất cả những kiểu tìm kiếm sẽ đáp ứng cho bạn một đối tượng (hoặc mảng), nếu bạn chưa quen với JavaScript và muốn tìm hiểu thêm về những đối tượng, hãy tham khảo bài đăng trên blog của chúng tôi. Đối tượng trong JavaScript là gì
Điều gì xảy ra nếu find không tìm thấy bất kỳ phần tử nào
Điều rất quan trọng nên phải biết là hoàn toàn có thể phương thức find không trả về bất kỳ phần tử nào. Chuyện gì xảy ra sau đó?
Sao chép vào clipboardKhi không tìm thấy phần tử, hàm find() trả về giá trị undefined
Triển khai bộ lọc list JavaScript bằng những vòng lặp
Nếu muốn, tất cả chúng ta cũng hoàn toàn có thể triển khai tất cả những hiệu suất cao lọc và tìm kiếm bằng vòng lặp. Chúng tôi khuyên bạn nên sử dụng những hàm gốc của JavaScript, nhưng sử dụng những vòng lặp là cách tuyệt vời để tìm hiểu thêm về cách mọi thứ hoạt động và sinh hoạt giải trí trong nền
Đôi khi, sử dụng vòng lặp cũng hữu ích nếu tất cả chúng ta cần tính toán một số trong những khía cạnh khác nhờ vào tài liệu trong mảng hoặc list phần tử
Sao chép vào clipboardỞ đây chúng tôi trình bày cách chúng tôi hoàn toàn có thể lọc những số to hơn 5 bằng phương pháp sử dụng một for loop đơn giản và đơn giản (bạn cũng hoàn toàn có thể sử dụng những vòng lặp khác ví như forEach, xem bài đăng trên blog của chúng tôi về những vòng lặp trong JavaScript để tìm hiểu thêm).
Với vòng lặp for ta lặp cả 10 phần tử trong mảng. Trong mỗi lần lặp, tất cả chúng ta cần tìm những phần tử bằng chỉ mục. Khi kết thúc quá trình lặp, chúng tôi kiểm tra điều kiện
Chúng ta cần tự tạo kết quả bằng phương pháp sử dụng vòng lặp for. Đây là nguyên do tại sao chúng tôi ra mắt isBiggerThanFive0 chứa tất cả những phần tử đáp ứng điều kiện. Chúng tôi thêm những phần tử bằng phương pháp isBiggerThanFive1
Lợi ích của việc sử dụng vòng lặp là tất cả chúng ta hoàn toàn có thể thêm nhiều lệnh hơn nếu điều kiện được đáp ứng. Trong trường hợp của chúng tôi, chúng tôi đã thêm một bộ đếm (_______12) sẽ đếm tất cả những số to hơn
Cảm ơn bạn đã đăng ký
😎
Tìm hiểu xem có nhà phát triển nào trong bạn hay là không bằng phương pháp trả lời một số trong những thắc mắc
Với ứng dụng này, bạn được cho phép chúng tôi gửi email cho bạn
Kiểm tra xem mảng có chứa những phần tử hay là không bằng phương pháp sử dụng hiệu suất cao gồm có
Chúng ta hoàn toàn có thể kiểm tra xem một mảng có chứa những phần tử hay là không bằng phương pháp sử dụng hàm isBiggerThanFive3. Điều này rất giống với hàm find nhưng nó chỉ trả về giá trị đúng hoặc sai nhờ vào sự hiện hữu của phần tử sử dụng những điều kiện nhất định
Sao chép vào clipboardLần này tất cả chúng ta chỉ kiểm tra xem số 5 có trong mảng hay là không. Hàm trả về isBiggerThanFive4
Việc sử dụng gồm có rất hữu ích để kiểm tra xem ID của người tiêu dùng hoặc một số trong những đối tượng khác có trong list ID trong nhóm hay là không. Chúng tôi cũng hoàn toàn có thể kiểm tra xem tùy chọn đã chọn liệu có phải là một phần của tùy chọn hay là không khi người tiêu dùng nhập giá trị
Lấy chỉ mục của một phần tử bằng find Index
Đôi khi tất cả chúng ta chỉ việc một chỉ mục của những phần tử, tất cả chúng ta hoàn toàn có thể sử dụng find Index cho điều đó. Theo một nghĩa nào đó, nó hoạt động và sinh hoạt giải trí in như find nhưng chỉ trả về chỉ mục. Hãy tưởng tượng rằng bạn có hai mảng với tài liệu tương tự nhau, một mảng dành riêng cho tài liệu người tiêu dùng, mảng còn sót lại dành riêng cho đăng ký người tiêu dùng cả trong một mảng. Dữ liệu người tiêu dùng nằm trên cùng một chỉ mục với tài liệu đăng ký và bạn hoàn toàn có thể sử dụng chỉ mục để người tiêu dùng truy cập tài liệu đăng ký
Sao chép vào clipboardNhưng hãy lưu ý rằng isBiggerThanFive5 không phải là giá trị số thực mà là chỉ số. Chúng ta cần thêm một bước nữa để đọc giá trị số
Sao chép vào clipboardChúng tôi truy cập giá trị của số bằng phương pháp sử dụng chỉ mục trên mảng
Bây giờ tất cả chúng ta đã biết lý thuyết, tất cả chúng ta hoàn toàn có thể sử dụng tất cả kiến thức đó trong một ví dụ
Ví dụ về bộ lọc list JavaScript
Ví dụ về bộ lọc list JavaScript của chúng tôi được phân thành hai ví dụ chính
- Lọc list, sử dụng trường tìm kiếmLọc list, sử dụng list thả xuống (chọn)
Chúng tôi muốn ra mắt những hiệu suất cao bằng phương pháp sử dụng list những ban nhạc vì tất cả chúng tôi đều thích nghe nhạc và vui chơi. Ngoài ra, bạn cũng hoàn toàn có thể thuận tiện và đơn giản thêm những ban nhạc yêu thích của tớ
Nền tảng của trang của chúng tôi và cách chúng tôi tải tài liệu
Có một vài hiệu suất cao cơ bản mà trang web của chúng tôi cần để hoạt động và sinh hoạt giải trí thông thường. Ví dụ: tải tài liệu và hiển thị tài liệu sau khi tải trang web xong. Các hiệu suất cao này sẽ không phải là hiệu suất cao tìm kiếm nhưng chúng giúp chúng tôi tải tài liệu và hiển thị những bản ghi trên trang web
Dữ liệu JSON cho những dảiTrang web của chúng tôi sẽ có một tìm kiếm và chúng tôi cần một số trong những tài liệu để tìm kiếm trong. Đây là một số trong những tài liệu JSON cho những dải, chúng tôi sẽ sử dụng nó trong những ví dụ lọc của chúng tôi. Sao chép tài liệu và tàng trữ nó trong một tệp JSON trong trang web của bạn, chúng tôi đã đặt tên cho những dải tệp của tớ. json
Sao chép vào clipboardCác bạn lưu ý trong ảnh này tài liệu của một số trong những dải được khoanh lại để ảnh nhỏ lại
Đang tải tài liệu cho trang webĐầu tiên, chúng tôi thêm một biến, biến này sẽ tàng trữ tất cả những dải chúng tôi có trong tệp JSON của tớ
Sao chép vào clipboardisBiggerThanFive6 là một hàm sẽ tải tài liệu từ một tệp được chỉ định. Nó sử dụng phương thức isBiggerThanFive7 để tải tài liệu (đối với ví dụ này, tài liệu được tàng trữ cục bộ, nhưng đây cũng hoàn toàn có thể là một API với tài liệu được tìm nạp từ sever)
Sao chép vào clipboardChúng tôi sử dụng loadData trong hàm loadBands
Sao chép vào clipboardHàm này chỉ định tên của tệp JSON và một hàm được gọi khi tải xong
Hàm ở đầu cuối để tải được gọi là tài liệu isBiggerThanFive8 tàng trữ những dải trong một biến và gọi những hàm để hiển thị tài liệu
Sao chép vào clipboardHàm này cũng chứa lệnh gọi phương thức fillDropDown
Chúng tôi cần một số trong những thành phần HTML trên trang web để fillDropDown hoạt động và sinh hoạt giải trí. Bạn có lý giải về việc sử dụng thẻ nào, phía dưới
Đầu tiên, tất cả chúng ta lấy tham chiếu cho phần tử HTML bằng phương thức isBiggerThanFive9. Chúng tôi sử dụng ID find()0
Sao chép vào clipboardĐể thêm những tùy chọn list, chúng tôi lặp qua tất cả những dải bằng vòng lặp forEach. Trong mỗi lần lặp lại, chúng tôi tạo một phần tử tùy chọn mới
Đối với thuộc tính nhãn và tên, chúng tôi sử dụng tên băng tần. Trong những ví dụ phức tạp hơn, value property là ID thông thường của một số trong những loại, để thuận tiện và đơn giản link với bản ghi bằng ID.
Sẽ tốt hơn nếu chọn một trong những bản ghi ngay từ đầu. Chúng tôi làm điều này bằng phương pháp đặt thuộc tính find()1
Đặt giá trị thành 0 sẽ chọn bản ghi đầu tiên vì chỉ mục nhờ vào số không
Bây giờ tất cả chúng ta đã chọn một dải, tất cả chúng ta hoàn toàn có thể gọi hàm find()2 và hiển thị tài liệu cho dải ở vị trí đầu tiên.
Tạo HTML cho trường tìm kiếm và kết quả
Ví dụ đầu tiên đã cho tất cả chúng ta biết cách sử dụng trường tìm kiếm để lọc list, sử dụng JavaScript. Bạn hoàn toàn có thể thấy trường tìm kiếm này trông ra làm sao trên trang web của chúng tôi
HTML cho đầu vào và để hiển thị kết quả trông như vậy này
Sao chép vào clipboardPhần tử đầu tiên chúng tôi sử dụng là thẻ find()3 và chúng tôi đặt find()4 thành văn bản. Chúng tôi cũng thêm giá trị thuộc tính để đặt giá trị thuộc tính find()5. Chúng tôi cần id để chúng tôi hoàn toàn có thể sử dụng phần tử này trong JavaScript để tìm phần tử trong tài liệu. Nút có thuộc tính find()6 với hiệu suất cao của chúng tôi, chúng tôi gọi là find()7.
Cuối cùng, có một list không còn thứ tự, thẻ find()8 hiển thị tất cả những dải mà bộ lọc chuỗi tìm kiếm của chúng tôi
Sử dụng trường tìm kiếm để lọc list trong JavaScript
Sao chép vào clipboardTrước tiên, chúng tôi cần lấy tham chiếu cho những thành phần HTML bằng phương pháp find()9 và đáp ứng ID mà chúng tôi đã sử dụng trong HTML.
Trong biến find()8, chúng tôi tàng trữ tham chiếu cho list không còn thứ tự với ID bandsFound. Danh sách này hiển thị tất cả những dải mà tìm kiếm của chúng tôi tìm thấy
Tiếp theo là biến isBiggerThanFive1, tàng trữ tham chiếu cho phần tử thẻ đầu vào HTML có id isBiggerThanFive2. Chúng tôi cần đọc giá trị được tàng trữ trong trường nhập tìm kiếm của tớ. Chúng tôi làm điều này với một phương pháp isBiggerThanFive3
Xin lưu ý rằng tất cả chúng ta chỉ sử dụng hàm isBiggerThanFive4 ở đây, hàm tìm kiếm sẽ thực hiện tất cả việc lọc cho tất cả chúng ta và bằng phương pháp gọi nó, tất cả chúng ta sẽ nhận được một mảng được lọc làm phản hồi. Giải thích cho hiệu suất cao tìm kiếm ở phía dưới
Theo nghĩa tàng trữ một giá trị trong biến isBiggerThanFive5 là tất cả những gì tất cả chúng ta phải làm để đã có được những dải mảng được lọc
Bây giờ chúng tôi tập trung vào việc hiển thị những bản ghi
Lúc đầu, chúng tôi đặt InternalHTML thành chuỗi trống, đây là một thủ thuật nhỏ mà chúng tôi sử dụng để xóa nếu có bất kỳ kết quả nào từ tìm kiếm trước đó đã được tàng trữ trong list không còn thứ tự của chúng tôi. Bạn cũng hoàn toàn có thể xóa từng mục trong list
Bước ở đầu cuối là lặp qua tất cả những dải
Đối với mỗi dải, chúng tôi tạo một mục list mới với tài liệu. phương thức createElement, phương thức này tạo một phần tử HTML bằng phương pháp sử dụng tên của thẻ mong ước
Khi chúng tôi đặt giá trị isBiggerThanFive6 cho mục list, chúng tôi sử dụng chữ mẫu JavaScript, vì vậy hãy nhớ sử dụng backtick thay vì dấu nháy đơn. Sử dụng chữ, tất cả chúng ta hoàn toàn có thể thuận tiện và đơn giản định dạng đầu ra chuỗi và thêm giá trị cho từng dải
Đừng quên nối thêm mục list mới vào list không còn thứ tự ở cuối
Bắt đầu khóa học do người cố vấn của chúng tôi hướng dẫn, nơi người cố vấn của chúng tôi dẫn dắt bạn trên mọi bước đường. Yêu cầu bản dùng thử MIỄN PHÍ của bạn ngay ngày hôm nay
dùng thử miễn phíCách tạo hiệu suất cao tìm kiếm văn bản trong JavaScript
Hàm tìm kiếm tận dụng cả phương thức lọc và gồm có phương thức mà tất cả chúng ta đã nói trước đây. Chức năng lọc lọc những dải, nhưng chúng tôi sử dụng gồm có để tìm kiếm văn bản trong những giá trị dải (v.v. trong tên của ban nhạc
Sao chép vào clipboardChúng tôi khởi đầu bằng việc kiểm tra để đảm nói rằng có tìm kiếm chuỗi. Trong những trường hợp khác, hiệu suất cao tìm kiếm trả về tất cả những dải
Tiếp theo, chúng tôi quy đổi searchString
Chúng tôi sử dụng toLowerCase để làm cho trường hợp tìm kiếm của chúng tôi không nhạy cảm, vì vậy chúng tôi cần đặt cả chuỗi tìm kiếm và tất cả những giá trị thành chữ thường
Chúng tôi nhận được những giá trị được lọc bằng phương pháp sử dụng bộ lọc isBiggerThanFive7 trên biến isBiggerThanFive5. Phương pháp này lặp lại trên tất cả những băng tần và đối với mỗi băng tần, chúng tôi có một cuộc gọi tùy chỉnh để kiểm tra tất cả những điều kiện
Trước tiên, chúng tôi kiểm tra xem tên ban nhạc hoặc mô tả ban nhạc có chứa isBiggerThanFive9 không. Chúng tôi làm điều này bằng phương pháp sử dụng phương pháp find()0
Nếu bất kỳ điều kiện nào đáp ứng những tiêu chí, chúng tôi cần trả về giá trị thực
Tìm kiếm mảng trong mảngĐể minh họa, chúng tôi đã và đang thêm một tiêu chí để kiểm tra xem có bất kỳ album nào mà ban nhạc đã ghi hay là không, có chứa chuỗi tìm kiếm của chúng tôi không. Để làm được điều đó, chúng tôi cần một bộ lọc khác để lọc album của những ban nhạc
Cuối cùng, chúng tôi kiểm tra xem find()1 có chứa bất kỳ bản ghi nào không và nếu có, chúng tôi sẽ trả về giá trị thực
Hãy nhớ hoàn thành xong hiệu suất cao isBiggerThanFive4 bằng phương pháp sử dụng bộ lọc trả về. Điều này trả về tất cả những dải mà chúng tôi tìm thấy
Thêm list thả xuống để chọn băng tần vào trang web
Danh sách thả xuống hoặc thẻ chọn HTML là một cách hay để được cho phép người tiêu dùng chọn một tập hợp con những bản ghi
Sao chép vào clipboardĐầu tiên, chúng tôi thêm thẻ chọn, chúng tôi cần thêm id find()0. Điều quan trọng tiếp theo là nắm bắt sự kiện khi người tiêu dùng thay đổi giá trị. Chúng tôi làm điều này bằng phương pháp sử dụng sự kiện find()4
Chúng tôi đặt kết quả của dải đã chọn vào thẻ div và chúng tôi thêm thuộc tính id find()5
Bây giờ chúng tôi đã sẵn sàng để sử dụng những phần tử đã sẵn sàng sẵn sàng và tạo bộ lọc list JavaScript
Triển khai bộ lọc list JavaScript với list thả xuống
Sao chép vào clipboardTrước tiên, chúng tôi cần tàng trữ những tham chiếu đến những phần tử HTML của tớ bằng phương pháp sử dụng phương thức find()9. Đọc thêm về cách tạo Element trong JavaScript
Trong biến thả xuống, chúng tôi tàng trữ tham chiếu cho thẻ chọn với id find()0. Trong biến find()8, chúng tôi có một tham chiếu cho thẻ div hiển thị dải
Lần này tất cả chúng ta sử dụng phương thức find để tìm ban nhạc đầu tiên đáp ứng những tiêu chí. Tìm hoạt động và sinh hoạt giải trí theo cách tương tự như bộ lọc, nhưng nó chỉ trả về một bản ghi. Chúng tôi chỉ kiểm tra xem tên ban nhạc có bằng với giá trị của lựa chọn thả xuống hay là không. Chúng tôi hoàn toàn có thể làm điều đó vì chúng tôi đã và đang thêm tên ban nhạc cho những giá trị của những tùy chọn được liệt kê trong list thả xuống
Nếu dải được tìm thấy, chúng tôi tạo kết quả với định dạng HTML trong chuỗi ký tự. Chúng tôi thay đổi giá trị HTML của bandSelectedDiv bằng thuộc tính innerHTML. InternalHTML khác với InternalText vì nó cũng khá được cho phép tất cả chúng ta định dạng những giá trị. Trong trường hợp của chúng tôi, chúng tôi in đậm tên ban nhạc
Kết luận về tìm kiếm và lọc tài liệu
Có nhiều hiệu suất cao đã có sẵn cho chúng tôi để triển khai những bộ lọc list trong JavaScript. Hầu hết trong số họ đã ra khỏi hộp và sẵn sàng để sử dụng. Họ đáp ứng những lệnh gọi lại để triển khai tùy chỉnh cách kiểm tra những điều kiện
Nếu bạn biết phương pháp sử dụng hàm find()9 và hàm find()0, bạn có hầu hết kiến thức thiết yếu để triển khai hầu hết những tìm kiếm ngoài kia.
Post a Comment