Review: Objects

Đây là một đánh giá về những gì chúng tôi trình bày trong hướng dẫn này về các đối tượng.

Chúng tôi có nhiều loại giá trị mà chúng tôi có thể lưu trữ trong các biến JavaScript và đôi khi chúng tôi muốn lưu trữ một loạt các giá trị liên quan với nhau: đó là nơi các đối tượng xuất hiện!

Một đối tượng là một kiểu dữ liệu cho phép chúng ta lưu trữ một tập hợp các thuộc tính trong một biến duy nhất. Để tạo một đối tượng, chúng ta khai báo một biến như chúng ta thường làm, và sau đó chúng ta sử dụng dấu ngoặc nhọn để bao quanh các cặp thuộc tính khóa-giá trị:

var objectName = { 
  propertyName: propertyValue,
  propertyName: propertyValue,
  ...
};

Dưới đây là một đối tượng mà mô tả Winston - đối tượng này có hai thuộc tính, hometown và hair, và mỗi người trong số các giá trị tài sản là chuỗi:

var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};

Dưới đây là một đối tượng phức tạp hơn mô tả một con mèo, với bốn Properties-  age, furColor, likes, và birthday.

var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, "year": 1994}
};

Lưu ý cách mỗi thuộc tính lưu trữ một loại dữ liệu khác nhau - agelưu trữ một số, furColorlưu trữ một chuỗi, likeslưu trữ một mảng và birthdaylưu trữ một đối tượng khác. Đó là điều thú vị về các vật thể (à, một trong những thứ hay ho) - chúng có thể lưu trữ các vật thể khác bên trong chúng! Vì vậy, bạn có thể có các đối tượng lồng nhau sâu để mô tả dữ liệu phức tạp.

Bạn cũng có thể thấy các đối tượng được khai báo bằng dấu ngoặc kép quanh tên thuộc tính, như:

var aboutWinston = {
  "hometown": "Mountain View, CA",
  "hair": "no"
};

Điều đó tương đương với những gì chúng ta thấy trước đây không có dấu ngoặc kép, nhưng phải mất nhiều thời gian hơn để gõ. Lần duy nhất bạn thực sự cần dấu ngoặc kép là nếu tên tài sản của bạn có khoảng trắng trong đó, như:

var aboutWinston = {
  "his hair": "none"
};

Chúng tôi phải sử dụng dấu ngoặc kép ở đó, vì nếu không thì trình thông dịch JavaScript sẽ bị lẫn lộn. Đây là mẹo của tôi dành cho bạn: chỉ cần không sử dụng khoảng trắng trong tên thuộc tính của bạn để bắt đầu! Sau đó, bạn không bao giờ phải sử dụng dấu ngoặc kép xung quanh tên tài sản.

Truy cập thuộc tính đối tượng

Một đối tượng không hữu ích trừ khi chúng ta có thể nhìn vào bên trong nó và lấy các giá trị của các thuộc tính khác nhau. Chúng ta có thể làm theo hai cách - đầu tiên, bằng cách sử dụng cái mà chúng ta gọi là "ký hiệu dấu chấm", trong đó chúng ta viết tên của biến, theo sau là ".", Và sau đó là tên thuộc tính:

var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};

text("Winston is from " + aboutWinston.hometown, 100, 100);
text("Winston has " + aboutWinston.hair + " hair", 100, 150);

Chúng ta cũng có thể sử dụng "ký hiệu ngoặc", trông giống như cách chúng ta truy cập các phần tử mảng, trong đó chúng ta viết tên biến, sau đó là dấu ngoặc vuông, với tên thuộc tính bên trong dấu ngoặc kép:

var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];

Nếu chúng tôi cố gắng truy cập vào một tài sản không tồn tại, chúng tôi sẽ thấy "không xác định":

text("Winston's life goal is " + aboutWinston.lifeGoal, 100, 150);

Sửa đổi thuộc tính đối tượng

Giống như khi chúng ta lưu trữ các loại dữ liệu khác trong các biến, chúng ta có thể thay đổi giá trị của các thuộc tính đối tượng bất cứ lúc nào trong một chương trình, bằng cách sử dụng ký hiệu dấu chấm hoặc dấu ngoặc:

aboutWinston.hair = "curly"; // Winston gets a wig!

Chúng tôi cũng có thể thêm các thuộc tính hoàn toàn mới!

aboutWinston.lifeGoal = "teach JavaScript";

Nếu chúng tôi hoàn thành với một tài sản, chúng tôi có thể xóa nó (nhưng hầu hết thời gian có lẽ chúng tôi sẽ chỉ thay đổi giá trị của nó):

delete aboutWinston.hair;

Mảng của đồ vật

Bây giờ bạn đã biết cả mảng và đối tượng, bạn có thể kết hợp chúng để tạo ra các mảng đối tượng, đây là những cách thực sự hữu ích để lưu trữ dữ liệu trong các chương trình. Ví dụ, một loạt các con mèo:

var myCats = [
  {name: "Lizzie", 
   age: 18},
  {name: "Daemon",
   age: 1}
];

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  println(myCat.name + ' is ' + myCat.age + ' years old.');
}

Lưu ý rằng chúng ta lặp qua một mảng các đối tượng giống như cách chúng ta lặp qua một mảng các số hoặc chuỗi, sử dụng vòng lặp for. Trong mỗi lần lặp, chúng ta truy cập phần tử mảng hiện tại bằng ký hiệu ngoặc và sau đó truy cập vào các thuộc tính của phần tử mảng đó (một đối tượng) bằng ký hiệu dấu chấm.

Đây là một ví dụ thực tế khác mà bạn có thể sử dụng trong các chương trình của mình, một loạt các vị trí tọa độ:

var positions = [
    {x: 200, y: 100},
    {x: 200, y: 200},
    {x: 200, y: 300}
];

for (var i = 0; i < positions.length; i++) {
    var position = positions[i];
    ellipse(position.x, position.y, 100, 100);
}

Khá gọn gàng, aye? Đối tượng có thể gây nhầm lẫn lúc đầu, nhưng tiếp tục sử dụng chúng, và cuối cùng bạn sẽ được nghiện và biến mọi thứ thành một đối tượng!