“Bài này nằm trong loạt bài Kỹ thuật xử lý Javascript nâng cao (đang cập nhật) trên trang blog chính thức trungquandev. com“ Show
Những nội dung có trong bài
1. Lặp đối tượng – lặp đối tượng trong JavascriptMình sẽ lần ví dụ triển khai theo 5 cách dưới đây, trong quá trình đi làm thực tế tùy theo những trường hợp yêu cầu khác nhau mà mình sẽ sử dụng từng cách để xử lý dữ liệu sao cho phù hợp nhất * cho…trong vòng lặpfor…in – giúp chúng ta lấy key của đối tượng trong mỗi lần lặp và có thể sử dụng key đó để lấy giá trị của đối tượng const object1 = {
id: 17,
name: 'trungquan',
website: 'https://trungquandev.com'
}
for (let key in object1) {
if (object1.hasOwnProperty(key)) {
console.log(`${key}: ${object1[key]}`)
}
}
// expected output:
// 'id: 17'
// 'name: trungquan'
// 'website: https://trungquandev.com'
//
* Mục tiêu. phímMục tiêu. keys() sẽ nhận đối tượng của chúng ta làm tham số và trả về kết quả là một mảng (mảng) chứa tất cả các khóa của đối tượng const object1 = {
id: 17,
name: 'trungquan',
website: 'https://trungquandev.com'
}
console.log(Object.keys(object1))
// expected output: ["id", "name", "website"]
Object.keys(object1).forEach(key => {
console.log(`${key}: ${object1[key]}`)
})
// expected output:
// 'id: 17'
// 'name: trungquan'
// 'website: https://trungquandev.com'
//
* Mục tiêu. giá trịMục tiêu. các giá trị () sẽ nhận đối tượng của chúng ta làm tham số và trả về kết quả là một mảng (mảng) chứa tất cả giá trị của đối tượng const object1 = {
id: 17,
name: 'trungquan',
website: 'https://trungquandev.com'
}
console.log(Object.values(object1))
// expected output: [17, "trungquan", "https://trungquandev.com"]
Object.values(object1).forEach(value => {
console.log(value)
})
// expected output:
// 17
// 'trungquan'
// 'https://trungquandev.com'
//* Mục tiêu. mụcMục tiêu. các mục() sẽ nhận đối tượng của chúng ta làm tham số và trả về một mảng mà bên trong đó lại tiếp tục là các mảng nhỏ hơn chứa các cặp khóa, giá trị của đối tượng const object1 = {
id: 17,
name: 'trungquan',
website: 'https://trungquandev.com'
}
console.log(Object.entries(object1))
// expected output: [["id", 17], ["name", "trungquan"], ["website", "https://trungquandev.com"]]
Object.entries(object1).forEach(([key, value]) => {
console.log(`${key}: ${value}`)
})
// expected output:
// 'id: 17'
// 'name: trungquan'
// 'website: https://trungquandev.com'
//
* Mục tiêu. getOwnPropertyNamesMục tiêu. getOwnPropertyNames() sẽ nhận đối tượng của chúng ta làm tham số và trả về một mảng chứa các thuộc tính hoặc khóa (bao gồm cả thuộc tính không thể đánh số) của đối tượng Trong bài hướng dẫn này, mình sẽ giúp bạn tìm hiểu về các đối tượng JavaScript (JavaScript Object) và cách thao tác với các thuộc tính đối tượng một cách hiệu quả 1. Đối tượng trong JavaScript là như thế nào? Trong JavaScript, một đối tượng (đố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 key - value được gọi là một thuộc tính
Khi một hàm là thuộc tính của một đối tượng, nó không còn được gọi là hàm nữa mà thường được gọi là một phương thức (phương thức) JavaScript cung cấp cho bạn nhiều cách để tạo một đối tượng mới. Cách phổ biến nhất là sử dụng cú pháp theo nghĩa đen của đối tượng Ví dụ sau khi tạo một đối tượng trống bằng cách sử dụng cú pháp theo nghĩa màu đen của đối tượng Để tạo một đối tượng có thuộc tính, bạn sử dụng Ví dụ. Đoạn mã tạo đối tượng Chúng ta vừa tạo một đối tượng có tên là Object có nhiều thuộc tính thì sẽ được phân tách bằng dấu hiệu 2. Truy cập thuộc tính của đối tượng như thế nào?Để truy cập thuộc tính của đối tượng trong JavaScript chúng ta có hai cách Cách #1. Sử dụng dấu chấm .Để truy cập thuộc tính của đối tượng trong JS bằng dấu chấm, chúng ta sử dụng tên đối tượng , theo sau là tên thuộc tính như thế này Ví dụ, trong đối tượng chúng ta vừa tạo ở trên, bây giờ mình muốn truy cập vào thuộc tính Ví dụ bên dưới sẽ ghi giá trị của thuộc tính bảng điều khiển. nhật ký (sinh viên. Tên); bảng điều khiển. nhật ký (sinh viên. tuổi); Kết quả trong bảng điều khiển ta được Cách #2. Sử dụng cặp bỏ bớt cạnh tranh { }4Chúng ta cũng có thể truy cập thuộc tính của đối tượng trong JavaScript bằng cách sử dụng dấu ngoặc nhọn [ ], như sau
Ví dụ, cũng truy cập các thuộc tính của bảng điều khiển. nhật ký (sinh viên ["tên"]); bảng điều khiển. nhật ký (sinh viên ["tuổi"]); Kết quả ta được tương ứng với cách sử dụng dấu chấm Nhưng tại sao kết quả giống nhau mà lại cần đến 2 chiều? Vấn đề nằm ở vị trí của thuộc tính Khi thuộc tính tên có khoảng trống, chúng ta phải đặt nó trong dấu nháy đơn (hoặc kép) Ví dụ Để truy cập vào địa chỉ thuộc tính, ta chỉ có thể sử dụng khung trích dẫn Nếu bạn cố gắng truy cập thuộc tính này bằng dấu chấm Thì bạn sẽ nhận lại một cú pháp lỗi. > Lưu ý. Đặt tên thuộc tính của đối tượng có chứa khoảng trắng không phải là một cách tốt. Tốt nhất là sử dụng cách đặt tên theo camelCase Ngoài ra, nếu bạn cố gắng truy cập một thuộc tính không tồn tại, bạn sẽ nhận được kết quả là
3. Sửa đổi giá trị thuộc tính của đối tượngĐể thay đổi giá trị của một thuộc tính, bạn sử dụng toán tử gán Ví dụ Kết quả ta được 4. Add a new property into objectKhông giống như ngôn ngữ Java hay C++, trong JavaScript, bạn có thể thêm các thuộc tính sau khi tạo đối tượng Bây giờ, sau khi đã tạo ra đối tượng Sau đó, ta relog đối tượng Kết quả 5. Xoá thuộc tính của đối tượngĐể xóa thuộc tính của đối tượng ta sử dụng toán tử
Ví dụ, xóa thuộc tính Bây giờ, hãy cố gắng truy cập lại thuộc tính
6. Kiểm tra xem thuộc tính có tồn tại trong đối tượng không?Để kiểm tra xem một thuộc tính tồn tại trong một đối tượng hay không, bạn có thể sử dụng toán tử
Toán tử Ví dụ. Kiểm tra xem thuộc tính bảng điều khiển. log("studentID" trong sinh viên); Kết quả 7. liệt kê các thuộc tính của đối tượng với vòng lặp student2Để lặp qua tất cả các thuộc tính của một đối tượng mà không cần biết tên thuộc tính, bạn sử dụng vòng lặp Ví dụ. Sử dụng vòng lặp for in để lặp qua đối tượng // Log ra giá trị của chốt khóa bảng điều khiển. log(sinh viên[key]); Kết quả Hoặc in ra key name as after 8. Create method of JavaScript ObjectBên cạnh các thuộc tính (dữ liệu), các đối tượng có thể có các phương thức hành động. Hành động của các đối tượng được gọi là các phương thức Ví dụ. Thêm phương thức // Add de form tên là xin chào sinh viên. xin chào = function() { bảng điều khiển. log("Xin chào NIIT - ICT Hà Nội"); // Thử gọi mô thức xin chào Kết quả ta được Ví dụ. Thêm phương thức bảng điều khiển. log("Xin chào NIIT - ICT Hà Nội"); // Thử gọi mô thức xin chào Trong ví dụ này, ta tạo một hàm thông thường. Biểu thức Bạn có thể định nghĩa các phương thức của một đối tượng bằng cách sử dụng cú pháp theo nghĩa đen của đối tượng như ví dụ sau bảng điều khiển. log("Xin chào NIIT - ICT Hà Nội"); Nếu bạn muốn rút gọn hơn thì cũng có thể sử dụng tính năng của ES6, cho phép bạn định nghĩa phương thức cho một đối tượng thu gọn hơn bảng điều khiển. log("Xin chào NIIT - ICT Hà Nội"); Trông gọn gàng và dễ hiểu hơn nhỉ?. D > Lưu ý. Bạn có thể thắc mắc tại sao không sử dụng chức năng cú pháp mũi tên của ES6 để thu gọn? Nó liên quan đến giá trị Thông thường, các phương thức cần truy cập dữ liệu được lưu trữ trong đối tượng Ví dụ. Bạn có thể muốn tạo một phương thức trả về tên và tuổi của đối tượng Bên trong phương thức này, giá trị Do đó, bạn có thể truy cập một thuộc tính của đối tượng bằng cách sử dụng giá trị Ví dụ. Use bảng điều khiển. log("Xin chào NIIT - ICT Hà Nội"); trả lại cái này. tên + " " + này. tuổi + " tuổi. “; // Lấy thông tin đối tượng bảng điều khiển. nhật ký (sinh viên. nhận thông tin()); Kết quả Total results about Object in JavaScriptNhư vậy trong bài hướng dẫn này, mình đã giới thiệu với bạn cơ bản về Object trong JavaScript, cách tạo Object cũng như cách truy cập thuộc tính, xóa thuộc tính, lặp qua các thuộc tính cùng với đó là cách bổ sung phương thức Hi vọng giúp bạn hiểu cơ bản về JavaScript Object để vận dụng nó khi học Javascript chuyên sâu cũng như học React. js hay các thư viện / framework khác --- HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội SĐT. 0243. 557. 4074 - 0383. 180086 E-mail. xin chào@niithanoi. giáo dục. vn trang chủ. https. //Facebook. com/NIIT. CNTT-TT/ #niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php #icthanoi |
