HomeLập trìnhJavaScriptĐối tượng trong...

Đối tượng trong JavaScript – Hướng dẫn cho người mới bắt đầu


Nếu bạn khai báo nhiều biến để giữ các giá trị khác nhau, điều này có thể làm cho chương trình của bạn trở nên lộn xộn và rườm rà.

Chẳng hạn, nếu bạn cần lưu trữ ba đặc điểm, mỗi đặc điểm cho 10 cá nhân, thì việc có 30 biến được khai báo riêng lẻ có thể khiến chương trình của bạn trông kém ngăn nắp hơn.

Vì vậy, bạn cần một cách để nhóm các giá trị có đặc điểm tương tự lại với nhau để làm cho mã của bạn dễ đọc hơn. Và trong JavaScript, các đối tượng hoạt động tốt cho mục đích này.

Không giống như các kiểu dữ liệu khác, các đối tượng có khả năng lưu trữ các giá trị phức tạp. Vì điều này, JavaScript phụ thuộc rất nhiều vào chúng. Vì vậy, điều quan trọng là bạn phải làm quen với đối tượng là gì, cách tạo đối tượng và cách bạn có thể sử dụng đối tượng đó trước khi tìm hiểu sâu về JavaScript.

Bài viết này sẽ giới thiệu cho bạn những kiến ​​thức cơ bản về đối tượng, cú pháp đối tượng, các phương thức khác nhau để tạo đối tượng, cách sao chép đối tượng và cách lặp lại đối tượng.

Để tận dụng tối đa bài viết này, ít nhất bạn cần có hiểu biết cơ bản về JavaScript, đặc biệt là các biến, hàm và kiểu dữ liệu.

Đối tượng trong JavaScript là gì?

Một đối tượng là một kiểu dữ liệu có thể nhận các tập hợp các cặp khóa-giá trị.

Sự khác biệt chính giữa một đối tượng và các loại dữ liệu khác như chuỗi và số trong JavaScript là một đối tượng có thể lưu trữ các loại dữ liệu khác nhau làm giá trị của nó. Mặt khác, các kiểu dữ liệu nguyên thủy như số và chuỗi chỉ có thể lưu trữ số và chuỗi tương ứng làm giá trị của chúng.

Khóa, còn được gọi là tên thuộc tính, thường là một chuỗi. Nếu bất kỳ loại dữ liệu nào khác được sử dụng làm tên thuộc tính ngoài chuỗi, nó sẽ được chuyển thành chuỗi.

Bạn có thể hình dung một đối tượng như một giá đa năng chứa không gian cho các đồ dùng và đồ trang trí của bạn cũng như không gian lưu trữ sách và tệp.

kệ1-2
Một kệ với một số mặt hàng trong đó

Đặc điểm dễ nhận biết nhất của một đối tượng là các dấu ngoặc vuông chứa cặp khóa-giá trị.

const emptyObject = {};
console.log(typeof emptyObject); //'object'

Nội dung của một đối tượng có thể bao gồm các biến, hàm hoặc cả hai. Các biến được tìm thấy trong các đối tượng là các thuộc tính, trong khi các hàm là các phương thức. Các phương thức cho phép các đối tượng sử dụng các thuộc tính bên trong chúng để thực hiện một số loại hành động.

Ví dụ: trong mã mẫu bên dưới, đối tượng1.user, đối tượng1. quốc tịchobject1.profession đều là thuộc tính của đối tượng1 trong khi đối tượng1.myBio() là một phương pháp:

const object1 = {
    user: "alex",
    nationality: "Nigeria",
    profession: "Software Enginneer",
    myBio() {
        console.log(`My name is ${this.user}. I'm a               ${this.profession} from ${this.nationality}`)
    }
}
console.log(object1.user); //Alex 
console.log(object1.nationality); //Nigeria 
console.log(object1.profession); //Software Engineer 
console.log(object1.myBio()); //My name is alex. I'm a Software Engineer from Nigeria

Các khóa trong mã mẫu ở trên là người dùng, quốc tịchnghề nghiệp trong khi các giá trị của chúng là các giá trị chuỗi xuất hiện sau dấu hai chấm. Ngoài ra, hãy lưu ý việc sử dụng cái này từ khóa. Các cái này từ khóa chỉ đơn giản đề cập đến chính đối tượng đó.

Đọc thêm  Cách xây dựng Menu thả xuống bằng JavaScript

Như đã đề cập trước đó trong bài viết này, giá trị của thuộc tính có thể là bất kỳ kiểu dữ liệu nào. Trong mã mẫu sau đây, các giá trị là cả mảng và đối tượng:

 const object2 = { 
        users: ["Alex", "James", "Mohammed"], 
        professions: { 
            alex: "software engineer", 
            james: "lawyer", 
            mohammed: "technical writer" 
        } 
    }; 
    console.log(object2.users); //['Alex', 'James', 'Mohammed'] 
    console.log(object2.professions); //{alex: 'software engineer', james: 'lawyer', mohammed: 'technical writer'}

Cách truy cập các đối tượng và tạo các thuộc tính hoặc phương thức đối tượng mới trong JavaScript

Có hai cách để truy cập các đối tượng: ký hiệu dấu chấm và ký hiệu dấu ngoặc. Trong mã mẫu trước, chúng tôi đã sử dụng ký hiệu dấu chấm để truy cập các thuộc tính và phương thức trong đối tượng1 đối tượng2.

Ngoài ra, để tạo các thuộc tính và phương thức mới sau khi khai báo một đối tượng, bạn có thể sử dụng ký hiệu dấu chấm hoặc ký hiệu ngoặc. Bạn chỉ cần nêu thuộc tính mới và đặt giá trị cho nó.

Chẳng hạn, chúng ta có thể thêm các thuộc tính mới vào đối tượng2 như thế này:

object2.ages = [30, 32, 40];
object2["summary"] = `Object2 has ${object2.users.length} users`;
console.log(object2);
/*
{
    "users": [
        "Alex",
        "James",
        "Mohammed"
    ],
    "professions": {
        "alex": "software engineer",
        "james": "lawyer",
        "mohammed": "technical writer"
    },
    "ages": [
        30,
        32,
        40
    ],
    "summary": "Object2 has 3 users"
}
*/

Tương tự, bạn có thể sử dụng một trong hai ký hiệu để thay đổi giá trị của một đối tượng:

đối tượng2.users = ["jane", "Williams", "John"];  đối tượng2["age"] = [20, 25, 29]
console.log(object2.users);  //['jane', 'Williams', 'John']
console.log(object2.ages) //[20, 25, 29

Although dot notation is the most commonly used to access an object’s properties and methods, it has some limitations. Let’s look at them now.

You Can’t Use Values as Property Names with Dot Notation

If you want to use the value of a variable as a property name in your object, you have to use bracket notation and not dot notation. Whether the variable value is defined at runtime or not is irrelevant.

Runtime is a phase of a computer program in which the program is run or executed on a computer system.

For example:

const object3 = {};
const gadget = prompt("enter a gadget type"); 
object3[gadget] = ["jbl", "sony"];  console.log(object3) //(hồi đáp được nhập trong dấu nhắc): ["jbl","sony"] lưu ý rằng tên thuộc tính là giá trị bạn nhập trong câu trả lời cho thông báo nhắc

Nếu bạn xác định giá trị biến trong mã của mình và bạn sử dụng ký hiệu dấu chấm để đặt giá trị đó làm tên thuộc tính của đối tượng, thì ký hiệu dấu chấm sẽ tạo thuộc tính mới có tên biến thay vì giá trị biến.

const computer = "brands"
object3.computer = ["hp", "dell", "apple"]
console.log(object3.brands); //undefined
console.log(object3.computer)//['hp', 'dell', 'apple']

object3[computer] = ["hp", "dell", "apple"]
console.log(object3.brands) //['hp', 'dell', 'apple']

Lưu ý việc bỏ dấu ngoặc kép trong dấu ngoặc vuông. Điều này là do các dấu ngoặc đã đưa vào một biến.

Bạn không thể sử dụng thuộc tính nhiều từ với ký hiệu dấu chấm

Trường hợp tên thuộc tính là một chuỗi nhiều từ thì ký hiệu dấu chấm là không đủ. Ví dụ:

object3.users height = [5.6, 5.4, 6.0];
Console.log(object3.users height); //SyntaxError

Xảy ra lỗi cú pháp vì JavaScript đọc lệnh dưới dạng object3.usersnhưng chiều cao chuỗi không được nhận dạng nên trả về lỗi cú pháp.

Khi sử dụng ký hiệu dấu chấm để truy cập các đối tượng, các quy tắc khai báo biến thông thường sẽ được áp dụng. Điều này có nghĩa là nếu bạn muốn sử dụng ký hiệu dấu chấm để truy cập một đối tượng hoặc tạo một thuộc tính, tên thuộc tính không được bắt đầu bằng một số, không được bao gồm bất kỳ dấu cách nào và chỉ có thể bao gồm các ký tự đặc biệt $_.

Để tránh loại lỗi này, bạn phải sử dụng ký hiệu ngoặc. Chẳng hạn, bạn có thể sửa mã mẫu ở trên như thế này:

object3["users height"] = [5.6, 5.4, 6.0];  
console.log(object3["users height"]); //[5.6, 5.4, 6]

Cách tạo đối tượng bằng Trình xây dựng đối tượng trong JavaScript

Có hai phương pháp để bạn có thể tạo một đối tượng: một đối tượng theo nghĩa đen và hàm tạo đối tượng. Các đối tượng được sử dụng làm mẫu trong bài viết này là các đối tượng theo nghĩa đen. Đối tượng chữ hoạt động tốt nếu bạn muốn tạo một đối tượng duy nhất.

Đọc thêm  DOM là gì? Hướng dẫn hậu trường

Nhưng nếu bạn muốn tạo nhiều hơn một đối tượng, tốt hơn hết là sử dụng hàm tạo đối tượng. Điều này cho phép bạn tránh sự lặp lại không cần thiết trong mã của mình và cũng giúp thay đổi các thuộc tính của đối tượng dễ dàng hơn.

Về cơ bản, hàm tạo là các hàm có tên thường được viết hoa. Việc viết hoa tên hàm tạo không có bất kỳ ảnh hưởng nào đối với đối tượng. Nó chỉ là một phương tiện nhận dạng.

Bạn có thể sử dụng một hàm tạo để tạo một đối tượng mới bằng cách gọi hàm tạo đó bằng lệnh Mới từ khóa. Các Mới từ khóa sẽ tạo một thể hiện của một đối tượng và liên kết cái này từ khóa cho đối tượng mới.

Như đã đề cập trước đó trong bài viết này, các cái này từ khóa là một tham chiếu đến chính đối tượng đó.

Một ví dụ về hàm tạo đối tượng là:

function Profile(name, age, nationality) { 
    this.name = name; 
    this.age = age; 
    this.nationality = nationality; 
    this.bio = function () { 
        console.log(`My name is ${this.name}. I'm ${this.age} years old. I'm from ${this.nationality}`) 
    } 
};

const oladele = new Profile("Oladele", 50, "Nigeria" );
console.log(oladele.bio()); //My name is Oladele. I'm 50 years old. I'm from Nigeria

Cách tạo bản sao đối tượng trong JavaScript

Không giống như các kiểu dữ liệu nguyên thủy như chuỗi và số, việc gán một đối tượng hiện có cho một biến khác sẽ không tạo ra bản sao của đối tượng gốc mà tạo ra một tham chiếu trong bộ nhớ.

Điều này có nghĩa là cả đối tượng ban đầu và các đối tượng tiếp theo được tạo bằng cách gán đối tượng ban đầu làm giá trị đều tham chiếu đến cùng một mục trong bộ nhớ.

Điều này có nghĩa là sự thay đổi giá trị của bất kỳ đối tượng nào cũng sẽ gây ra sự thay đổi ở những đối tượng khác. Ví dụ:

let x = 10;
let y = x;
x = 20;
console.log(x); //20
console.log(y); //10

let object4 = { 
    name: "Alex", 
    age: 40 
}; 
let object5 = object4; 
console.log(object5); //{name: 'Alex', age: 40} 
object4.name = "Jane"; 
console.log(object5); //{name: 'Jane', age: 40}
console.log(object4 === object5); //true

Để tạo một bản sao của một đối tượng, bạn có thể sử dụng toán tử trải rộng.

Toán tử lây lan là gì?

Toán tử trải rộng được biểu thị bằng ba dấu chấm ... . Bạn có thể sử dụng toán tử trải rộng để sao chép các giá trị của bất kỳ đối tượng nào có thể lặp lại bao gồm cả các đối tượng.

Một iterable là một đối tượng có thể được lặp lại hoặc lặp đi lặp lại với sự trợ giúp của vòng lặp for…. Ví dụ về iterables bao gồm các đối tượng, mảng, tập hợp, chuỗi, v.v.

Để sử dụng toán tử trải rộng, bạn sẽ phải thêm tiền tố vào đối tượng mà bạn muốn sao chép từ đó. Ví dụ:

let object6 = {...object5}; 
object5.name = "Willaims"; 
console.log(object5); //{name: 'Willaims', age: 40}
console.log(object6); //{name: 'Jane', age: 40}
console.log(object5 === object6); //false

Như bạn có thể thấy, không giống như trong mẫu mã trước đó, nơi thay đổi trong đối tượng4 gây ra một sự thay đổi trong đối tượng5sự thay đổi trong đối tượng6 đã không dẫn đến một sự thay đổi trong đối tượng5.

Cách sử dụng phương thức Object.assign()

Các Object.assign() phương thức sao chép tất cả các thuộc tính vô số của một đối tượng sang một đối tượng khác và sau đó trả về đối tượng đã sửa đổi.

Phương thức này nhận hai tham số. Tham số đầu tiên là đối tượng đích nhận các thuộc tính được sao chép. Tham số thứ hai là đối tượng nguồn có các thuộc tính mà bạn muốn sao chép. Ví dụ :

let object7  = Object.assign({}, object6); 
console.log(object7); //{name: 'Jane', age: 40}
console.log(object7); //{name: 'Jane', age: 40}

console.log(object6 === object7); //false
object6.age = 60
console.log(object6); //{name: 'Jane', age: 60}
console.log(object7); //{name: 'Jane', age: 40

Bạn có thể thấy từ mã mẫu ở trên rằng sự thay đổi giá trị của lứa tuổi tài sản của đối tượng6 không gây ra sự thay đổi trong vale của lứa tuổi tài sản của đối tượng7.

Đọc thêm  Hãy làm sáng tỏ từ khóa 'mới' của JavaScript

Lưu ý rằng cả toán tử trải rộng và Object.assign() phương pháp chỉ có thể tạo một bản sao nông của một đối tượng.

Điều này có nghĩa là nếu bạn có các đối tượng hoặc mảng được lồng sâu trong đối tượng nguồn của mình, thì chỉ các tham chiếu đến các đối tượng đó được sao chép vào đối tượng đích. Vì vậy, một sự thay đổi về giá trị của bất kỳ đối tượng được lồng sâu nào sẽ gây ra sự thay đổi về giá trị của đối tượng được lồng sâu của đối tượng kia. Ví dụ:

let objectX = {
    name: 'Mary', 
    age: 40,
    gadgets: { 
        brand: ["apple", "sony"]
    }
};

let objectY = {...objectX};
objectY.name = "Bianca";
objectY.gadgets.brand[0] = "hp";
console.log(objectX);
/*
{
    "name": "Mary",
    "age": 40,
    "gadgets": {
        "brand": [
            "hp",
            "sony"
        ]
    }
}
*/ 

console.log(objectY);
/*
{
    "name": "Bianca",
    "age": 40,
    "gadgets": {
        "brand": [
            "hp",
            "sony"
        ]
    }
}
*/

Mã mẫu ở trên đã thực hiện các hành động sau:

  1. Đã tạo một đối tượng có tên đối tượngX.
  2. Đã cho ba thuộc tính để đối tượngX: tên, tuổi và tiện ích.
  3. đã cho dụng cụ tài sản của đối tượngX một đối tượng như giá trị của nó.
  4. Đã cho giá trị đối tượng của tiện ích tài sản một thương hiệu tài sản.
  5. đã cho thương hiệu property một mảng làm giá trị của nó.
  6. Đã sao chép các thuộc tính trong đối tượngX vào trong đối tượngY với việc sử dụng toán tử trải rộng.
  7. Đã thay đổi giá trị của Tên tài sản của đối tượngY đến ma-ri-a.
  8. Đã thay đổi mục đầu tiên trong giá trị mảng của thương hiệu tài sản từ táo đến hp.

Trong mã mẫu, giá trị mảng là một đối tượng được lồng sâu. Lưu ý rằng một sự thay đổi trong giá trị của Tên tài sản của đối tượngY không làm thay đổi giá trị của Tên tài sản của đối tượngX. Nhưng một sự thay đổi trong đối tượng được lồng sâu của đối tượngY gây ra một thay đổi tương tự trong đối tượng lồng sâu của đối tượngX .

Cách lặp lại các đối tượng trong JavaScript

Sử dụng một tại vòng lặp để lặp qua một đối tượng và để chọn các thuộc tính của nó. Các tại cú pháp vòng lặp như sau:

for(let key in object) {
    //perform action(s) for each key
}

Các Chìa khóa từ khóa trong cú pháp trên là một tham số cho các thuộc tính. Vì vậy, bạn có thể thay thế nó bằng bất kỳ từ nào bạn chọn. Thay thế từ khóa đối tượng bằng tên của đối tượng bạn muốn lặp lại. Ví dụ:

let objectZ = {
    name: "Ade",
    Pronuon: "he",
    age: 60
};
for(let property in objectZ) {
    console.log(`${property}: ${objectZ[property]}`)
}
/* 
name: Ade
Pronuon: he
age: 60
*/

Lưu ý việc sử dụng ký hiệu dấu ngoặc trong vòng lặp để lấy các giá trị của thuộc tính. Sử dụng ký hiệu dấu chấm thay vì ký hiệu dấu ngoặc vuông sẽ trả về không xác định.

Phần kết luận

Trong JavaScript, các đối tượng có lẽ là loại dữ liệu quan trọng nhất. Các khái niệm lập trình như lập trình Hướng đối tượng hoạt động trên nguyên tắc tận dụng tính linh hoạt của các đối tượng để lưu trữ các giá trị phức tạp và khả năng tương tác riêng biệt của chúng với các thuộc tính và phương thức bên trong đối tượng.

Bài viết này đặt nền tảng vững chắc để hiểu các khái niệm nâng cao như vậy bằng cách giải thích các khái niệm cơ bản về đối tượng.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status