Trong Javascript có nhiều cách để tìm kiếm phần tử trong Array. Cách đơn giản nhất là dùng vòng lặp. Nhưng với ES6+ có nhiều methods để lặp trong Arrray và tìm kiếm trong các phần từ dễ dàng hơn. Show Dưới đây sẽ là những methods Array có thể sử dụng:
includesconst alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.includes("thick scales");Method .includes() trả về giá trị boolean là cách hoàn hảo dùng để kiểm tra phần tử có tồn tại trong array hay không, gía trị trả về của hàm này sẽ là true hoặc false. Cú pháp đơn giản như sau arr.includes(valueToFind, [fromIndex]);Bây giờ như bạn thấy trong ví dụ trên, ta chỉ có một tham số - valueToFind ở dạng Array. Tùy chọn từ Index là một số, cho biết chỉ số nào bạn muốn bắt đầu tìm kiếm (mặc định là 0, nên sẽ tìm kiếm toàn bộ phần tử trong mảng). Vì vậy, trong ví dụ trên,item thick scales có chỉ số 0, nên sau đây sẽ là false: alligator.includes ('thick scales', 1); kể từ khi nó bắt đầu tìm kiếm từ chỉ số 1 trở đi. Có một vài điều quan trọng cần chú ý. Methdod .includes() này sử dụng so sánh rất nghiêm ngặt. Điều đó có nghĩa là, từ ví dụ trên, sau đây sẽ trả về false: alligator.includes ('80'); Điều đó bởi vì mặc dù 80 == '80' là true, 80 === '80' là false findMethod .find () khác với .include () như thế nào? Nếu trong ví dụ trên, ta chỉ thay đổi văn bản, trong đó có văn bản, trong đó có thể tìm thấy lỗi, ta sẽ gặp lỗi này: Uncaught TypeError: thick scales is not a functionBởi vì phương thức find yêu cầu một function được truyền vào. Vì phương thức find không phải là sử dụng toán tử so sánh đơn giản như includes(). Thay vào đó, nó sẽ chuyển từng phần tử vào hàm của bạn và kiểm tra rồi trả về giá trị true hay fasle. Vì vậy, mặc dù điều này hoạt động: alligator.find (() => 'thick scales');, bạn có thể muốn đưa toán tử so sánh của riêng mình vào hàm để nó trả về bất cứ điều gì có liên quan. const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.find(el => el.length < 12); // returns '4 foot tail'Hàm đơn giản này trong method find chúng ta xem xét từng phần tử của mảng, với alias của el, ta đã gán nó và dừng lại khi nó tìm thấy phần tử đầu tiên là đúng. Trong trường hợp true có thuộc tính độ dài nhỏ hơn 12 (numbers không có thuộc tính độ dài). Tất nhiên bạn có thể làm cho chức năng này phức tạp khi cần thiết, làm cho điều kiện thực sự của bạn đáp ứng nhu cầu của bạn. Trong ví dụ trên, ta chỉ sử dụng cuộc gọi lại với một tham số. Bạn cũng có thể thêm các tham số để tham chiếu index phần tử hiện tại. Một tham số khác có thể là array, nhưng tôi thấy điều này hiếm khi được sử dụng. Dưới đây là một ví dụ sử dụng index: alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall'Có 3 elements khác nhau đáp ứng điều kiện đầu tiên (typeof el === 'string'). Nếu đây là điều kiện duy nhất, nó sẽ trả lại cái đầu tiên‘thick scales’. Nhưng sự khác biệt là, chỉ có một người có chỉ số là 2 và đó là 4 foot tall Nói về indexs, một phương thức mảng tương tự là .findIndex (). Phương thức này cũng nhận được một hàm, nhưng như bạn có thể đoán được, nó trả về chỉ số phần tử phù hợp thay vì chính phần tử đó. indexOfconst alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.indexOf("rounded snout"); // returns 3Giống như phương thức .includes(), indexOf () sử dụng so sánh nghiêm ngặt, không phải là hàm như chúng ta đã thấy với phương thức .find(). Nhưng không giống với incluldes(), nó trả về index của phần tử, thay vì boolean. Bạn cũng có thể chỉ ra index nào trong mảng để bắt đầu tìm kiếm. Mình thấy indexOf() rất hữu ích. Nó nhanh chóng và dễ dàng, có thể cho bạn biết phần tử nằm trong mảng và có thể cho bạn biết phần tử có tồn tại hay không. Làm thế nào để nó cho bạn biết nếu các yếu tố tồn tại? Về cơ bản, chúng ta có thể biết phần tử tồn tại nếu nó trả về một số dương và nếu nó trả về -1thì chúng ta biết phần tử đó không tồn tại. alligator.indexOf("soft and fluffy"); // returns -1 alligator.indexOf(80); // returns 1 alligator.indexOf(80, 2); // returns -1Và như bạn có thể thấy, mặc dù chúng ta có thể lấy các phương thức find() hoặc findIndex() để cung cấp cho chúng ta cùng một thông tin, nhưng điều này ít hơn rất nhiều để viết. Chúng tôi không phải viết ra một hàm để so sánh, vì nó đã nằm trong phương thức indexOf. Bây giờ, giống như những cái khác, indexOf () cũng trả về index của phần tử khớp đầu tiên mà nó tìm thấy. JavaScript cung cấp cho chúng ta một phương thức thay thế .lastIndexOf(). Như bạn có thể đoán được là điều này thực hiện tương tự như indexOf() nhưng bắt đầu từ index cuối cùng của mảng và hoạt động ngược. Bạn cũng có thể chỉ định một tham số thứ hai, nhưng hãy nhớ các chỉ số không thay đổi, chỉ vì bạn đang sử dụng một phương thức khác. const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80]; alligator.indexOf(80); // returns 1 alligator.lastIndexOf(80); // returns 4 alligator.indexOf(80, 2); // returns 4 alligator.lastIndexOf(80, 4); // returns 4 alligator.lastIndexOf(80, 3); // returns 1Bonus: filterconst alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80]; alligator.filter(el => el === 80); //returns [80, 80]Phương thức filter() giống như phương thức find(), trong đó nó yêu cầu một function được truyền và một điều kiện cho những gì sẽ được trả về. Sự khác biệt chính là filter() luôn trả về một array, ngay cả khi chỉ có một phần tử phù hợp. Nhưng nó sẽ trả về tất cả các phần tử khớp, trong khi find() chỉ trả về kết quả đầu tiên.
Diễn đàn Designer Việt Nam Trang chủ Diễn đàn > Thiết kế web > HTML - CSS - JS - PHP - ASP >Lượt xem: 6,845 Từ khóa:
Diễn đàn Designer Việt Nam Trang chủ Diễn đàn > Thiết kế web > HTML - CSS - JS - PHP - ASP >
Các trang web hiện đại sử dụng JavaScript để hiển thị nhiều nội dung động. Có một vài điều bạn cần chú ý khi dùng JavaScript để tạo dữ liệu có cấu trúc trên trang web của mình. Hướng dẫn này sẽ trình bày các phương pháp hay nhất và các chiến lược triển khai. Nếu mới làm quen với dữ liệu có cấu trúc, bạn có thể tìm hiểu thêm về cách thức hoạt động của dữ liệu có cấu trúc. Có nhiều cách tạo dữ liệu có cấu trúc bằng JavaScript, nhưng phổ biến nhất là những cách sau:
Sử dụng Trình quản lý thẻ của Google để tạo JSON-LD độngTrình quản lý thẻ của Google là một nền tảng cho phép bạn quản lý các thẻ trên trang web của mình mà không cần chỉnh sửa mã. Để tạo dữ liệu có cấu trúc bằng Trình quản lý thẻ của Google, hãy làm theo những bước sau: Sử dụng các biến trong Trình quản lý thẻ của GoogleTrình quản lý thẻ của Google (GTM) hỗ trợ các biến để dùng thông tin trên trang như một thành phần của dữ liệu có cấu trúc. Hãy sử dụng các biến để trích xuất dữ liệu có cấu trúc từ trang thay vì sao chép thông tin trong GTM. Việc sao chép thông tin trong GTM làm tăng nguy cơ xảy ra tình trạng nội dung trên trang không khớp với dữ liệu có cấu trúc được chèn qua GTM. Ví dụ: bạn có thể tạo một khối JSON-LD động cho Công thức nấu ăn – trong đó sử dụng tiêu đề trang làm tên công thức – bằng cách tạo biến tùy chỉnh có tên recipe_name sau: function() { return document.title; }Sau đó, bạn có thể sử dụng {{recipe_name}} trong thẻ HTML tùy chỉnh của mình. Bạn nên tạo các biến để thu thập tất cả các thông tin cần thiết trên trang bằng các biến đó. Dưới đây là một ví dụ về nội dung thẻ HTML tùy chỉnh: <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "{{recipe_name}}", "image": [ "{{recipe_image}}" ], "author": { "@type": "Person", "name": "{{recipe_author}}" } } </script> Lưu ý: Ví dụ nêu trên giả định rằng bạn đã xác định các biến recipe_name, recipe_image và recipe_author trong GTM.Tạo dữ liệu có cấu trúc bằng JavaScript tùy chỉnhMột cách khác để tạo dữ liệu có cấu trúc là sử dụng JavaScript để tạo tất cả dữ liệu có cấu trúc hoặc bổ sung thêm thông tin vào dữ liệu có cấu trúc được hiển thị phía máy chủ. Dù bằng cách nào đi nữa, thì Google Tìm kiếm vẫn có thể hiểu và xử lý dữ liệu có cấu trúc có trong DOM khi hiển thị trang. Để tìm hiểu thêm về cách Google Tìm kiếm xử lý JavaScript, hãy xem hướng dẫn cơ bản về JavaScript. Dưới đây là một ví dụ về dữ liệu có cấu trúc tạo bằng JavaScript:
Nếu đang sử dụng tính năng hiển thị phía máy chủ, bạn cũng có thể đưa dữ liệu có cấu trúc mong muốn vào kết quả hiển thị. Hãy xem tài liệu về khung JavaScript của bạn để tìm hiểu cách tạo JSON-LD cho loại dữ liệu có cấu trúc mà bạn quan tâm. Kiểm tra kết quả triển khaiĐể đảm bảo Google Tìm kiếm có thể thu thập và lập chỉ mục dữ liệu có cấu trúc của bạn, hãy kiểm tra kết quả triển khai:
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates. Last updated 2022-05-01 UTC. [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Thiếu thông tin tôi cần" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Quá phức tạp/quá nhiều bước" },{ "type": "thumb-down", "id": "outOfDate", "label":"Đã lỗi thời" },{ "type": "thumb-down", "id": "translationIssue", "label":"Vấn đề về bản dịch" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Vấn đề về mẫu/mã" },{ "type": "thumb-down", "id": "otherDown", "label":"Khác" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Dễ hiểu" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Giúp tôi giải quyết được vấn đề" },{ "type": "thumb-up", "id": "otherUp", "label":"Khác" }] Bạn muốn chia sẻ thêm với chúng tôi? |
