5 hàm JavaScript về Object bắt buộc phải biết nếu muốn thành lập trình viên Super Vip Pro

Tiếp nối bài viết 15 hàm JavaScript bắt buộc phải thành thạo nếu muốn trở thành lập trình viên Super Vip Pro, tôi xin phép được chia sẻ cùng với các bạn về 5 hàm Object bắt buộc phải biết trong JavaScript và cũng phổ thông nhất giúp cho việc lập trình trở nên đơn giản và nhanh chóng hơn. Hy vọng bài viết này sẽ giúp ích cho nhiều bạn trên con đường trở thành lập trình viên Super Vip Pro ))))

1. assign()

Chúng ta sẽ cùng bắt đầu với hàm Object.assign(). Cái này rất tuyệt để khởi tạo/hợp nhất các đối tượng và bạn có thể sử dụng nó để thiết lập mặc định.

Chúng ta hãy cùng xem nó hoạt động như thế nào nhé.

Dưới đây là một hàm chấp nhận tham số options. Khi Object.assign() được sử dụng, bất kỳ thuộc tính nào trong đối tượng mục tiêu đều được ghi đè bởi các thuộc tính tương đương trong đối tượng nguồn (source object).

function foo(options) {
    const defaults = {
        maxPoints: 5000,
        startingCash: 100,
        rounds: 3,
    };

    // { maxPoints: 20000, startingCash: 100, rounds: 5 }
    options = Object.assign(defaults, options);
}

foo({
    maxPoints: 20000,
    rounds: 5
});

Gợi ý: cú pháp spread (...) cũng mang lại mục đích tương tự.

2. defineProperty()

Bạn có biết rằng có một cách thú vị để định nghĩa thuộc tính đối tượng mới trong JavaScript không? Vâng, có đấy.

Nếu bạn sử dụng hàm này để thêm thuộc tính mới vào đối tượng hiện có, bạn có thể "tùy chỉnh" định nghĩa của nó. Ví dụ, bạn có thể làm cho thuộc tính không thể thay đổi.

Chúng ta hãy xem một ví dụ nhé:

const person = {
    name: "Dom",
    age: 28,
    favoriteColor: "Blue"
};

// Add an immutable "country" property
Object.defineProperty(person, "country", {
    value: "Australia",
    writable: false
});

// Doesn't work!
person.country = "New Zealand";

Có nhiều điều khác bạn có thể làm với chức năng defineProperty này và tôi khuyên bạn nên đọc tài liệu trong link này để biết thêm thông tin!

3. entries()

So với 2 hàm trước, hàm này đơn giản hơn một chút. Hàm này lấy các cặp Key - Value trong một đối tượng và chuyển đổi chúng thành một mảng hai chiều.

Một số trường hợp nên sử dụng hàm này:

• Xây dựng chuỗi truy vấn URL
• Lặp qua một đối tượng (kết hợp với việc giải cấu trúc mảng)

Sau đây là một ví dụ minh họa nhanh:

const color = {
    red: 0,
    green: 149,
    blue: 120
}

for (const [key, value] of Object.entries(color)) {
    console.log(`${key} => ${value}`);
}

/*
    Output:
    red => 0
    green => 149
    blue => 120
*/

Hãy ghi nhớ ví dụ này vì rất có thể bạn sẽ cần đến nó sau này

4. fromEntries()

Nếu bạn không tìm ra cách giải quyết từ hàm cuối cùng, JavaScript sẽ gọi mảng hai chiều gồm các cặp Key - Value được gọi là "entries".

Sử dụng hàm này sẽ lấy một mảng hai chiều và chuyển đổi nó thành một đối tượng. Thật tuyệt vời phải không nào.

Chúng ta hãy cùng xem ví dụ sau đây nhé:

const colorArray = [
    ["red", 0],
    ["green", 149],
    ["blue", 120],
];

// { red: 0, green: 149, blue: 120 }
const color = Object.fromEntries(colorArray);

Hãy nhớ rằng, mặc dù đối số có khả năng xảy ra nhất cho hàm này là một mảng, nhưng nó có thể hoạt động trên bất kỳ kiểu lặp nào, bao gồm cả chuỗi.

5. Object.freeze()

Cuối cùng nhưng không kém phần quan trọng là Object.freeze(). Hàm này thực hiện đúng như trên gọi của nó, đó là nó sẽ đóng băng (freeze) đối tượng được truyền tới nó.

Một object bị đóng băng có nghĩa là:

• Chúng không thể thêm thuộc tính mới
• Các thuộc tính hiện tại không thể thay đổi
• Các thuộc tính hiện tại không thể bị xóa

Ví dụ:

const person = {
    name: "Dom",
    age: 28,
    favoriteColor: "Blue"
};

// none of these work ❌
person.country = "Australia";
person.name = "Rodney";
delete person.age

Mẹo: bạn có thể sử dụng Object.unfreeze() để đảo ngược hiệu ứng này.

Cảm ơn các bạn đã xem bài viết vừa rồi!