Các đối tượng – đối tượng js của các đối tượng

Bạn đang xem : đối tượng js của các đối tượng

Như chúng ta đã biết từ chương Các kiểu dữ liệu , có tám kiểu dữ liệu trong JavaScript. Bảy trong số chúng được gọi là “nguyên thủy”, vì giá trị của chúng chỉ chứa một thứ duy nhất (có thể là một chuỗi hoặc một số hoặc bất cứ thứ gì).

Ngược lại, các đối tượng được sử dụng để lưu trữ các bộ sưu tập có khóa gồm nhiều dữ liệu khác nhau và các thực thể phức tạp hơn. Trong JavaScript, các đối tượng thâm nhập vào hầu hết mọi khía cạnh của ngôn ngữ. Vì vậy, chúng ta phải hiểu chúng trước trước khi đi sâu vào bất kỳ nơi nào khác.

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

Chúng ta có thể hình dung một đối tượng như một cái tủ chứa các tệp đã ký. Mọi phần dữ liệu được lưu trữ trong tệp của nó bằng khóa. Thật dễ dàng để tìm một tệp theo tên của nó hoặc thêm / xóa một tệp.

Có thể tạo một đối tượng trống (“tủ trống”) bằng một trong hai cú pháp:

  let user = new Object (); // cú pháp "object constructor"
cho phép người dùng = {}; // cú pháp "đối tượng theo nghĩa đen"  

Thông thường, dấu ngoặc vuông {...} được sử dụng. Khai báo đó được gọi là một đối tượng theo nghĩa đen.

Chúng tôi có thể đặt một số thuộc tính ngay lập tức vào {...} dưới dạng cặp “key: value”:

  let user = {// an object
  name: "John", // theo khóa "name" giá trị cửa hàng "John"
  age: 30 // theo khóa "tuổi" giá trị cửa hàng 30
};  

Một thuộc tính có một khóa (còn được gọi là “tên” hoặc “số nhận dạng”) trước dấu hai chấm ":" và một giá trị ở bên phải của nó.

Trong đối tượng user , có hai thuộc tính:

  1. Thuộc tính đầu tiên có tên "name" và giá trị "John" .
  2. Tên thứ hai có tên "age" và giá trị 30 .

Đối tượng user kết quả có thể được hình dung như một tủ chứa hai tệp đã ký có nhãn “name” và “age”.

Chúng tôi có thể thêm, xóa và đọc các tệp từ đó bất kỳ lúc nào.

Có thể truy cập các giá trị thuộc tính bằng ký hiệu dấu chấm:

  // lấy các giá trị thuộc tính của đối tượng:
cảnh báo (tên người dùng); // John
cảnh báo (user.age); // 30  

Giá trị có thể thuộc bất kỳ loại nào. Hãy thêm một boolean:

  user.isAdmin = true;  

Để xóa một thuộc tính, chúng tôi có thể sử dụng toán tử delete :

  xóa user.age;  

Chúng tôi cũng có thể sử dụng tên thuộc tính nhiều từ, nhưng sau đó chúng phải được trích dẫn:

  let user = {
  tên: "John",
  tuổi: 30,
  "thích chim": true // tên thuộc tính nhiều từ khóa phải được trích dẫn
};  

Thuộc tính cuối cùng trong danh sách có thể kết thúc bằng dấu phẩy:

  let user = {
  tên: "John",
  tuổi: 30,
}  

Đó được gọi là dấu phẩy “dấu” hoặc “treo”. Giúp việc thêm / xóa / di chuyển xung quanh các thuộc tính trở nên dễ dàng hơn vì tất cả các dòng đều trở nên giống nhau.

Đối với các thuộc tính nhiều từ khóa, quyền truy cập dấu chấm không hoạt động:


  // điều này sẽ gây ra lỗi cú pháp
user.likes birds = true  

JavaScript không hiểu điều đó. Nó cho rằng chúng tôi xử lý user.likes , sau đó đưa ra lỗi cú pháp khi gặp chim không mong muốn.

Dấu chấm yêu cầu khóa phải là số nhận dạng biến hợp lệ. Điều đó ngụ ý: không chứa khoảng trắng, không bắt đầu bằng chữ số và không bao gồm các ký tự đặc biệt (cho phép $ _ ).

