Thêm đối tượng vào đối tượng JavaScript

Đố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

//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
0

đầu ra

//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
1

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

//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
2

Ở đâ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'

//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
3

đầu ra

//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
4

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

//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
5

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

//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
6

đầu ra

//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
7

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

//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
8

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

Làm cách nào để thêm đối tượng vào đối tượng trong JavaScript?

Sử dụng dấu ngoặc vuông [ ] . Trong JavaScript, chúng ta có thể sử dụng dấu ngoặc [] để thêm phần tử vào đối tượng. Đây là một cách khác để thêm một phần tử vào đối tượng JavaScript.

Làm cách nào để thêm nhiều đối tượng vào một đối tượng trong JavaScript?

Để đạt được điều này, chúng ta sẽ sử dụng phương thức đẩy. Như bạn có thể thấy, chúng ta chỉ cần truyền đối tượng obj vào phương thức push() và nó sẽ thêm nó vào cuối mảng. Để thêm nhiều đối tượng vào một mảng, bạn có thể chuyển nhiều đối tượng làm đối số cho phương thức push() , phương thức này sẽ thêm tất cả các mục vào cuối .