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ínhobjectName['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ôngCá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_______6let school = { "school name" : "Vivekananda School", }7let school = { "school name" : "Vivekananda School", }4
let school = { "school name" : "Vivekananda School", }1_______15_______0(objectName.memberName)1let 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.
- 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_______6let school = { "school name" : "Vivekananda School", }7let school = { "school name" : "Vivekananda School", }4
let school = { "school name" : "Vivekananda School", }1_______15_______0(objectName.memberName)1let 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.
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
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_______08let school = { "school name" : "Vivekananda School", }09_______5_______10
objectName["memberName"]8
đầu ra.
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)5let 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.
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)5let school = { "school name" : "Vivekananda School", }26
(objectName.memberName)7let 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_______72let school = { "school name" : "Vivekananda School", }73
let school = { "school name" : "Vivekananda School", }76
let school = { "school name" : "Vivekananda School", }71_______162_______2let school = { "school name" : "Vivekananda School", }73
objectName["memberName"]8
đầu ra.
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"] // validKhô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_______86let 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_______96let school = { "school name" : "Vivekananda School", }97
let school = { "school name" : "Vivekananda School", }99
(objectName.memberName)01(objectName.memberName)02let 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.
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