Có một “ký hiệu dấu ngoặc vuông” thay thế hoạt động với bất kỳ chuỗi nào:


  let user = {};

// bộ
user ["thích chim"] = true;

// lấy
alert (người dùng ["thích chim"]); // thật

// xóa bỏ
xóa người dùng ["thích chim"];  

Bây giờ mọi thứ đều ổn. Xin lưu ý rằng chuỗi bên trong dấu ngoặc vuông được trích dẫn chính xác (bất kỳ loại dấu ngoặc nào cũng vậy).

Dấu ngoặc vuông cũng cung cấp một cách để lấy tên thuộc tính là kết quả của bất kỳ biểu thức nào – trái ngược với một chuỗi ký tự – như từ một biến như sau:

  let key = "like chim";

// giống như user ["thích chim"] = true;
người dùng [key] = true;  

Tại đây, biến key có thể được tính toán tại thời điểm chạy hoặc phụ thuộc vào đầu vào của người dùng. Và sau đó chúng tôi sử dụng nó để truy cập tài sản. Điều đó mang lại cho chúng tôi rất nhiều sự linh hoạt.

Xem Thêm  Phân quyền người dùng với Laravel Authorization - phan trang trong laravel

Ví dụ:


  let user = {
  tên: "John",
  tuổi: 30
};

let key = prompt ("Bạn muốn biết gì về người dùng?", "name");

// truy cập theo biến
cảnh báo (người dùng [phím]); // John (nếu nhập "tên")  

Không thể sử dụng ký hiệu dấu chấm theo cách tương tự:


  let user = {
  tên: "John",
  tuổi: 30
};

let key = "name";
alert (user.key) // không xác định  

Chúng ta có thể sử dụng dấu ngoặc vuông trong một đối tượng theo nghĩa đen, khi tạo một đối tượng. Đó được gọi là thuộc tính được tính toán.

Ví dụ:


  let fruit = prompt ("Mua trái cây nào?", "apple");

để túi = {
  [fruit]: 5, // tên của thuộc tính được lấy từ biến fruit
};

cảnh báo (bag.apple); // 5 if fruit = "apple"  

Ý nghĩa của thuộc tính được tính rất đơn giản: [fruit] có nghĩa là tên thuộc tính phải được lấy từ fruit .

Vì vậy, nếu khách truy cập nhập "apple" , bag sẽ trở thành {apple: 5} .

Về cơ bản, điều đó hoạt động giống như:


  let fruit = prompt ("Mua trái cây nào?", "apple");
để túi = {};

// lấy tên thuộc tính từ biến fruit
bag [fruit] = 5;  

… Nhưng trông đẹp hơn.

Chúng tôi có thể sử dụng các biểu thức phức tạp hơn bên trong dấu ngoặc vuông:

  let fruit = 'apple';
để túi = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};  

Dấu ngoặc vuông mạnh hơn nhiều so với ký hiệu dấu chấm. Chúng cho phép bất kỳ tên thuộc tính và biến nào. Nhưng chúng cũng khó viết hơn.

Vì vậy, hầu hết thời gian, khi tên thuộc tính được biết đến và đơn giản, dấu chấm được sử dụng. Và nếu chúng ta cần thứ gì đó phức tạp hơn, thì chúng ta chuyển sang dấu ngoặc vuông.

Trong mã thực, chúng tôi thường sử dụng các biến hiện có làm giá trị cho tên thuộc tính.

Ví dụ:


  function makeUser (name, age) {
  trở về {
    tên tên,
    age: tuổi,
    // ...Các tài sản khác
  };
}

let user = makeUser ("John", 30);
cảnh báo (tên người dùng); // John  

Trong ví dụ trên, các thuộc tính có cùng tên với các biến. Trường hợp sử dụng của việc tạo thuộc tính từ một biến rất phổ biến, nên có một giá trị thuộc tính đặc biệt viết tắt để làm cho nó ngắn hơn.

Thay vì name: name , chúng ta chỉ có thể viết name , như sau:

  function makeUser (name, age) {
  trở về {
    name, // giống như name: name
    age, // giống như age: age
    // ...
  };
}  

Chúng ta có thể sử dụng cả thuộc tính bình thường và lối tắt trong cùng một đối tượng:

  let user = {
  name, // giống như name: name
  tuổi: 30
};  

Như chúng ta đã biết, một biến không thể có tên bằng một trong các từ dành riêng cho ngôn ngữ như “for”, “let”, “return”, v.v.

