Đối tượng trong JavaScript

Tóm lược. trong hướng dẫn này, bạn sẽ tìm hiểu về các đối tượng JavaScript và cách thao tác các thuộc tính đối tượng một cách hiệu quả

Giới thiệu về các đối tượng JavaScript

Trong JavaScript, một đối tượng là một tập hợp các cặp khóa-giá trị không có thứ tự. Mỗi cặp khóa-giá trị được gọi là một thuộc tính

Khóa của một thuộc tính có thể là một chuỗi. Và giá trị của một thuộc tính có thể là bất kỳ giá trị nào, e. g. , một chuỗi, một số, một mảng và thậm chí là một hàm

JavaScript cung cấp cho bạn nhiều cách để tạo một đối tượng. Cách được sử dụng phổ biến nhất là sử dụng ký hiệu chữ đối tượng

Ví dụ sau tạo một đối tượng

objectName['propertyName']

Code language: CSS (css)
3 và sử dụng toán tử

let person = { firstName: 'John', lastName: 'Doe' }; console.log(person.firstName); console.log(person.lastName);

Code language: JavaScript (javascript)
8 để kiểm tra xem các thuộc tính

objectName['propertyName']

Code language: CSS (css)
5 và

objectName['propertyName']

Code language: CSS (css)
6 có tồn tại trong đối tượng hay không

Các đối tượng, trong JavaScript, là loại dữ liệu quan trọng nhất và tạo thành các khối xây dựng cho JavaScript hiện đại. Các đối tượng này hoàn toàn khác với các kiểu dữ liệu nguyên thủy của JavaScript (Số, Chuỗi, Boolean, null, không xác định và ký hiệu) theo nghĩa là tất cả các kiểu dữ liệu nguyên thủy này đều lưu trữ một giá trị duy nhất (tùy thuộc vào loại của chúng)

cú pháp

let object_name = {
    key_name : value,
    ...
}

Chúng ta hãy xem một ví dụ về Đối tượng JavaScript bên dưới

jav




<script>

    // JavaScript code demonstrating a simple object

    

let school = {
    "school name" : "Vivekananda School",
}
0

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______2_______5_______3_______5_______4

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______6
let school = {
    "school name" : "Vivekananda School",
}
7
let school = {
    "school name" : "Vivekananda School",
}
4

let school = {
    "school name" : "Vivekananda School",
}
1_______15_______0
(objectName.memberName)
1
let school = {
    "school name" : "Vivekananda School",
}
4

let school = {
    "school name" : "Vivekananda School",
}
1_______15_______4
(objectName.memberName)
5
(objectName.memberName)
6

(objectName.memberName)
7
(objectName.memberName)
8

(objectName.memberName)
9
 objectName["memberName"]
0
 objectName["memberName"]
1

let school = {
    "school name" : "Vivekananda School",
}
1____25_______3

    

 objectName["memberName"]
3

    

 objectName["memberName"]
7

 objectName["memberName"]
8

Đầu ra.

Đối tượng trong JavaScript
Trong ví dụ này, “tên”, “địa điểm” và “thành lập” đều là “khóa” và “Trường Vivekananda”, “Delhi” và 1971 lần lượt là giá trị của các khóa này. Mỗi khóa này được gọi là thuộc tính của đối tượng. Một đối tượng trong JavaScript cũng có thể có một chức năng như một thành viên, trong trường hợp đó, nó sẽ được gọi là một phương thức của đối tượng đó. Ở đây  “displayinfo” là một phương thức của đối tượng trường học đang được sử dụng để làm việc với dữ liệu của đối tượng, được lưu trữ trong các thuộc tính của nó.

  • Các đối tượng phức tạp hơn và mỗi đối tượng có thể chứa bất kỳ sự kết hợp nào của các kiểu dữ liệu nguyên thủy này cũng như các kiểu dữ liệu tham chiếu
  • Một đối tượng là một kiểu dữ liệu tham chiếu. Các biến được gán một giá trị tham chiếu sẽ được cung cấp một tham chiếu hoặc một con trỏ tới giá trị đó. Tham chiếu hoặc con trỏ đó trỏ đến vị trí trong bộ nhớ nơi đối tượng được lưu trữ. Các biến không thực sự lưu trữ giá trị
  • Nói một cách lỏng lẻo, các đối tượng trong JavaScript có thể được định nghĩa là một tập hợp dữ liệu liên quan không có thứ tự, thuộc các kiểu nguyên thủy hoặc tham chiếu, ở dạng “khóa. cặp giá trị. Các khóa này có thể là các biến hoặc hàm và được gọi tương ứng là các thuộc tính và phương thức trong ngữ cảnh của một đối tượng

