Đối tượng trong JavaScript là một tập hợp các thuộc tính và các thuộc tính này về cơ bản là các cặp khóa-giá trị. Các thuộc tính xác định các đặc điểm của một đối tượng trong JavaScript và các thuộc tính này có thể được thay đổi, xóa và thậm chí được thêm động ngay cả sau khi đối tượng đã được tạo
Một số cách để thêm thuộc tính vào đối tượng JavaScript bao gồm. sử dụng ký hiệu dấu chấm, sử dụng ký hiệu dấu ngoặc [ ], sử dụng phương thứcdefineProperty[], sử dụng toán tử trải rộng và sử dụng Object. phương thức gán[]
Phạm vi của Điều khoản
- Trong bài viết này, chúng ta sẽ xem xét các cách khác nhau để thêm thuộc tính vào đối tượng trong JavaScript bằng các phương thức và ví dụ khác nhau
- Chúng ta cũng sẽ xem cách chúng ta có thể thêm động các thuộc tính mới vào các đối tượng JavaScript sau khi chúng được tạo.
Giới thiệu
Để bắt đầu, chúng ta hãy xem lại và tóm tắt khái niệm về các đối tượng và các thuộc tính của chúng. Đối tượng trong JavaScript là tập hợp các thuộc tính không có thứ tự và các thuộc tính này về cơ bản là các cặp khóa-giá trị xác định các đặc điểm của một đối tượng. Giống như các biến JavaScript, tên đối tượng và thuộc tính của chúng phân biệt chữ hoa chữ thường. Hãy để chúng tôi lấy một ví dụ về một đối tượng trong JavaScript nơi chúng tôi sẽ xác định một số thuộc tính bên trong nó
//JavaScript object named car with some defined properties inside it const car = { brand: 'BMW', //brand property of car object having 'BMW' as its assigned value year: 2010 //year property of car object having 2010 as its assigned value };
Ở đây, chúng tôi đã tạo một đối tượng có tên xe hơi với thương hiệu và năm làm thuộc tính của nó với các giá trị được chỉ định. Bây giờ, nếu chúng ta phải truy cập các thuộc tính này của một đối tượng xe hơi, chúng ta chỉ cần sử dụng ký hiệu dấu chấm hoặc ký hiệu dấu ngoặc vuông
Lưu ý rằng nếu chúng ta cố gắng truy cập các thuộc tính của một đối tượng chưa được gán, thì nó sẽ trả về không xác định và [không phải null]
//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
Bạn đã bao giờ tự hỏi liệu có thể thêm nhiều thuộc tính hơn vào một đối tượng hiện có đã được tạo chưa?
Có nhiều phương pháp và cách thức mà chúng ta có thể thêm các thuộc tính vào một đối tượng hiện có trong JavaScript và chúng ta sẽ thảo luận chi tiết về tất cả chúng khi chúng ta chuyển qua quá trình của bài viết này
- Sử dụng ký hiệu dấu chấm [. ]
- Sử dụng ký hiệu ngoặc vuông [ ]
- Sử dụng đối tượng. phương thứcdefineProperty[]
- Sử dụng đối tượng. phương thức gán[]
- Sử dụng cú pháp toán tử lây lan
Sử dụng ký hiệu dấu chấm [. ]
Một trong những cách đơn giản nhất để thêm, truy cập hoặc sửa đổi các thuộc tính của một đối tượng hiện có trong JavaScript là sử dụng ký hiệu dấu chấm
cú pháp
object.new_property = new_value; //use of dot notation method in JavaScript
Ở đây, đối tượng biểu thị tên đối tượng hiện có và để thêm thuộc tính vào đối tượng JavaScript, chúng tôi đang sử dụng toán tử dấu chấm. new_property về cơ bản là khóa và new_value là giá trị được gán cho thuộc tính mới này sẽ được thêm vào bên trong đối tượng
Lưu ý rằng ký hiệu dấu chấm này sẽ không hoạt động đối với trường hợp tên khóa thuộc tính bao gồm các ký tự đặc biệt như dấu cách, dấu gạch ngang, chữ số, v.v.
Ví dụ để chứng minh việc sử dụng ký hiệu dấu chấm trong JavaScript
Trong mã ví dụ JavaScript dưới đây, chúng tôi đã tạo một đối tượng có tên obj với một số thuộc tính ban đầu được xác định bên trong nó
Bây giờ để chứng minh việc sử dụng ký hiệu dấu chấm, chúng tôi sẽ thêm hai thuộc tính mới với các giá trị được gán bên trong obj. đối tượng. roll_no = 121 và obj. secondName = 'Jain' với sự trợ giúp của toán tử dấu chấm
Cuối cùng, chúng tôi đang in đối tượng obj để kiểm tra các thuộc tính mới được thêm vào [cặp khóa-giá trị] bên trong nó
Lưu ý rằng với sự trợ giúp của toán tử dấu chấm, chúng ta cũng có thể thay đổi các thuộc tính hiện có của một đối tượng. Thí dụ. đối tượng. tên = 'Raj';
//Example code to demonstrate the use of the dot notation method in JavaScript let obj = { //JavaScript object named obj with some define properties inside it name: 'Mayank', age: 20, major: 'Computer Science' }; //Printing object named obj that has been created above with some properties inside it console.log["Object just after its creation: ",obj]; //prints properties of existing JavaScript object named obj before adding new properties in it obj.roll_no = 121; //adding new property roll_no with assigned value as 121 using dot operator of JavaScript obj.secondName = 'Jain'; //adding new property secondName with assigned value as 'Jain' using dot operator of JavaScript obj.gender = 'Male'; //adding new property gender with assigned value as 'Male' using dot operator in JavaScript console.log["Object after adding new properties using dot notation: ",obj]; //prints object obj after adding new properties using dot notation method in JavaScript
đầu ra
Như chúng ta có thể quan sát, các thuộc tính mới đã được thêm động bằng cách sử dụng ký hiệu dấu chấm
Object just after its creation: { name: 'Mayank', age: 20, major: 'Computer Science' } Object after adding new properties using dot notation: { name: 'Mayank', age: 20, major: 'Computer Science', roll_no: 121, secondName: 'Jain', gender: 'Male' }
ví dụ 2
Lưu ý rằng nếu chúng tôi cố gắng sử dụng bất kỳ ký tự đặc biệt hoặc chữ số nào trong tên thuộc tính trong khi thêm bằng cách sử dụng ký hiệu dấu chấm, nó sẽ tạo ra lỗi cú pháp
obj.123name = 'Hello'; //Taking above example and adding property name '123name' with assigned value as 'Hello' console.log[obj]; //results in Syntax error
đầu ra
SyntaxError: Invalid or unexpected token
Sử dụng Ký hiệu Dấu ngoặc vuông [ ]
Như chúng ta đã thảo luận ở trên, có một số nhược điểm khi làm việc với ký hiệu dấu chấm trong trường hợp tên thuộc tính là một mã định danh biến không hợp lệ [chẳng hạn tất cả các chữ số, có khoảng trắng, ký tự đặc biệt]
Để xử lý những trường hợp như vậy, chúng ta có thể tưởng tượng một đối tượng là một mảng kết hợp và có thể sử dụng ký hiệu dấu ngoặc vuông để thêm các thuộc tính mới bên trong một đối tượng
Ngoài ra, trong trường hợp biến động trong đó tên thuộc tính được truy xuất từ đầu vào của người dùng hoặc lệnh gọi API, ký hiệu dấu ngoặc vuông này hữu ích hơn ký hiệu dấu chấm trong JavaScript
cú pháp
object['new_property'] = new_value; //square brackets notation method
Ở đây, đối tượng biểu thị tên đối tượng hiện có và để thêm thuộc tính vào đối tượng JavaScript, chúng tôi đang sử dụng ký hiệu dấu ngoặc vuông. new_property về cơ bản là khóa và new_value là giá trị được gán cho thuộc tính mới này sẽ được thêm vào bên trong đối tượng
Ví dụ để chứng minh việc sử dụng ký hiệu dấu ngoặc vuông trong JavaScript
Trong mã ví dụ JavaScript dưới đây, ban đầu chúng tôi đã tạo một đối tượng có tên obj với một số thuộc tính được xác định. Rõ ràng, như chúng ta đã biết bây giờ, bằng cách sử dụng ký hiệu dấu ngoặc vuông, chúng ta có thể truy cập, thêm và thậm chí sửa đổi các thuộc tính hiện có
Để bắt đầu, chúng tôi đã sửa đổi thuộc tính hiện có của đối tượng obj i. e, obj['bang'] = 'Mumbai'. Sau đó, chúng tôi đã tạo một đối tượng lồng nhau trống [obj. thành phố = {}] trong obj. Chúng ta cũng có thể truy cập các đối tượng lồng nhau bằng ký hiệu dấu ngoặc vuông giống như truy cập mảng 2D
Chúng tôi cũng đã giới thiệu cách sử dụng kết hợp toán tử dấu chấm và dấu ngoặc vuông để truy cập các đối tượng lồng nhau
________số 8_______đầu ra. Như chúng ta có thể quan sát thấy rằng đối tượng obj đã được hiển thị ở đây với thuộc tính 'trạng thái' đã được sửa đổi và một đối tượng 'thành phố' lồng nhau mới được thêm vào với các thuộc tính tên và đường phố
{ name: 'India', state: 'Mumbai', city: { name: 'Navi Mumbai', street: 12 } }
ví dụ 2
Lấy một ví dụ khác để hiểu được ưu điểm của ký hiệu dấu ngoặc vuông, ở đây chúng ta có một đối tượng JavaScript trống obj và để thêm các thuộc tính bên trong nó, chúng ta đang chạy vòng lặp for
Tên thuộc tính là một biểu thức phải được đánh giá trên mỗi lần lặp lại tùy thuộc vào giá trị của 'i' [khi i==1, obj['num1'] = 1;], rõ ràng hữu ích trong trường hợp tên thuộc tính động
0//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
đầu ra
1//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
Sử dụng đối tượng. Phương thứcdefineProperty[]
Lớp đối tượng JavaScript cung cấp phương thứcdefineProperty[] và sử dụng phương thức này, chúng ta có thể sửa đổi đối tượng hiện có hoặc thêm thuộc tính vào đối tượng JavaScript
Phương thức này trả về đối tượng đã sửa đổi và cũng cho phép chúng tôi kiểm soát hoặc định cấu hình hành vi của các thuộc tính
cú pháp
2//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
Ở đây, cấu hình bao gồm chủ yếu hai thuộc tính mà chúng ta có thể đặt thủ công. đếm được và ghi được
Nếu có thể ghi được đặt thành false, điều đó có nghĩa là chúng ta không thể sửa đổi hoặc đặt giá trị mới cho thuộc tính cụ thể này của đối tượng trong khi vô số biểu thị rằng giá trị phải được truy xuất động bằng cách sử dụng vòng lặp for hoặc đầu vào của người dùng, v.v. Hãy để chúng tôi hiểu lý thuyết này thực tế xem mã ví dụ
Ví dụ để chứng minh việc sử dụng phương thứcdefineProperty[] trong JavaScript
Trong mã ví dụ JavaScript bên dưới, ban đầu chúng tôi đã lấy một đối tượng trống có tên là obj. Để thêm các thuộc tính bên trong nó, chúng ta đã sử dụng Object. defineProperty[] để thêm thuộc tính 'id' vào obj và đặt thuộc tính cấu hình của nó - có thể ghi là 'false'
Tiếp theo, chúng tôi đã thử sửa đổi thuộc tính 'id' của obj nhưng do cấu hình có thể ghi được đặt thành false nên không có tác dụng đối với giá trị của đối tượng 'id'
3//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
đầu ra
4//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
Sử dụng đối tượng. phương thức gán []
Có một cách thú vị khác mà chúng ta có thể thêm một thuộc tính vào một đối tượng JavaScript i. e, bằng cách sử dụng Đối tượng. phương thức gán[]. Phương thức này cho phép chúng ta thêm các thuộc tính của một đối tượng nguồn vào một đối tượng đích khác. Chúng ta chỉ có thể định nghĩa tất cả các thuộc tính bên trong đối tượng nguồn mà chúng ta cần thêm vào đối tượng đích hiện có
Lưu ý rằng các thuộc tính bên trong đối tượng đích sẽ bị ghi đè bởi các thuộc tính của đối tượng nguồn nếu tìm thấy cùng một tên khóa trong cả hai đối tượng
cú pháp
5//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
Tại đây, đối tượng. phương thức gán[] của JavaScript đã được sử dụng và nguồn & đích biểu thị rằng các thuộc tính của đối tượng nguồn giờ đây cũng sẽ được thêm hoặc gán cho đối tượng đích
Ví dụ để chứng minh việc sử dụng đối tượng. Phương thức gán [] trong JavaScript
Trong mã ví dụ JavaScript bên dưới, chúng tôi có hai đối tượng student và info với các thuộc tính đã được xác định bên trong chúng. Bây giờ nhiệm vụ của chúng ta là thêm các thuộc tính của đối tượng thông tin vào đối tượng sinh viên và để làm điều này, chúng ta có thể sử dụng Object. phương thức gán [] bằng cách chuyển sinh viên và thông tin dưới dạng tham số tương ứng
6//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
đầu ra
7//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
Sử dụng toán tử trải rộng [. ]
Có một cách độc đáo khác để thêm thuộc tính vào đối tượng JavaScript bằng cách sử dụng toán tử trải rộng. Toán tử trải rộng [. ] tạo một bản sao của đối tượng hiện có với tất cả các thuộc tính của nó và do đó, bằng cách sử dụng định nghĩa thuộc tính nội tuyến, chúng ta có thể thêm nhiều thuộc tính hơn nữa vào đối tượng đó. Chúng ta hãy xem cú pháp để hiểu điều này một cách tốt hơn
cú pháp
8//displaying JavaScript property using dot notation console.log[car.brand]; //BMW //displaying JavaScript property using bracket notation console.log[car['year']]; //2010 //trying to access unassigned JavaScript property of car object console.log[car.name]; //undefined
Nơi đây,. đối tượng hầu như tạo một bản sao của các thuộc tính hiện có của đối tượng và sử dụng định nghĩa nội tuyến, chúng ta có thể thêm nhiều thuộc tính hơn [thuộc tính 1, thuộc tính 2. ] vào đối tượng hiện có
Ngoài ra, toán tử trải rộng cho phép chúng ta hợp nhất các thuộc tính của hai đối tượng thành một đối tượng mới
Lưu ý rằng cách tiếp cận sử dụng toán tử trải phổ này để hợp nhất hai đối tượng để tạo thành một đối tượng mới không ghi đè lên các thuộc tính hiện có của đối tượng nếu các khóa chung được tìm thấy trong cả đối tượng nguồn và đối tượng đích
Ví dụ để chứng minh việc sử dụng Phương thức toán tử trải rộng trong JavaScript
Trong mã ví dụ JavaScript bên dưới, chúng ta có một đối tượng có tên obj với các thuộc tính đã được xác định bên trong nó. Bây giờ chúng ta sẽ kiểm tra chức năng của toán tử trải phổ mà chúng ta có thể thêm nhiều thuộc tính bên trong đối tượng.
Chúng tôi sẽ sử dụng toán tử trải rộng trên đối tượng obj và sử dụng định nghĩa nội tuyến, chúng tôi sẽ thêm một số thuộc tính khác ['quốc tịch', 'giới tính'] bên trong obj. Để kiểm tra đối tượng kết quả, cuối cùng chúng tôi đã hiển thị các giá trị đối tượng