Hướng dẫn access nested object dynamically javascript - truy cập đối tượng lồng nhau một cách linh hoạt javascript
Ở đây tôi đã tạo một bộ chức năng nhỏ để 'get /' set ' /' push ' /' pull 'từ các thuộc tính lồng nhau đối tượng. Show
InputObject: Đối tượng đích. Ex: obj = {a: 1, b: {c: 2, d: 3}} : Target object. Ex: obj = {a:1, b:{c:2,d:3}} PropertyString: Chuỗi chứa khóa để truy cập. Vd: "B.C" : String containing the key to access. Ex: "b.c" Finally: _getObjectValuebyPathString (obj, "b.c") sẽ trả về 2 would return 2 Đối tượng JavaScript lưu trữ dữ liệu dưới dạng cặp giá trị khóa và chúng ta có thể truy cập các thuộc tính đối tượng một cách linh hoạt bằng cách sử dụng các biến hoặc chuỗi làm khóa. Bạn có thể thay đổi các chuỗi hoặc biến đó theo chương trình. Các dấu ngoặc vuông được sử dụng để truy cập các thuộc tính đối tượng động trong JavaScript. Một tên thuộc tính được xác định với một biến hoặc chuỗi bên trong các dấu ngoặc đó. Biến hoặc chuỗi này có thể được thay đổi dựa trên các điều kiện khác nhau. Đó là lý do tại sao nó được gọi là động. Trong bài viết này, chúng ta sẽ thấy các kỹ thuật khác nhau để truy cập động các thuộc tính đối tượng trong JavaScript. Hầu hết thời gian chúng tôi sử dụng ký hiệu DOT ( 1) để nhận giá trị từ thuộc tính đối tượng trong JavaScript. Theo cách này, chúng tôi nhận được giá trị bằng cách trực tiếp sử dụng tên thuộc tính.Hạn chế chính của phương pháp này là nó không năng động. Điều đó có nghĩa là bạn không thể thay đổi tên thuộc tính trong mã của mình theo chương trình. Mỗi khi bạn phải nhập tên tài sản theo cách thủ công. Bạn có thể đáp ứng nhu cầu này với dấu ngoặc vuông [] thay vì sử dụng ký hiệu dấu chấm. Bạn không phải viết tên tài sản mỗi khi thủ công. Những tên này có thể được thay đổi tự động.[] instead of using dot notation. You don't have to write the property names every time manually. These names can be changed automatically. Thuộc tính đối tượng có thể được truy cập động theo các cách sau:
Có nhiều phương pháp khác để truy cập các thuộc tính đối tượng trong JavaScript khi bạn không muốn thực hiện nó một cách linh hoạt. Cú pháp khung vuông cho các đối tượng JavaScriptĐây là cú pháp phổ biến nhất để truy cập các thuộc tính đối tượng động. Cú pháp sẽ trông như thế này: Bạn phải viết tên đối tượng theo sau là dấu ngoặc vuông. Bên trong các dấu ngoặc đó, bạn có thể xác định bất kỳ tên thuộc tính nào của đối tượng đó. Đối với tên thuộc tính, bạn có thể sử dụng một chuỗi hoặc một biến. Bạn không có sự linh hoạt này trong ký hiệu dấu chấm.
Truy cập các thuộc tính đối tượng động bằng chuỗi trong JSĐể nhận giá trị từ một đối tượng JavaScript một cách linh hoạt, tôi sẽ sử dụng dấu ngoặc vuông và một chuỗi để xác định tên thuộc tính. Hãy xem một ví dụ. Từ đối tượng 2 này, tôi đang truy cập thuộc tính 3. Lúc đầu, tôi đang sử dụng ký hiệu DOT sau đó tôi đang sử dụng dấu ngoặc vuông. Cả hai trả về cùng một kết quả.Nhưng có một số tình huống mà bạn không thể sử dụng ký hiệu DOT. Ví dụ: nếu tên thuộc tính chứa ký hiệu dấu gạch ngang (-) hoặc không gian, ký hiệu dấu chấm sẽ gây ra lỗi.For example, if the property name contains a dash symbol (-) or space, the dot notation will give an error. Bạn phải sử dụng dấu ngoặc vuông trong tình huống này. Chúng tôi sẽ nói về những lợi thế của nó và khi bạn nên truy cập các thuộc tính đối tượng một cách linh hoạt trong phần sau một cách chi tiết.advantages and when you should access object properties dynamically in the later section in detail. Nếu bạn cố gắng truy cập một thuộc tính không tồn tại trong đối tượng, nó sẽ trả về không xác định. Bạn có thể kiểm tra xem một đối tượng có thuộc tính bằng JavaScript nếu cần thiết.undefined. You can check whether an object has a property using JavaScript if necessary. Truy cập động các thuộc tính đối tượng bằng cách sử dụng biếnTrong cú pháp khung vuông, bạn được phép sử dụng các biến để lấy giá trị ra khỏi đối tượng JavaScript. Bạn có thể thay đổi giá trị của biến đó trong các điều kiện khác nhau và tự động nhận các thuộc tính khác nhau. Bạn có thể thấy tôi có một biến 4 với tên người dùng giá trị. Tôi đang sử dụng biến 4 để truy cập thuộc tính 6 từ đối tượng 2.username. I am using the 4 variable to access the 6 property from the
2 object.Nếu bạn muốn truy cập tất cả các thuộc tính từ một đối tượng, bạn phải truy cập từng thuộc tính như 8, 9, v.v.Nhưng bạn có thể tự động thực hiện việc này bằng cách lặp qua đối tượng trong JavaScript và sử dụng dấu ngoặc vuông. Output: Tôi đang lặp qua đối tượng 2 bằng cách sử dụng vòng lặp 1 trong JavaScript. Bên trong vòng lặp, tôi sẽ có từng tên thuộc tính trong biến thuộc tính.Tôi có thể sử dụng biến này để tự động lấy tất cả các giá trị thuộc tính mà không cần truy cập riêng lẻ. Truy cập động các thuộc tính đối tượng lồng nhauBạn có thể truy cập các thuộc tính đối tượng lồng nhau một cách linh hoạt trong JavaScript bằng dấu ngoặc vuông. Bạn cần sử dụng nhiều dấu ngoặc vuông cho một đối tượng lồng nhau. Tôi có một đối tượng lồng nhau với thuộc tính 2 cũng là một đối tượng. Thuộc tính 2 chứa hai thuộc tính lồng nhau.Để truy cập các thuộc tính lồng nhau này, tôi phải sử dụng 2 dấu ngoặc vuông. Một cho 2 khác cho tên tài sản lồng nhau.Bạn có thể sử dụng chuỗi, biến hoặc cả hai cùng nhau để truy cập thuộc tính đối tượng lồng nhau trong JavaScript. Sử dụng phá hủy đối tượng để truy cập các thuộc tính một cách linh hoạtBạn có thể sử dụng phá hủy đối tượng JavaScript để truy cập các thuộc tính một cách linh hoạt. Với kỹ thuật này, chúng tôi có thể trích xuất bất kỳ thuộc tính đối tượng rất dễ dàng. Tôi đang nhận được các thuộc tính 5 và 6 từ đối tượng người bị phá hủy. Bạn có thể truy cập nhiều thuộc tính như bạn muốn, được phân tách bằng dấu phẩy.Nó sẽ tạo các biến 5 và 6 với các giá trị thuộc tính. Bây giờ bạn có thể sử dụng các biến đó để lấy các giá trị ra khỏi chúng.Ưu điểm của việc truy cập các thuộc tính đối tượng một cách linh hoạtMặc dù hầu hết thời gian, chúng tôi sử dụng ký hiệu DOT để truy cập các thuộc tính từ một đối tượng trong JavaScript. Nhưng có một số tình huống mà chúng ta không thể sử dụng ký hiệu DOT. Ngoài ra còn có một số lợi thế của việc sử dụng dấu ngoặc vuông. Chúng ta hãy thảo luận về những tình huống mà bạn phải sử dụng cú pháp vuông và một số lợi thế chính với các ví dụ.
Như bạn có thể thấy, đối tượng 2 chứa các thuộc tính có định danh không hợp lệ. Bạn không thể truy cập các thuộc tính 0, 1 hoặc 2 với ký hiệu DOT. Nó sẽ cho một lỗi cú pháp.Cách duy nhất để truy cập các thuộc tính đó là bằng cú pháp khung vuông. Bên trong dấu ngoặc, bạn phải xác định tên thuộc tính là một chuỗi.square bracket syntax. Inside the brackets, you have to define the property name as a string.
0Nếu điều kiện là đúng, biến 4 sẽ bằng 4. Nếu không, nó sẽ bằng 3. Chúng ta có thể nhận được các giá trị khác nhau từ 6 dựa trên điều kiện.true, the 4 variable will be equal to 4. Otherwise, It will be equal to 3. We can get different values from 6 based on the condition.
Khi nào nên truy cập các thuộc tính đối tượng một cách linh hoạtTrong khi viết mã, hầu hết thời gian chúng tôi truy cập các giá trị thuộc tính riêng lẻ với ký hiệu dấu chấm. Nhưng bạn đã thấy một số tình huống mà chúng ta không thể sử dụng nó. Chúng tôi cũng nhận được một số lợi thế bằng cách truy cập các thuộc tính động trong một số tình huống. Đối với tôi, thật tốt khi sử dụng cả hai kết hợp dựa trên các yêu cầu. Thông thường, bạn nên sử dụng ký hiệu DOT để nhận giá trị từ một đối tượng. Bởi vì nó rất dễ dàng và được chấp nhận rộng rãi trong thế giới lập trình.dot notation to get a value from an object. Because it is very easy and widely acceptable in the programming world. Khi bạn cần sử dụng các biến để lấy giá trị từ một đối tượng, bạn phải có nó một cách linh hoạt. Nếu tên thuộc tính mà bạn muốn truy cập thay đổi cho các điều kiện khác nhau, bạn có thể truy cập thuộc tính đó một cách linh hoạt. Sự kết luậnNhận các giá trị từ một đối tượng sử dụng tên thuộc tính là một nhiệm vụ rất phổ biến trong JavaScript. Khả năng trích xuất các giá trị bằng các thuộc tính đối tượng động cho chúng ta nhiều sức mạnh và tính linh hoạt hơn. Chúng ta có thể truy cập các thuộc tính đối tượng một cách linh hoạt bằng cách sử dụng cú pháp vuông. Theo cách này, chúng ta có thể sử dụng các chuỗi hoặc biến đơn giản để xác định thuộc tính nào chúng ta muốn truy cập. Bạn có thể truy cập các thuộc tính đối tượng lồng nhau và vòng lặp thông qua các thuộc tính đó một cách linh hoạt.Trong khi viết mã, bạn thường có thể phải đối mặt với loại yêu cầu này trong ứng dụng của bạn. Đó là lý do tại sao thật tốt khi biết cách truy cập các thuộc tính đối tượng một cách linh hoạt trong JavaScript cùng với các cách phổ biến khác.how to access object properties dynamically in JavaScript along with other common ways. |