Nhưng đối với thuộc tính đối tượng, không có hạn chế như vậy:


  // các thuộc tính này đều ổn
hãy để obj = {
  Cho 1,
  cho: 2,
  trở lại: 3
};

cảnh báo (obj.for + obj.let + obj.return); // 6  

Nói tóm lại, không có giới hạn nào về tên tài sản. Chúng có thể là bất kỳ chuỗi hoặc ký hiệu nào (một loại đặc biệt cho số nhận dạng, sẽ được đề cập sau).

Các loại khác được tự động chuyển đổi thành chuỗi.

Ví dụ: một số 0 trở thành chuỗi "0" khi được sử dụng làm khóa thuộc tính:


  let obj = {
  0: "test" // giống như "0": "test"
};

// cả hai cảnh báo đều truy cập cùng một thuộc tính (số 0 được chuyển đổi thành chuỗi "0")
alert (obj ["0"]); // kiểm tra
cảnh báo (obj [0]); // kiểm tra (cùng thuộc tính)  

Có một chút gotcha với một thuộc tính đặc biệt có tên là __proto__ . Chúng tôi không thể đặt nó thành giá trị không phải đối tượng:


  let obj = {};
obj .__ proto__ = 5; // gán một số
cảnh báo (obj .__ proto__); // [đối tượng Đối tượng] - giá trị là một đối tượng, không hoạt động như dự định  

Như chúng ta thấy từ mã, việc gán cho 5 nguyên thủy bị bỏ qua.

Chúng tôi sẽ đề cập đến tính chất đặc biệt của __proto__ trong các chương tiếp theo và đề xuất cách khắc phục hành vi đó.

Một tính năng đáng chú ý của các đối tượng trong JavaScript, so với nhiều ngôn ngữ khác, là có thể truy cập vào bất kỳ thuộc tính nào. Sẽ không có lỗi nếu thuộc tính không tồn tại!

Việc đọc thuộc tính không tồn tại chỉ trả về không xác định . Vì vậy, chúng tôi có thể dễ dàng kiểm tra xem thuộc tính có tồn tại hay không:


  let user = {};

alert (user.noSuchProperty === undefined); // true có nghĩa là "không có thuộc tính như vậy"  

Cũng có một toán tử đặc biệt "in" cho điều đó.

Xem Thêm  Cách nhập mô-đun trong Python 3 - cách nhập thư viện python

Cú pháp là:

  "key" trong đối tượng  

Ví dụ:


  let user = {name: "John", age: 30};

alert ("tuổi" trong người dùng); // true, user.age tồn tại
alert ("blabla" trong người dùng); // false, user.blabla không tồn tại  

Xin lưu ý rằng ở phía bên trái của trong phải có tên thuộc tính. Đó thường là một chuỗi được trích dẫn.

Nếu chúng tôi bỏ qua dấu ngoặc kép, điều đó có nghĩa là một biến phải chứa tên thực được kiểm tra. Ví dụ:


  let user = {age: 30};

let key = "age";
cảnh báo (nhập người dùng); // true, thuộc tính "age" tồn tại  

Tại sao toán tử in tồn tại? Nó không đủ để so sánh với undefined ?

Chà, hầu hết thời gian so sánh với undefined đều hoạt động tốt. Tuy nhiên, có một trường hợp đặc biệt khi nó không thành công, nhưng "in" hoạt động chính xác.

Đó là khi một thuộc tính đối tượng tồn tại, nhưng lưu trữ không xác định :


  let obj = {
  kiểm tra: không xác định
};

cảnh báo (obj.test); // nó không được xác định, vì vậy - không có thuộc tính như vậy?

alert ("kiểm tra" trong obj); // true, thuộc tính tồn tại!  

Trong đoạn mã trên, thuộc tính obj.test tồn tại về mặt kỹ thuật. Vì vậy, toán tử in hoạt động bình thường.

Các tình huống như thế này rất hiếm khi xảy ra, vì undefined không nên được chỉ định rõ ràng. Chúng tôi chủ yếu sử dụng null cho các giá trị “không xác định” hoặc “trống”. Vì vậy, toán tử in là một khách lạ trong mã.