Một đối tượng có thể được tạo bằng dấu ngoặc nhọn {…} với danh sách thuộc tính tùy chọn. Thuộc tính là “chìa khóa. cặp giá trị”, trong đó khóa là một chuỗi (còn được gọi là “tên thuộc tính”) và giá trị có thể là bất kỳ thứ gì

Thuộc tính đối tượng JavaScript. Tên thuộc tính có thể là chuỗi hoặc số. Trong trường hợp tên thuộc tính là số, chúng phải được truy cập bằng cách sử dụng "ký hiệu ngoặc" như thế này

Thí dụ

jav




<script>

    

let school = {
    "school name" : "Vivekananda School",
}
0

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______2_______5_______3_______5_______4

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______6
let school = {
    "school name" : "Vivekananda School",
}
7
let school = {
    "school name" : "Vivekananda School",
}
4

let school = {
    "school name" : "Vivekananda School",
}
1_______15_______0
(objectName.memberName)
1
let school = {
    "school name" : "Vivekananda School",
}
4

let school = {
    "school name" : "Vivekananda School",
}
1_______46_______5

let school = {
    "school name" : "Vivekananda School",
}
1_______15_______4
(objectName.memberName)
5
(objectName.memberName)
6

(objectName.memberName)
7<script>1<script>2<script>3

let school = {
    "school name" : "Vivekananda School",
}
1____25_______3

    

 objectName["memberName"]
3

    

 objectName["memberName"]
7

 objectName["memberName"]
8

Đầu ra.

Đối tượng trong JavaScript
Nhưng nhiều hơn về ký hiệu dấu ngoặc sau. Tên thuộc tính cũng có thể là các chuỗi có nhiều từ được phân tách bằng dấu cách. Trong trường hợp đó, các tên thuộc tính này phải được đặt trong dấu ngoặc kép.

let school = {
    "school name" : "Vivekananda School",
}

Giống như tên thuộc tính là số, chúng cũng phải được truy cập bằng cách sử dụng ký hiệu dấu ngoặc. Giống như nếu chúng ta muốn truy cập 'Vivekananda' từ 'Vivekananda School', chúng ta có thể làm điều gì đó như thế này

Thí dụ

jav




<script>

        3

    

let school = {
    "school name" : "Vivekananda School",
}
0

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______2_______5_______3_______5_______4

let school = {
    "school name" : "Vivekananda School",
}
1_______15_______4
(objectName.memberName)
5
(objectName.memberName)
6

(objectName.memberName)
7// JavaScript code demonstrating a simple object5// JavaScript code demonstrating a simple object6// JavaScript code demonstrating a simple object7

let school = {
    "school name" : "Vivekananda School",
}
1____25_______3

    

 objectName["memberName"]
3

        3    4

 objectName["memberName"]
8

đầu ra. Trong đoạn mã trên, chúng tôi đã sử dụng ký hiệu ngoặc và cả phương thức phân tách do JavaScript cung cấp mà bạn sẽ tìm hiểu trong bài viết về chuỗi

Đối tượng trong JavaScript

Thuộc tính kế thừa. Thuộc tính kế thừa của một đối tượng là những thuộc tính đã được kế thừa từ nguyên mẫu của đối tượng, trái ngược với việc được xác định cho chính đối tượng, được gọi là thuộc tính riêng của đối tượng. Để xác minh xem một thuộc tính có phải là thuộc tính Riêng của đối tượng hay không, chúng ta có thể sử dụng phương thức hasOwnProperty. Thuộc tính thuộc tính Thuộc tính dữ liệu trong JavaScript có bốn thuộc tính

  • giá trị. Giá trị tài sản
  • ghi được. Khi đúng, giá trị của thuộc tính có thể được thay đổi
  • đếm được. Khi đúng, thuộc tính có thể được lặp lại bằng cách liệt kê "for-in". Mặt khác, tài sản được cho là không thể đếm được
  • có thể định cấu hình. Nếu sai, các nỗ lực xóa thuộc tính, thay đổi thuộc tính thành quyền truy cập hoặc thuộc tính hoặc thay đổi thuộc tính của thuộc tính (không phải [[Giá trị]] hoặc thay đổi [[Có thể ghi]] thành sai) sẽ không thành công

Thí dụ

jav




<script>

        8

    

let school = {
    "school name" : "Vivekananda School",
}
00_______5_______01
let school = {
    "school name" : "Vivekananda School",
}
02

    

let school = {
    "school name" : "Vivekananda School",
}
04

    

    

let school = {
    "school name" : "Vivekananda School",
}
07_______5_______08
let school = {
    "school name" : "Vivekananda School",
}
09_______5_______10

 objectName["memberName"]
8

đầu ra.

Đối tượng trong JavaScript

Tạo đối tượng. Để tạo đối tượng tham khảo bài viết sau. Giới thiệu. - https. //www. chuyên viên máy tính. org/?p=190694

Truy cập thành viên đối tượng. Thành viên đối tượng (thuộc tính hoặc phương pháp) có thể được truy cập bằng cách sử dụng

ký hiệu dấu chấm

(objectName.memberName)

Thí dụ

jav




<script>

    

let school = {
    "school name" : "Vivekananda School",
}
0

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______16

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______18

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______20

let school = {
    "school name" : "Vivekananda School",
}
1_______46_______5

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______24
(objectName.memberName)
5
let school = {
    "school name" : "Vivekananda School",
}
26

(objectName.memberName)
7
(objectName.memberName)
8

let school = {
    "school name" : "Vivekananda School",
}
29
 objectName["memberName"]
0
 objectName["memberName"]
1

let school = {
    "school name" : "Vivekananda School",
}
1____25_______3

    

    

 objectName["memberName"]
3

    

let school = {
    "school name" : "Vivekananda School",
}
38

    

    

let school = {
    "school name" : "Vivekananda School",
}
41

 objectName["memberName"]
8

đầu ra.

Đối tượng trong JavaScript

Ký hiệu khung

 objectName["memberName"]

Thí dụ

jav




<script>

    

let school = {
    "school name" : "Vivekananda School",
}
0

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______47

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______18

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______51

let school = {
    "school name" : "Vivekananda School",
}
1_______46_______5

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______24
(objectName.memberName)
5
let school = {
    "school name" : "Vivekananda School",
}
26

(objectName.memberName)
7
let school = {
    "school name" : "Vivekananda School",
}
59

let school = {
    "school name" : "Vivekananda School",
}
29
 objectName["memberName"]
0
 objectName["memberName"]
1

let school = {
    "school name" : "Vivekananda School",
}
1____25_______3

    

 objectName["memberName"]
3

    

    

let school = {
    "school name" : "Vivekananda School",
}
69

    

let school = {
    "school name" : "Vivekananda School",
}
71_______5_______72
let school = {
    "school name" : "Vivekananda School",
}
73

    

    

let school = {
    "school name" : "Vivekananda School",
}
76

    

let school = {
    "school name" : "Vivekananda School",
}
71_______162_______2
let school = {
    "school name" : "Vivekananda School",
}
73

 objectName["memberName"]
8

đầu ra.

Đối tượng trong JavaScript

Không giống như ký hiệu dấu chấm, từ khóa dấu ngoặc hoạt động với bất kỳ tổ hợp chuỗi nào, bao gồm nhưng không giới hạn đối với chuỗi nhiều từ. Ví dụ

somePerson.first name // invalid
    somePerson["first name"] // valid

