Chỉ nhận các giá trị thực từ đối tượng javascript

Như chúng ta đã biết từ chương 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", bởi 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 khi đi sâu vào bất cứ nơi nào khác

Một đối tượng có thể được tạo bằng dấu ngoặc nhọn

user.isAdmin = true;

2 với danh sách thuộc tính tùy chọn. Thuộc tính là “chìa khóa. value”, trong đó

user.isAdmin = true;

3 là một chuỗi (còn được gọi là “tên thuộc tính”) và

user.isAdmin = true;

4 có thể là bất kỳ thứ gì

Chúng ta có thể tưởng tượng một đối tượng như một chiếc 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 tệp

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

let user = new Object(); // "object constructor" syntax
let user = {};  // "object literal" syntax

Thông thường, các dấu ngoặc đơn

user.isAdmin = true;

5 được sử dụng. Tuyên bố đó được gọi là một đối tượng theo nghĩa đen

Chúng ta có thể ngay lập tức đặt một số thuộc tính vào

user.isAdmin = true;

5 dưới dạng “khóa. cặp giá trị

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 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

user.isAdmin = true;

7 và một giá trị ở bên phải của nó

Trong đối tượng

user.isAdmin = true;

8, có hai thuộc tính

1. Thuộc tính đầu tiên có tên

   user.isAdmin = true;

   9 và giá trị

   delete user.age;

   0
2. Cái thứ hai có tên

   delete user.age;

   1 và giá trị

   delete user.age;

   2

Đối tượng

user.isAdmin = true;

8 kết quả có thể được tưởng tượng như một chiếc tủ có hai tập tin được ký tên có nhãn “tên” và “tuổi”

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

Giá trị thuộc tính có thể truy cập được bằng cách sử dụng ký hiệu dấu chấm

// get property values of the object:
alert( user.name ); // John
alert( 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;

Để loại bỏ một thuộc tính, chúng ta có thể sử dụng toán tử

delete user.age;

4

delete 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 = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

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 = {
  name: "John",
  age: 30,
}

Đó được gọi là dấu phẩy “dấu” hoặc “treo”. Làm cho 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 giống nhau

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

// this would give a syntax error
user.likes birds = true

JavaScript không hiểu điều đó. Nó nghĩ rằng chúng tôi giải quyết

delete user.age;

5, và sau đó đưa ra lỗi cú pháp khi gặp phải

delete user.age;

6 không mong muốn

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

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 = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

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

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 = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

Ở đây, biến

user.isAdmin = true;

3 có thể được tính trong thời gian 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

Ví dụ

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

0

Ký hiệu dấu chấm không thể được sử dụng theo cách tương tự

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

1

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

Ví dụ

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

2

Ý nghĩa của một thuộc tính được tính toán rất đơn giản.

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

0 có nghĩa là tên tài sản nên được lấy từ

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

1

Vì vậy, nếu một khách truy cập nhập vào

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

2, thì

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

3 sẽ trở thành

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

4

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

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

3

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

Chúng ta 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 user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

4

Dấu ngoặc vuông mạnh hơn nhiều so với ký hiệu dấu chấm. Họ cho phép mọi tên thuộc tính và biến. Nhưng chúng cũng rườm rà hơn để viết

Vì vậy, hầu hết thời gian, khi tên thuộc tính được biết và đơn giản, dấu chấm được sử dụng. Và nếu chúng ta cần một cái 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ụ

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

5

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 để tạo một thuộc tính từ một biến phổ biến đến mức có một cách viết tắt giá trị thuộc tính đặc biệt để làm cho nó ngắn hơn

Thay vì

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

5 chúng ta chỉ có thể viết

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

6, như thế này

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

6

Chúng ta có thể sử dụng cả thuộc tính thông thường và tốc ký trong cùng một đối tượng

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

7

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 một thuộc tính đối tượng, không có giới hạn nào như vậy

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

8

Nói tóm lại, không có giới hạn 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

Chẳng hạn, một số

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

7 trở thành một chuỗi

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

8 khi được sử dụng làm khóa thuộc tính

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

9

Có một vấn đề nhỏ với thuộc tính đặc biệt tên là

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

9. Chúng tôi không thể đặt nó thành một giá trị phi đối tượng

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

0

Như chúng ta thấy từ đoạn mã, việc gán cho một

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

0 nguyên thủy bị bỏ qua

Chúng tôi sẽ đề cập đến bản chất đặc biệt của

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

9 trong các chương tiếp theo và đề xuất các 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 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

Đọc thuộc tính không tồn tại chỉ trả về

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

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

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

1

Ngoài ra còn có một toán tử đặc biệt

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

3 cho việc đó

Cú pháp là

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

2

Ví dụ

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

3

Xin lưu ý rằng ở phía bên trái của

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

4 phải có tên tài sản. Đó thường là một chuỗi trích dẫn

Nếu chúng ta 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ật cần kiểm tra. Ví dụ

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

4

Tại sao tồn tại toán tử

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

4?

Chà, hầu hết thời gian so sánh với

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

2 hoạt động tốt. Nhưng có một trường hợp đặc biệt khi nó bị lỗi, nhưng

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

3 vẫn hoạt động bình thường

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

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

2

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

5

Trong đoạn mã trên, tài sản

// this would give a syntax error
user.likes birds = true

0 tồn tại về mặt kỹ thuật. Vì vậy, toán tử

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

4 hoạt động đúng

Những tình huống như thế này rất hiếm khi xảy ra, bởi vì

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

2 không nên được chỉ định một cách rõ ràng. Chúng tôi chủ yếu sử dụng

// this would give a syntax error
user.likes birds = true

3 cho các giá trị "không xác định" hoặc "trống". Vì vậy, toán tử

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

4 là một vị khách kỳ lạ trong mã

Để duyệt qua tất cả các phím của một đối tượng, tồn tại một dạng vòng lặp đặc biệt.

// this would give a syntax error
user.likes birds = true

5. Đây là một thứ hoàn toàn khác với cấu trúc

// this would give a syntax error
user.likes birds = true

6 mà chúng ta đã nghiên cứu trước đây

cú pháp

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

6

Chẳng hạn, hãy xuất ra tất cả các thuộc tính của

user.isAdmin = true;

8

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

7

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

// this would give a syntax error
user.likes birds = true

8 ở đây

Ngoài ra, chúng ta có thể sử dụng một tên biến khác ở đây thay vì

user.isAdmin = true;

3. Chẳng hạn,

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

0 cũng được sử dụng rộng rãi

Các đối tượng có được sắp xếp không?

Câu trả lời ngắn gọn là. “đặt hàng theo cách đặ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. các chi tiết sau

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

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

8

Đố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 dành cho khán giả Đức thì có lẽ chúng tôi muốn

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

1 là trang đầu tiên

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

• Hoa Kỳ (1) đi trước
• sau đó là Thụy Sĩ (41), v.v.

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

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

2

Tính chất số nguyên?

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 sang và từ một số nguyên mà không cần thay đổi

Vì vậy,

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

3 là một tên thuộc tính số nguyên, bởi vì khi nó được chuyển đổi thành một số nguyên và ngược lại, nó vẫn như vậy. Nhưng

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

4 và

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

5 thì không

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

9

…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 chẳng hạn

user.isAdmin = true;

0

Vì vậy, để khắc phục sự cố với mã điện thoại, chúng ta có thể “ăn gian” bằng cách làm cho mã không nguyên. Thêm dấu cộng

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

6 trước mỗi mã là đủ

Như thế này

user.isAdmin = true;

1

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

Các đối tượng là các mảng kết hợp với một số tính năng đặc biệt

Chúng 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)
• Các giá trị có thể thuộc bất kỳ loại nào

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

• Ký hiệu dấu chấm.

  let user = {};
  
  // set
  user["likes birds"] = true;
  
  // get
  alert(user["likes birds"]); // true
  
  // delete
  delete user["likes birds"];

  7
• Ký hiệu dấu ngoặc vuông

  let user = {};
  
  // set
  user["likes birds"] = true;
  
  // get
  alert(user["likes birds"]); // true
  
  // delete
  delete user["likes birds"];

  8. Dấu ngoặc vuông cho phép lấy khóa từ một biến, như

  let user = {};
  
  // set
  user["likes birds"] = true;
  
  // get
  alert(user["likes birds"]); // true
  
  // delete
  delete user["likes birds"];

  9

Toán tử bổ sung

• Để xóa một thuộc tính.

  let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  0
• Để kiểm tra xem một thuộc tính với khóa đã cho có tồn tại không.

  let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  1
• Để lặp lại một đối tượng.

  let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  2 vòng lặp

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

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

3

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

• let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  4 để lưu trữ các bộ sưu tập dữ liệu đã đặt hàng,

• let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  5 để lưu trữ thông tin về ngày giờ,

• let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  6 để lưu trữ thông tin về lỗi
• …Và như thế

Chúng có những tính năng đặc biệt nào mà chúng ta sẽ nghiên cứu sau. Đôi khi mọi người nói điều 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 chúng 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. Ở đây chúng ta vừa vạch ra bề nổi của một chủ đề thực sự lớn. Chúng ta 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

Làm cách nào để chỉ nhận các giá trị từ đối tượng trong JavaScript?

Làm cách nào để lấy dữ liệu từ đối tượng đối tượng trong JavaScript?

Làm cách nào để kiểm tra xem thuộc tính đối tượng có đúng trong JavaScript không?

Làm cách nào để kiểm tra xem có bất kỳ khóa nào trong đối tượng là JavaScript đúng không?