Để xem qua tất cả các khóa của một đối tượng, có một dạng đặc biệt của vòng lặp: for..in . Đây là một thứ hoàn toàn khác với cấu trúc for (;;) mà chúng tôi đã nghiên cứu trước đây.

Cú pháp:

  for (key in object) {
  // thực thi phần thân cho mỗi khóa trong số các thuộc tính của đối tượng
}  

Ví dụ: hãy xuất tất cả các thuộc tính của user :


  let user = {
  tên: "John",
  tuổi: 30,
  isAdmin: true
};

for (cho phép người dùng nhập) {
  // phím
  alert (phím); // tên, tuổi, isAdmin
  // giá trị cho các khóa
  cảnh báo (người dùng [phím]); // John, 30, true
}  

Lưu ý rằng tất cả các cấu trúc “for” đều cho phép chúng tôi khai báo biến lặp bên trong vòng lặp, chẳng hạn như let key tại đây.

Ngoài ra, chúng tôi có thể sử dụng một tên biến khác ở đây thay vì key . Ví dụ: "for (let prop in obj)" cũng được sử dụng rộng rãi.

Các đối tượng có được sắp xếp thứ tự không? Nói cách khác, nếu chúng ta lặp qua một đối tượng, liệu chúng ta có nhận được tất cả các thuộc tính theo cùng thứ tự mà chúng đã được thêm vào không? Chúng ta có thể dựa vào điều này không?

Câu trả lời ngắn gọn là: “được sắp xếp theo kiểu đặc biệt”: các thuộc tính số nguyên được sắp xếp, các thuộc tính khác xuất hiện theo thứ tự tạo. Chi tiết theo sau.

Ví dụ: hãy xem xét một đối tượng có mã điện thoại:


  let Code = {
  "49": "Đức",
  "41": "Thụy Sĩ",
  "44": "Vương quốc Anh",
  // ..,
  "1": "Hoa Kỳ"
};

for (để mã trong các mã) {
  cảnh báo (mã); // 1, 41, 44, 49
}  

Đối tượng có thể được sử dụng để đề xuất danh sách các tùy chọn cho người dùng. Nếu chúng tôi đang tạo một trang web chủ yếu cho khán giả Đức thì có lẽ chúng tôi muốn 49 là trang web đầu tiên.

Nhưng nếu chúng tôi chạy mã, chúng tôi thấy một bức tranh hoàn toàn khác:

  • Hoa Kỳ (1) đi đầu
  • rồi đến Thụy Sĩ (41), v.v.

Các mã điện thoại đi theo thứ tự được sắp xếp tăng dần vì chúng là số nguyên. Vì vậy, chúng tôi thấy 1, 41, 44, 49 .

Thuộc tính số nguyên? Đó là gì?

Thuật ngữ “thuộc tính số nguyên” ở đây có nghĩa là một chuỗi có thể được chuyển đổi thành và-từ một số nguyên mà không cần thay đổi.

Vì vậy, "49" là tên thuộc tính số nguyên, vì khi nó được chuyển đổi thành số nguyên và trở lại, nó vẫn giống nhau. Nhưng "+49" "1.2" thì không:


  // Số (...) chuyển đổi rõ ràng thành một số
// Math.trunc là một hàm tích hợp giúp loại bỏ phần thập phân
alert (String (Math.trunc (Number ("49")))); // "49", giống nhau, thuộc tính số nguyên
alert (String (Math.trunc (Number ("+ 49")))); // "49", không giống "+49" ⇒ không phải thuộc tính số nguyên
alert (String (Math.trunc (Number ("1.2")))); // "1", không giống "1.2" ⇒ không phải thuộc tính số nguyên  

… Mặt khác, nếu các khóa không phải là số nguyên, thì chúng được liệt kê theo thứ tự tạo, ví dụ:

Xem Thêm  Phần bổ sung JavaScript - javascript thêm vào phần tử


  let user = {
  tên: "John",
  họ: "Smith"
};
user.age = 25; // thêm một cái nữa

// các thuộc tính không phải số nguyên được liệt kê theo thứ tự tạo
for (cho phép người dùng ủng hộ) {
  cảnh báo (chống đỡ); // tên, họ, tuổi
}  

Vì vậy, để khắc phục sự cố với mã điện thoại, chúng tôi có thể “gian lận” bằng cách đặt các mã không phải là số nguyên. Thêm dấu cộng "+" trước mỗi mã là đủ.

Như thế này:


  let Code = {
  "+49": "Đức",
  "+41": "Thụy Sĩ",
  "+44": "Vương quốc Anh",
  // ..,
  "+1": "Hoa Kỳ"
};

for (để mã trong các mã) {
  alert (+ mã); // 49, 41, 44, 1
}  

Bây giờ nó hoạt động như dự định.

Đối tượng là các mảng liên kết với một số tính năng đặc biệt.

Họ lưu trữ các thuộc tính (cặp khóa-giá trị), trong đó:

  • Khóa thuộc tính phải là chuỗi hoặc ký hiệu (thường là chuỗi).
  • Giá trị có thể thuộc bất kỳ loại nào.

Để truy cập một thuộc tính, chúng tôi có thể sử dụng:

  • Ký hiệu dấu chấm: obj.property .
  • Kí hiệu dấu ngoặc vuông obj ["property"] . Dấu ngoặc vuông cho phép lấy khóa từ một biến, như obj [varWithKey] .

Các toán tử bổ sung:

  • Để xóa một thuộc tính: xóa obj.prop .
  • Để kiểm tra xem thuộc tính có khóa đã cho có tồn tại hay không: "key" trong obj .
  • Để lặp lại một đối tượng: vòng lặp for (let key in obj) .

Những gì chúng ta đã nghiên cứu trong chương này được gọi là “đối tượng thuần túy” hay chỉ là Đối tượng .

Có nhiều loại đối tượng khác trong JavaScript:

  • Mảng để lưu trữ các bộ sưu tập dữ liệu có thứ tự,
  • Ngày để lưu trữ thông tin về ngày và giờ,
  • Lỗi để lưu trữ thông tin về lỗi.
  • … Và tiếp tục như vậy.

Chúng có những tính năng đặc biệt mà chúng ta sẽ nghiên cứu sau. Đôi khi mọi người nói một cái gì đó như “Kiểu mảng” hoặc “Kiểu ngày”, nhưng về mặt hình thức, chúng không phải là kiểu của riêng họ, mà thuộc về một kiểu dữ liệu “đối tượng” duy nhất. Và họ mở rộng nó theo nhiều cách khác nhau.

Các đối tượng trong JavaScript rất mạnh mẽ. Ở đây chúng tôi chỉ mới sơ lược về bề nổi của một chủ đề thực sự rất lớn. Chúng tôi sẽ làm việc chặt chẽ với các đối tượng và tìm hiểu thêm về chúng trong các phần tiếp theo của hướng dẫn.


Xem thêm những thông tin liên quan đến chủ đề đối tượng js của các đối tượng

Buổi 6: Hướng đối tượng trong javascript

  • Tác giả: Thien TH
  • Ngày đăng: 2020-03-20
  • Đánh giá: 4 ⭐ ( 6578 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Object trong Javascript (đọc hiểu trong 5 phút)

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 6802 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu object trong javascript, giúp bạn hiểu được khái niệm đối tượng object là gì? Cách khởi tạo và các thêm thuộc tính / phương thức vào đối tượng.

Đối tượng trong JavaScript

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 3968 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript là một Ngôn ngữ chương trình hướng đối tượng (Object Oriented Programming). Một Ngôn ngữ chương trình có thể được gọi là hướng đối tượng nếu nó cung cấp 4 khả năng cơ bản tới nhà lập trình.

Đối tượng Form trong JavaScript

  • Tác giả: voer.edu.vn
  • Đánh giá: 5 ⭐ ( 5905 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng Form trong JavaScript (giáo trình – tài liệu – học liệu từ VOER)

Các cách lập trình hướng đối tượng trong JavaScript – Blog

  • Tác giả: vn.got-it.ai
  • Đánh giá: 3 ⭐ ( 6343 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng đối tượng trong JavaScript làm như thế nào? Bài viết dưới đây sẽ giúp bạn hiện thực hóa các đặc tính của OOP với 4 thủ thuật lập trình hướng đối tượng trong JavaScript cực đơn giản và hiệu quả.

Đối tượng trong JavaScript | JavaScript Object

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 5 ⭐ ( 8826 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn này, bạn sẽ học cách tạo đối tượng và sử dụng đối tượng trong JavaScript theo cách đơn giản, dễ hiểu nhất.

Đối tượng trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 6638 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng trong JavaScript – Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình