Saturday, February 15, 2025
HomeLập Trình JavaScriptObject | Lập trình JavaScript

Object | Lập trình JavaScript

Giới thiệu về Object

Trong JavaScript, Object là một kiểu dữ liệu phức hợp dùng để biểu diễn các đối tượng trong đời thực. Một object là một tập hợp các cặp key-value (khóa-giá trị), trong đó key là tên thuộc tính và value là giá trị của thuộc tính đó.

Tạo một Empty object (object rỗng)

Có hai cách tạo nên một object trong JS, một là dùng constructor, hai là dùng object literal
Ví dụ: Một Empty Object sẽ được tạo ra bằng hai cú pháp sau đây

let person = new Object(); // object consctructor
let animal = {}; // object literal

Thông thường sẽ ưu tiên dùng cách khai báo kiểu object literal hơn
Object bên trong sẽ chứa các thuộc tính, mỗi thuộc tính bao gồm cặp key – value

let person ={
  name: "Nguyen Van Nam",
  age: 25,
  carrer: "Software Developer"
}

Đối tượng person có hai thuộc tính đó là:
Thuộc tính name có giá trị là “Nguyen Van Nam”
Thuộc tính age có giá trị là 25
Thuộc tính carrer có giá trị là “Software Developer”
Các giá trị của thuộc tính có thể được truy cập thông qua dấu chấm

console.log(person.name);
console.log(person.age);
console.log(person.carrer);

Kết quả thu được:

Nguyen Van Nam
25
Software Developer

Chúng ta có thể thêm xoá và đọc từ object bất kỳ lúc nào, có thể thêm một kiểu bất kỳ vào object

Ví dụ bên dưới sẽ tiến hành thêm và xoá sau đó đọc ra các thuộc tính trong đối tượng

let person ={
    name: "Nguyen Van Nam",
    age: 25,
    carrer: "Software Developer"
  }

person.IsMale = true; // Thêm mới thuộc tính IsMale

delete person.carrer; // Xóa thuộc tính carrer

console.log(person.name);
console.log(person.age);
console.log(person.carrer); // vì xoá đi sẽ trở thành undefined
console.log(person.IsMale); // True

Chúng ta cũng có thể đặt tên dạng multiword cho thuộc tính, nhưng phải bao quanh bởi dấu nháy kép

let person ={
    name: "Nguyen Van Nam",
    age: 25,
    carrer: "Software Developer",
    "health status": "Good" // áp dụng đặt tên theo multiwword
  }

Dấu ngoặc vuông (Square brackets)

Lưu ý đối với thuộc tính dùng multiword thì sử dụng dấu chấm để truy vấn thuộc tính sẽ không được

console.log(person.health status); // không thể 

Javascript sẽ không hiểu, nó sẽ nghĩ rằng chúng ta nhập địa chỉ là person.health, và đưa ra một cảnh báo lỗi cho từ status.

Dấu chấm sẽ yêu cầu key là một biến định danh hợp lệ. Có nghĩa là: không chứa khoảng trắng, không bắt đầu với một chữ số và không bao gồm các ký tự đặc biệt ($ và _ được cho phép).

Dưới đây là một cách truy cập đến thuộc tính dùng multiword hợp lệ

let person = {
    name: "Nguyen Van Nam",
    age: 25,
    carrer: "Software Developer",
    "health status": "Good" // áp dụng đặt tên theo multiwword
  }

// Set giá trị
person["health status"]= "Sick";

// Get giá trị
console.log(person["health status"]);

// Delete thuộc tính
delete person["health status"];

// Truy vấn lại sẽ undefined
console.log(person["health status"]);

Lưu ý rằng chúng ta dùng dấu nháy đơn hoặc nháy kép đều được

console.log(person['health status']);

Chúng ta cũng có thể chứa thuộc tính multiword trong một biến kiểu string như sau

let person ={
    name: "Nguyen Van Nam",
    age: 25,
    carrer: "Software Developer",
    "health status": "Good" // áp dụng đặt tên theo multiwword
  }

let key = "health status";

// Set giá trị
person[key]= "Sick";

// Get giá trị
console.log(person[key]);

// Delete thuộc tính
delete person[key];

// Truy vấn lại sẽ undefined
console.log(person[key]);
  

Với cách làm trên sẽ mang lại sự linh hoạt và dễ điều chỉnh một lần, biến key sẽ được tính toán ở thời điểm runtime. Một ví dụ về sự linh hoạt này

let person ={
    name: "Nguyen Van Nam",
    age: 25,
    carrer: "Software Developer",
    "health status": "Good" // áp dụng đặt tên theo multiwword
  }

// Một lệnh nhắc nhập tên thuộc tính, mặc định là name
let key = prompt("which property you want to known ?","name");

// Get giá trị
console.log(person[key]); // Nguyen Van Nam

Dấu chấm sẽ không dùng được với cách trên

// Một lệnh nhắc nhập tên thuộc tính, mặc định là name
let key = prompt("which property you want to known ?","name");

// Get giá trị
console.log(person.key); // Không xác định

Thuộc tính tính toán (Computed properties)

Chúng ta có thể sử dụng dấu ngoặc vuông trong một object literal, khi chúng ta tạo một object. Điều này được gọi là computed properties.
Ví dụ

// Tên của thuộc tính được lấy từ prompt
let drink = prompt("What kind of drink do you want to buy?","water");

// khai báo object có computed properties 
let cart = {
  [drink]: "$5"
}

// Truy vấn thuộc tính như thông thường
console.log(cart.water); // $5

Hoạt động tương tự và sẽ trông đẹp hơn

let drink = prompt("What kind of drink do you want to buy?","water");
let cart = {}
cart[drink]="$5";
console.log(cart[drink]); // $5

Chúng ta sẽ sử dụng một biểu thức phức tạp hơn bên trong dấu ngoặc vuông

let drink = "water";
let cart = {}
cart[drink+"Price"]="$5";
console.log(cart[drink+"Price"]); // $5

Viết tắt giá trị thuộc tính

function makeUser(name,age){
  return {
    name:name,
    age:age
  }
}
let user = makeUser("Ly Hoai Nam",18);
console.log(user.name); //  Ly Hoai Nam
console.log(user.age); //18

Ở code trên chúng ta có một hàm makeUser có hai tham số name và age và cuối cùng sẽ trả về một object với hai thuộc tính cũng có tên name và age, và chúng ta thấy có sự trùng nhau về tên nên chúng ta có thể viết tắt như sau

function makeUser(name,age){
  return {
    name, // tương tự name:name
    age // tương tự age:age
  }
}
let user = makeUser("Ly Hoai Nam",18);
console.log(user.name); //  Ly Hoai Nam
console.log(user.age); //18

Chúng ta cũng có thể sử dụng viết tắt và viết tường minh trong cùng một object

function makeUser(name,age){
  return {
    name, // tương tự name:name
    age:age 
  }
}

Các giới hạn về tên thuộc tính

Như chúng ta đã biết, các tên dành riêng như let, for, return sẽ không được dùng để đặt tên biến, nhưng trong object thì không có quy tắt này, bạn có thể tùy thích đặt tên của property

let sampleObject = {
  let: "Nguyen Thuy An",
  for: 26,
  var: "2005",
  return: "Sales",
};

console.log(sampleObject);
//{ let: 'Nguyen Thuy An', for: 26, var: '2005', return: 'Sales' }

Ngoài ra thuộc tên của thuộc tính sẽ tự động chuyển sang string

let sampleObject = {
  10: "Nguyen Thuy An",
};

console.log(sampleObject[10]); //Nguyen Thuy An
console.log(sampleObject["10"]); //Nguyen Thuy An

Kiểm tra sự tồn tại của Property

// Kiểm tra bằng kiểu
let sampleObject = {};
if (sampleObject === undefined) {
  console.log("Empty object");
}

// Kiểm tra bằng từ khóa "in"
let fruit = {
  name: "apple",
  price: 5,
};
if ("name" in fruit) {
  console.log("name is Exist");
}
if (!("weigth" in fruit)) {
  console.log("weigth is not Exist");
}

// Sự bất hợp lý khi dùng "in"
let animal = {
  name: "dog",
  Speak: undefined,
};

if ("Speak" in animal) {
  console.log("Speak is exist"); // sẽ bất hợp lý
}

// Dùng for in để kiểm tra 
let person = {
  name: "Thuy Chi",
  age: 30,
  job: "Teacher",
};
for (key in person) {
  console.log(key);
  console.log(person[key]);
}

Thứ tự của các properties

Mặc định thứ tự các prop in ra sẽ theo thứ tự tăng dần nếu là số, ngược lại chúng sẽ theo thứ tự trong object

let foodMenu = {
  54: "Milks",
  45: "Meat",
  68: "Soups",
  12: "Steak",
};

for (let food in foodMenu) {
  console.log(food);  // 12, 45, 54 , 68
}

nếu không phải số thì chúng sắp xếp theo thư khi khai báo object

let foodMenu = {
  "+54": "Milks",
  "+45": "Meat",
  menu3: "Soups",
  menu4: "Steak",
};

for (let food in foodMenu) {
  console.log(food); // +54, +45, menu3, menu 4
}

Nguồn tham khảo: https://javascript.info/

Nguyễn Minh Châu
Nguyễn Minh Châuhttps://nhatkydev.com
Hi guys ! I'm a software developer. I love programming and new technologies. I create non-professional content on this website, you can only view it for reference purposes.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular