Ở đâ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.
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
function _getObjectValueByPathString[inputObject, propertyString] {
let splitStr = propertyString.split['.'];
if [!inputObject.hasOwnProperty[splitStr[0]]] return undefined;
if [splitStr.length === 1] {
return inputObject[splitStr[0]];
}
else if [splitStr.length > 1] {
let newPropertyString = "";
let firstValue = splitStr.shift[];
splitStr.forEach[[subStr, i] => {
newPropertyString = i === 0 ? subStr : newPropertyString.concat[`.${subStr}`];
}];
return _getObjectValueByPathString[inputObject[firstValue], newPropertyString];
}
else {
throw "Invalid property string provided";
}
}
function _setObjectValueByPathString[inputObject, propertyString, inputValue] {
let splitStr = propertyString.split['.'];
if [splitStr.length === 1] {
inputObject[splitStr[0]] = inputValue;
return;
}
else if [splitStr.length > 1] {
let newPropertyString = "";
let firstValue = splitStr.shift[];
splitStr.forEach[[subStr, i] => {
newPropertyString = i === 0 ? subStr : newPropertyString.concat[`.${subStr}`];
}];
_setObjectValueByPathString[inputObject[firstValue], newPropertyString, inputValue];
return;
}
else {
throw "Invalid property string provided";
}
}
function _pushObjectValueByPathString[inputObject, propertyString, inputValue] {
let splitStr = propertyString.split['.'];
if [splitStr.length === 1] {
inputObject[splitStr[0]].push[inputValue];
return;
}
else if [splitStr.length > 1] {
let newPropertyString = "";
let firstValue = splitStr.shift[];
splitStr.forEach[[subStr, i] => {
newPropertyString = i === 0 ? subStr : newPropertyString.concat[`.${subStr}`];
}];
_pushObjectValueByPathString[inputObject[firstValue], newPropertyString, inputValue];
return;
}
else {
throw "Invalid property string provided";
}
}
function _pullObjectValueByPathString[inputObject, propertyString, inputValue] {
let splitStr = propertyString.split['.'];
if [splitStr.length === 1] {
inputObject[splitStr[0]].pull[inputValue];
return;
}
else if [splitStr.length > 1] {
let newPropertyString = "";
let firstValue = splitStr.shift[];
splitStr.forEach[[subStr, i] => {
newPropertyString = i === 0 ? subStr : newPropertyString.concat[`.${subStr}`];
}];
_pullObjectValueByPathString[inputObject[firstValue], newPropertyString, inputValue];
return;
}
else {
throw "Invalid property string provided";
}
}
Đố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 [
objectName[propertyName]
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:
- Sử dụng cú pháp khung vuông trong JavaScript.
- Xác định tên thuộc tính đối tượng với một chuỗi hoặc biến.
- Truy cập các thuộc tính đối tượng lồng nhau bằng dấu ngoặc vuông.
- Sử dụng phá hủy đối tượng để truy cập các thuộc tính đối tượng trong JS.
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:
objectName[propertyName]
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.
Cũng đọc: Các thủ thuật để lặp qua một mảng các đối tượng trong JavaScript Tricks to Loop Through an Array of Objects in JavaScript
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ụ.
const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
console.log[person.firstname];
// john
console.log[person['firstname']];
// john
Từ đối tượng
objectName[propertyName]
2 này, tôi đang truy cập thuộc tính objectName[propertyName]
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.
person.first-name
// throws an error
person["first-name"]
// john
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ến
Trong 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.
const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
const key = 'username';
console.log[person[key]];
// john_doe
Bạn có thể thấy tôi có một biến
objectName[propertyName]
4 với tên người dùng giá trị. Tôi đang sử dụng biến objectName[propertyName]
4 để truy cập thuộc tính objectName[propertyName]
6 từ đối tượng objectName[propertyName]
2.username. I am using the objectName[propertyName]
4 variable to access the objectName[propertyName]
6 property from the
objectName[propertyName]
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ư
objectName[propertyName]
8, objectName[propertyName]
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.
const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
for [const property in person] {
console.log[person[property]];
}
Output:
1
john
doe
john_doe
35
Tôi đang lặp qua đối tượng
objectName[propertyName]
2 bằng cách sử dụng vòng lặp const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
console.log[person.firstname];
// john
console.log[person['firstname']];
// john
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 nhau
Bạ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.
const person = {
id: 1,
name: {
firstname: 'john',
lastname: 'doe',
},
username: 'john_doe',
email: '',
age: 35,
};
const key = 'name';
console.log[person[key]['firstname']];
// john
console.log[person['name']['firstname']];
// john
Tôi có một đối tượng lồng nhau với thuộc tính
const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
console.log[person.firstname];
// john
console.log[person['firstname']];
// john
2 cũng là một đối tượng. Thuộc tính const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
console.log[person.firstname];
// john
console.log[person['firstname']];
// john
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
const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
console.log[person.firstname];
// john
console.log[person['firstname']];
// john
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ạt
Bạ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.
const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
const { email, username } = person;
console.log[email];
//
console.log[username];
// john_doe
Tôi đang nhận được các thuộc tính
const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
console.log[person.firstname];
// john
console.log[person['firstname']];
// john
5 và objectName[propertyName]
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
const person = {
id: 1,
firstname: 'john',
lastname: 'doe',
username: 'john_doe',
email: '',
age: 35,
};
console.log[person.firstname];
// john
console.log[person['firstname']];
// john
5 và objectName[propertyName]
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ạt
Mặ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 danh không hợp lệ trong tên thuộc tính: Nếu tên thuộc tính có số nhận dạng không hợp lệ như ký hiệu Dash [-], không gian hoặc số ở đầu, bạn không thể sử dụng ký hiệu DOT. Đó là lý do tại sao bạn cần sử dụng dấu ngoặc vuông. If the property name has invalid identifiers like dash symbol [-], space, or number at the beginning, you can't use dot notation. That's why you need to use square brackets.
const person = {
id: 1,
'first-name': 'john',
'last name': 'doe',
'2username': 'john_doe',
email: '',
age: 35,
};
console.log[person.first-name];
// throws SyntaxError
console.log[person.2username];
// throws SyntaxError
console.log[person['first-name']];
// john
console.log[person['2username']];
// john_doe
Như bạn có thể thấy, đối tượng
objectName[propertyName]
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 person.first-name
// throws an error
person["first-name"]
// john
0, person.first-name
// throws an error
person["first-name"]
// john
1 hoặc person.first-name
// throws an error
person["first-name"]
// john
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.
- Thay đổi tên thuộc tính Có điều kiện: Nếu bạn đang sử dụng cú pháp khung vuông, bạn có thể thay đổi tên thuộc tính bằng điều kiện. If you are using square bracket syntax, You can change the property name using condition.
objectName[propertyName]
0Nếu điều kiện là đúng, biến
objectName[propertyName]
4 sẽ bằng person.first-name
// throws an error
person["first-name"]
// john
4. Nếu không, nó sẽ bằng objectName[propertyName]
3. Chúng ta có thể nhận được các giá trị khác nhau từ person.first-name
// throws an error
person["first-name"]
// john
6 dựa trên điều kiện.true, the objectName[propertyName]
4 variable will be equal to person.first-name
// throws an error
person["first-name"]
// john
4. Otherwise, It will be equal to objectName[propertyName]
3. We can get different values from person.first-name
// throws an error
person["first-name"]
// john
6 based on the condition.- Trích xuất các thuộc tính cụ thể từ một đối tượng: Bằng cách truy cập các thuộc tính đối tượng Sử dụng động sử dụng động, bạn có thể nhận các thuộc tính cụ thể từ một đối tượng. By accessing object properties dynamically using destructuring, you can get specific properties from an object.
- Vòng lặp qua các thuộc tính đối tượng: Khi chúng ta truy cập các thuộc tính đối tượng bằng cách sử dụng các biến, việc lặp lại các thuộc tính đối tượng trở nên rất dễ dàng. Theo cách này, chúng ta có thể nhận được tất cả các giá trị mà không cần truy cập các thuộc tính đó theo cách thủ công. When we access object properties dynamically using variables, it becomes very easy to loop over the object properties. In this way, we can get all the values without accessing those properties manually.
Cũng đọc: 6+ cách để tìm một đối tượng trong một mảng các đối tượng bằng cách sử dụng JavaScript 6+ Ways to Find an Object in an Array of Objects Using JavaScript
Khi nào nên truy cập các thuộc tính đối tượng một cách linh hoạt
Trong 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ận
Nhậ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.