Không giống như ký hiệu dấu chấm, ký hiệu dấu ngoặc cũng có thể chứa các tên là kết quả của bất kỳ biến biểu thức nào có giá trị được tính trong thời gian chạy. Ví dụ

let key = "first name" somePerson[key] = "Name Surname"

Các thao tác tương tự không thể thực hiện được khi sử dụng ký hiệu dấu chấm

Lặp lại tất cả các khóa của một đối tượng. Để lặp lại tất cả các khóa có thể đếm được hiện có của một đối tượng, chúng ta có thể sử dụng cấu trúc for…in. Điều đáng chú ý là điều này cho phép chúng ta chỉ truy cập các thuộc tính của một đối tượng có thể đếm được (Hãy nhớ rằng có thể đếm được là một trong bốn thuộc tính của thuộc tính dữ liệu). Chẳng hạn, các thuộc tính được kế thừa từ Đối tượng. nguyên mẫu không đếm được. Tuy nhiên, vô số thuộc tính được kế thừa từ đâu đó cũng có thể được truy cập bằng cách sử dụng cấu trúc for…in

Thí dụ.  

jav




<script>

    

let school = {
    "school name" : "Vivekananda School",
}
84

let school = {
    "school name" : "Vivekananda School",
}
1_______5_______86
let school = {
    "school name" : "Vivekananda School",
}
87

    

 objectName["memberName"]
3

    

    

let school = {
    "school name" : "Vivekananda School",
}
92
let school = {
    "school name" : "Vivekananda School",
}
93

    

let school = {
    "school name" : "Vivekananda School",
}
95_______5_______96
let school = {
    "school name" : "Vivekananda School",
}
97

    

let school = {
    "school name" : "Vivekananda School",
}
99

    

(objectName.memberName)
01
(objectName.memberName)
02
let school = {
    "school name" : "Vivekananda School",
}
97

    

    

(objectName.memberName)
06
(objectName.memberName)
07
 objectName["memberName"]
0
(objectName.memberName)
09

    

(objectName.memberName)
11

    

(objectName.memberName)
13

let school = {
    "school name" : "Vivekananda School",
}
1_______15_______15

    

(objectName.memberName)
17

 objectName["memberName"]
8

đầu ra.

Đối tượng trong JavaScript

Xóa thuộc tính. Để xóa một thuộc tính của một đối tượng, chúng ta có thể sử dụng toán tử xóa. Một ví dụ về việc sử dụng nó đã được liệt kê dưới đây

Đối tượng trong JavaScript là gì?

Trong JavaScript, một đối tượng là một thực thể độc lập, có thuộc tính và loại . So sánh nó với một cái cốc chẳng hạn. Một cái cốc là một đối tượng, với các thuộc tính. Một chiếc cốc có màu sắc, kiểu dáng, trọng lượng, chất liệu làm ra nó, v.v. Theo cách tương tự, các đối tượng JavaScript có thể có các thuộc tính xác định đặc điểm của chúng.

Loại đối tượng trong JavaScript là gì?

Một loại đối tượng chỉ đơn giản là tập hợp các thuộc tính ở dạng cặp tên và giá trị . Lưu ý từ danh sách rằng null và undefined là các kiểu dữ liệu JavaScript nguyên thủy, mỗi kiểu là một kiểu dữ liệu chỉ chứa một giá trị.

Làm cách nào để gọi một đối tượng trong JavaScript?

Phương thức call() là một phương thức JavaScript được xác định trước. Nó có thể được sử dụng để gọi (gọi) một phương thức với đối tượng chủ sở hữu làm đối số (tham số). Với call() , một đối tượng có thể sử dụng một phương thức thuộc đối tượng khác.

Lớp và đối tượng trong JavaScript là gì?

Lớp là khuôn mẫu để tạo đối tượng . Họ đóng gói dữ liệu bằng mã để làm việc trên dữ liệu đó. Các lớp trong JS được xây dựng trên các nguyên mẫu nhưng cũng có một số cú pháp và ngữ nghĩa duy nhất cho các lớp. Để biết thêm ví dụ và giải thích, hãy xem hướng dẫn Sử dụng các lớp.