Javascript cho vòng lặp thêm vào đối tượng
Các đối tượng cũng có thể được lấp đầy bằng dữ liệu trong các vòng lặp. Hãy xem một ví dụ. Giả sử chúng ta có hai mảng Show
1Hãy sử dụng chúng để tạo một đối tượng bằng cách lấy các khóa cho đối tượng này từ mảng đầu tiên và các giá trị từ mảng thứ hai. Để làm điều này, chúng tôi sẽ bắt đầu vòng lặp và trong vòng lặp, chúng tôi sẽ tạo đối tượng của mình 2Không cần nhập biến cho khóa và giá trị, bạn chỉ cần làm điều này 3Hai mảng được đưa ra. cái đầu tiên có tên của các ngày trong tuần và cái thứ hai có số thứ tự của chúng 4Sử dụng một vòng lặp, tạo một đối tượng có các khóa sẽ là tên của các ngày và các giá trị sẽ là số của chúng Cho một đối tượng 5Lặp qua đối tượng này và ghi vào đối tượng mới những phần tử là số chẵn Cho một đối tượng 5Lặp lại đối tượng này và tạo một đối tượng mới sao cho các khóa của nó là các phần tử của đối tượng cũ và các giá trị của nó là các khóa của đối tượng cũ Vòng lặp cho phép chúng ta duyệt qua các mục trong mảng hoặc đối tượng và thực hiện những việc như in chúng, sửa đổi chúng hoặc thực hiện các loại tác vụ hoặc hành động khác. Có nhiều loại vòng lặp khác nhau và vòng lặp for trong JavaScript cho phép chúng ta lặp qua một bộ sưu tập (chẳng hạn như một mảng) Trong bài viết này, chúng ta sẽ tìm hiểu về vòng lặp 7 mà JavaScript cung cấp. Chúng ta sẽ xem cách các câu lệnh vòng lặp 0 được sử dụng trong JavaScript, cú pháp, ví dụ về cách thức hoạt động của nó, khi nào nên sử dụng hoặc tránh sử dụng nó và những loại vòng lặp nào khác mà chúng ta có thể sử dụng thay thếTại sao nên sử dụng Vòng lặp For trong Mã JavaScriptTrong JavaScript, giống như trong các ngôn ngữ lập trình khác, chúng tôi sử dụng các vòng lặp để đọc hoặc truy cập các mục của bộ sưu tập. Bộ sưu tập có thể là một mảng hoặc một đối tượng. Mỗi khi câu lệnh vòng lặp quay vòng qua các mục trong một bộ sưu tập, chúng tôi gọi đó là một phép lặp Có hai cách để truy cập một mục trong bộ sưu tập. Cách thứ nhất là thông qua khóa của nó trong bộ sưu tập, là chỉ mục trong mảng hoặc thuộc tính trong đối tượng. Cách thứ hai là thông qua chính vật phẩm đó, không cần chìa khóa Định nghĩa của for…in LoopVòng lặp JavaScript 7 đi qua hoặc lặp lại các khóa của bộ sưu tập. Khi sử dụng các phím này, bạn có thể truy cập mục mà nó đại diện trong bộ sưu tậpBộ sưu tập các mục có thể là mảng, đối tượng hoặc thậm chí là chuỗi Cú pháp của for…in LoopVòng lặp 7 có cú pháp hoặc cấu trúc như sau
Trong khối mã này, 3 là tập hợp các mục chúng tôi đang lặp lại. Nó có thể là một đối tượng, mảng, chuỗi, v.v. 4 sẽ là khóa của từng mục trong 3, thay đổi trên mỗi lần lặp thành khóa tiếp theo trong danh sáchLưu ý rằng chúng tôi sử dụng 6 hoặc 7 để khai báo 4Sử dụng vòng lặp for với các đối tượngKhi sử dụng vòng lặp 0 để lặp lại một đối tượng trong JavaScript, các khóa hoặc thuộc tính được lặp lại — trong đoạn mã trên, được biểu thị bằng biến 4 — là thuộc tính riêng của đối tượngVì các đối tượng có thể kế thừa các mục thông qua chuỗi nguyên mẫu, bao gồm các phương thức và thuộc tính mặc định của Đối tượng cũng như các nguyên mẫu Đối tượng mà chúng ta có thể xác định, nên chúng ta nên sử dụng hasOwnProperty Ví dụ về vòng lặp trên một đối tượng có thể lặp lạiTrong ví dụ sau, chúng tôi đang lặp lại biến 01 và ghi nhật ký từng thuộc tính và giá trị
Lưu ý rằng thứ tự của phép lặp tăng dần đối với các khóa (nghĩa là bắt đầu bằng các chữ số theo thứ tự số và sau đó là các chữ cái theo thứ tự bảng chữ cái). Tuy nhiên, thứ tự xuất ra này khác với thứ tự chỉ mục của các mục được tạo khi khởi tạo đối tượng Xem Đối tượng vòng lặp bút theo SitePoint (@SitePoint) trên CodePen Sử dụng Vòng lặp for…in với MảngKhi sử dụng vòng lặp 0 để lặp mảng trong JavaScript, 4 trong trường hợp này sẽ là chỉ số của các phần tử. Tuy nhiên, các chỉ số có thể được lặp lại theo thứ tự ngẫu nhiênVì vậy, nếu biến 3 trong cấu trúc cú pháp vòng lặp 0 mà chúng tôi đã trình bày ở trên là một mảng gồm năm mục, thì 4 sẽ không được đảm bảo là từ 0 đến 4. Một số chỉ số có thể đi trước những chỉ số khác. Chi tiết về thời điểm điều này có thể xảy ra sẽ được giải thích sau trong bài viết nàyVí dụ về mảng vòng lặp for…inTrong ví dụ bên dưới, chúng tôi đang lặp lại biến sau đây 07 0Và trong vòng lặp, chúng tôi đang hiển thị chỉ mục và giá trị của từng phần tử mảng Xem Mảng vòng lặp bút theo SitePoint (@SitePoint) trên CodePen Sử dụng Vòng lặp for…in với ChuỗiBạn có thể lặp qua một chuỗi bằng vòng lặp JavaScript 0. Tuy nhiên, không nên làm như vậy, vì bạn sẽ lặp lại các chỉ số của các ký tự thay vì chính các ký tự đóMột ví dụ về chuỗi vòng lặp for…inTrong ví dụ bên dưới, chúng tôi đang lặp lại biến sau đây 09 1Bên trong vòng lặp, chúng tôi đang hiển thị khóa hoặc chỉ mục của từng ký tự và ký tự tại chỉ mục đó Xem Vòng lặp chuỗi bút của SitePoint (@SitePoint) trên CodePen Hãy xem xét các tình huống mà vòng lặp JavaScript 0 phù hợp nhất vớiLặp lại các đối tượng với vòng lặp JavaScript for…inBởi vì vòng lặp 0 chỉ lặp lại vô số thuộc tính của một đối tượng — đó là các thuộc tính riêng của đối tượng chứ không phải các thuộc tính như 12 là một phần của nguyên mẫu của đối tượng — nên sử dụng vòng lặp 0 để lặp lại các đối tượng. Vòng lặp 0 cung cấp một cách dễ dàng để lặp lại các thuộc tính của một đối tượng và cuối cùng là các giá trị của nóGỡ lỗi với vòng lặp for…inMột trường hợp sử dụng tốt khác cho vòng lặp JavaScript 0 là gỡ lỗi. Ví dụ: bạn có thể muốn in ra bảng điều khiển hoặc phần tử HTML các thuộc tính của một đối tượng và các giá trị của nó. Trong trường hợp này, vòng lặp 0 là một lựa chọn tốtKhi sử dụng vòng lặp 0 để gỡ lỗi các đối tượng và giá trị của chúng, bạn phải luôn nhớ rằng các phép lặp không theo thứ tự, nghĩa là thứ tự của các mục mà vòng lặp lặp lại có thể là ngẫu nhiên. Vì vậy, thứ tự của các thuộc tính được truy cập có thể không như mong đợiKhi nào không nên sử dụng JavaScript cho…trong vòng lặpBây giờ, hãy xem xét các tình huống mà vòng lặp 0 không phải là lựa chọn tốt nhấtLặp lại có thứ tự các mảngVì thứ tự chỉ số trong các lần lặp không được đảm bảo khi sử dụng vòng lặp 0, nên không nên lặp lại các mảng nếu việc duy trì thứ tự là cần thiếtĐiều này đặc biệt cần thiết nếu bạn đang muốn hỗ trợ các trình duyệt như IE, trình duyệt này lặp lại theo thứ tự các mục được tạo thay vì theo thứ tự của các chỉ mục. Điều này khác với cách hoạt động của các trình duyệt hiện đại hiện nay, lặp lại các mảng dựa trên các chỉ số theo thứ tự tăng dần Vì vậy, ví dụ: nếu bạn có một mảng gồm bốn phần tử và bạn chèn một phần tử vào vị trí thứ ba, thì trong các trình duyệt hiện đại, vòng lặp 0 sẽ vẫn lặp lại mảng đó theo thứ tự từ 0 đến 4. Trong IE, khi sử dụng vòng lặp 0, nó sẽ lặp lại bốn mục ban đầu có trong mảng lúc đầu và sau đó đến mục được thêm vào ở vị trí thứ baThực hiện các thay đổi trong khi lặp lạiMọi bổ sung, xóa hoặc sửa đổi thuộc tính không đảm bảo lặp lại theo thứ tự. Nên tránh thay đổi các thuộc tính trong vòng lặp 0. Điều này chủ yếu là do tính chất không theo thứ tự của nóVì vậy, nếu bạn xóa một mục trước khi bạn truy cập mục đó trong lần lặp lại, thì mục đó sẽ không được truy cập trong toàn bộ vòng lặp Tương tự, nếu bạn thay đổi một thuộc tính, điều đó không đảm bảo rằng mục đó sẽ không được truy cập lại. Vì vậy, nếu một thuộc tính bị thay đổi, nó có thể được truy cập hai lần trong vòng lặp thay vì một lần Ngoài ra, nếu một thuộc tính được thêm vào trong quá trình lặp lại, nó có thể được truy cập hoặc không trong quá trình lặp lại. Do những tình huống này, tốt nhất là tránh thực hiện bất kỳ thay đổi, xóa hoặc thêm đối tượng nào trong vòng lặp 0Đây là một ví dụ về việc thêm một phần tử trong vòng lặp 0. Chúng ta có thể thấy kết quả của vòng lặp đầu tiên rồi đến vòng lặp thứ hai sau khi thực hiện các phép cộng trong vòng lặp đầu tiênXem Bổ sung bút trong Vòng lặp đối tượng của SitePoint (@SitePoint) trên CodePen Như bạn có thể thấy trong ví dụ trên, các phần tử được thêm vào không được lặp lại Các lựa chọn thay thế cho vòng lặp For trong JavaScriptVì vậy, trong những tình huống mà vòng lặp 0 không phải là lựa chọn tốt nhất, bạn nên sử dụng cái gì để thay thế? Sử dụng vòng lặp for với mảngKhông bao giờ sai khi sử dụng vòng lặp 7. Vòng lặp JavaScript 7 là một trong những công cụ cơ bản nhất để lặp qua các phần tử mảng. Vòng lặp 7 cho phép bạn kiểm soát hoàn toàn các chỉ số khi bạn lặp lại một mảngĐiều này có nghĩa là khi sử dụng vòng lặp 7, bạn có thể tiến và lùi, thay đổi các mục trong mảng, thêm mục, v.v., trong khi vẫn duy trì thứ tự của mảngCâu lệnh sau tạo một vòng lặp lặp qua một mảng và in các giá trị của nó ra bàn điều khiển 8Phương thức forEach cho mảng và đối tượngforEach trong JavaScript là một phương thức trên các nguyên mẫu mảng cho phép chúng ta lặp lại các phần tử của một mảng và các chỉ số của chúng trong hàm gọi lại Các hàm gọi lại là các hàm mà bạn chuyển sang một phương thức hoặc hàm khác để được thực thi như một phần của quá trình thực thi phương thức hoặc hàm đó. Khi nói đến 90 trong JavaScript, điều đó có nghĩa là hàm gọi lại sẽ được thực thi cho mỗi lần lặp nhận mục hiện tại trong lần lặp làm tham sốVí dụ: câu lệnh sau lặp lại biến 07 và in các giá trị của nó trong bảng điều khiển bằng cách sử dụng 90 9Bạn cũng có thể truy cập chỉ mục của mảng 3Các vòng lặp JavaScript 90 cũng có thể được sử dụng để lặp lại các đối tượng bằng cách sử dụng Object. keys(), chuyển đối tượng mà bạn muốn lặp lại, trả về một mảng các thuộc tính riêng của đối tượng 5Ngoài ra, bạn có thể 90 để lặp trực tiếp các giá trị của thuộc tính nếu bạn không cần truy cập vào thuộc tính bằng Object. giá trị() 7Lưu ý rằng 95 trả về các mục theo cùng thứ tự như 0Phần kết luậnBằng cách sử dụng vòng lặp JavaScript 0, chúng ta có thể lặp qua các khóa hoặc thuộc tính của một đối tượng. Nó có thể hữu ích khi lặp lại các thuộc tính của đối tượng hoặc để gỡ lỗi, nhưng nên tránh khi lặp lại các mảng hoặc thực hiện các thay đổi đối với đối tượng. Tôi hy vọng bạn đã tìm thấy các ví dụ và giải thích ở trên hữu íchChia sẻ bài viết nàyShahed Nasser Tôi là một nhà phát triển toàn diện đam mê học hỏi điều gì đó mới mỗi ngày, sau đó chia sẻ kiến thức của mình với cộng đồng Làm cách nào để thêm các đối tượng trong một vòng lặp trong JavaScript?Các phương thức lặp qua các đối tượng bằng javascript . vì. trong vòng lặp. Cách đơn giản nhất để lặp qua các thuộc tính của đối tượng là sử dụng lệnh for. trong tuyên bố. . keys() Phương thức. Trước ES6, cách duy nhất để lặp qua một đối tượng là sử dụng lệnh for. trong vòng lặp. . phương thức value(). đối tượng. . các mục () Phương thức Làm cách nào để thêm giá trị vào đối tượng hiện có trong JavaScript?Trong JavaScript, assign() là một phương thức có sẵn. Sử dụng phương thức gán(), chúng ta có thể gán hoặc thêm một giá trị mới cho một đối tượng hiện có hoặc chúng ta có thể tạo đối tượng mới mà không thay đổi các giá trị đối tượng hiện có.
Chúng ta có thể sử dụng vòng lặp for trên đối tượng trong JavaScript không?Trong JavaScript, khi bạn nghe thuật ngữ "vòng lặp", bạn có thể nghĩ đến việc sử dụng các phương thức vòng lặp khác nhau như vòng lặp for, forEach(), map() và các phương thức khác. Nhưng trong trường hợp đối tượng, thật không may, các phương thức này không hoạt động vì đối tượng không thể lặp lại .
Bạn có thể sử dụng vòng lặp for trên một đối tượng không?Cho. vòng lặp chỉ hỗ trợ các đối tượng có thể lặp lại như mảng, không phải đối tượng . |