Hướng dẫn console object javascript - javascript đối tượng giao diện điều khiển

Question

Đây là một bài viết thuộc series "tips and tricks javascript" "tips and tricks javascript"

Nội dung chính Show

Object javascript là gì?
Object.create()
Object.keys()
Object.values()
Object.entries()
Object.assign()
Object.freeze()
Object.seal()
Kết luận và rút ra bài học

Object javascript là gì? Thật ra hầu hết mọi thứ trong javascript đều là object. Nhưng ở bài post này thì, chúng ta sẽ tìm hiểu những method object được sử dụng nhiều và rộng rãi nhất, đến nỗi dự án nào cũng phải sử dụng đến. Bên cạnh đó còn kể đến những "Array method in javascript" "Array method in javascript"

Object javascript là gì?

Để hiểu hết tối đa bài viết này thì trước tiên bạn phải hiểu "Object javascript là gì?" và hơn hết bạn phải hiểu cách creating, modifying, và working một object. Ở những hướng dẫn trước của tipjs, đã nói nhiều về Object bạn có thể xem qua. Ở bài trước "Array method in javascript" chúng tôi đã nói rất nhiều về cách sử dụng method của Array."Array method in javascript" chúng tôi đã nói rất nhiều về cách sử dụng method của Array.

Object trong javascript là một collection key/value. Trong đó các giá trị có thể bao gồm các properties và methods và có thể chứa tất cả các loại dữ liệu JavaScript khác, chẳng hạn như

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

0,

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

1 và

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

2.

Object có nhiều method được tích hợp hữu ích mà chúng ta có thể sử dụng và truy cập để làm việc với các Object riêng lẻ một cách đơn giản. Hướng dẫn củ bài post này sẽ đi qua các method Object tích hợp quan trọng, và kèm theo đó là những ví dụ minh hoạ cho từng trường hợp cụ thể khi sử dụng object.

Object.create()

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

3 là một method được sử dụng để tạo ra một Object mới và dùng object đó để mở rộng hơn cho một object, chúng ta cùng xem một ví dụ dưới đây.

// Initialize an object with properties and methods
const job = {
    position: 'cashier',
    type: 'hourly',
    isAvailable: true,
    showDetails() {
        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
    }
};

// Use Object.create to pass properties
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();

Output
The barista position is hourly and is accepting applications.

Trên đó ta cũng thấy là chúng ta có thể thay đổi gia trị của một properties của Object mới mà ta vừa sử dụng

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

3 .

Object.keys()

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

5 là một method dùng để tạo ra một Array với tất cả key của một Object. Và theo kinh nghiệm của tipjs thì có lẽ đây là một method rất hay. Vì tipjs đã sử dụng rất nhiều.

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

Sau khi chúng ta đã có một Array từ sử dụng

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

5 thì chúng ta có thể tiếp tục sử dụng Method Array in javascript để phát triển thêm như iterate:

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

Object.values()

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

7 là một method ngược lại với

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

5 thì nó tạo một new Array với tất cả những giá trị của một object.

// Initialize an object
const session = {
    id: 1,
    time: `26-July-2018`,
    device: 'mobile',
    browser: 'Chrome'
};

// Get all values of the object
const values = Object.values(session);

console.log(values);
Output
[1, "26-July-2018", "mobile", "Chrome"]

Object.entries()

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

9 là một method tạo một nested array với key/value của một Object.

// Initialize an object
const operatingSystem = {
    name: 'Ubuntu',
    version: 18.04,
    license: 'Open Source'
};

// Get the object key/value pairs
const entries = Object.entries(operatingSystem);

console.log(entries);
Output
[
    ["name", "Ubuntu"]
    ["version", 18.04]
    ["license", "Open Source"]
]

Object.assign()

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

0 là một method dùng để sao chép những giá trị từ một object này sang một object khác. Ở ví dụ dưới đây, chúng ta sử dụng

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

0 để merge chúng lại với nhau:

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the objects
const character = Object.assign(name, details);

console.log(character);
Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Nhưng điều quang trọng là khi sử dụng

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

0 thì đó là một shallow-cloning. Xem thêm "shallow-cloning in javascript". Ngoài ra thì merge một object thì chúng ta có thể sử dụng

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

3, xem tiếp ví dụ nếu bạn còn hứng thú:

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the object with the spread operator
const character = {...name, ...details}

console.log(character);
Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Và spread syntax cũng là một shallow-cloning. Xem thêm Sự khác nhau giữa Shallow copying và Deep copying trong object javascript

Object.freeze()

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

4 dùng để ngăn chặn một hành vi sử đổi thuộc tính giá trị của một object, ngoài ra cũng có thể ngăn chặn một hành vi như xoá or add thêm thuộc tính.

// Initialize an object
const user = {
    username: 'AzureDiamond',
    password: 'hunter2'
};

// Freeze the object
const newUser = Object.freeze(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);
Output
{username: "AzureDiamond", password: "hunter2"}

Để hiểu

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

4 không phải là một ví dụ này là bạn có thể hiểu được những tipjs gợi ý bạn có thể đọc thêm về bài viết này: How can I deep freeze an object in JavaScript?

Object.seal()

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

6 thì hơi ngược lại với

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

4 đó là dùng để ngăn chặn hành vi add thêm một new properties nhưng lại cho phép modification những thuộc tính đã tồn tại trước đó. Ví dụ:

// Initialize an object
const user = {
    username: 'AzureDiamond',
    password: 'hunter2'
};

// Seal the object
const newUser = Object.seal(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);
Output
{username: "AzureDiamond", password: "*******"}

Đến đây, chúng tôi khuyên bạn tiếp tục xem thêm bài viết về "Sự khác nhau Object.freeze() và Object.seal() trong JavaScript"

Kết luận và rút ra bài học

Điều tuyệt vời nhất là mang đến cho bạn một cách nhìn, hiểu và sử dụng các method object trong javascript một cách hiệu quả và đầy tinh tế. Mỗi ví dụ, chúng tôi cố gắng truyền đến những bài viết để đi sâu hơn nữa. Bạn đừng bỏ qua nó một cách lãng phí. Vì mỗi bài viết đều chứa đựng nhiều kiến thức hơn nữa. Ngoài ra, bạn cũng nên tìm hiểu về "Array method in javascript"."Array method in javascript".

Nếu bạn quan tâm đến bài viết về javascript vui lòng theo dõi : Tips and tricks javasccript

Tham khảo thêm: digitalocean.com

programming javascript Tách Object JS Loop object JavaScript object.keys w3schools object.keys trong javascript

Hướng dẫn console object javascript - javascript đối tượng giao diện điều khiển

Object javascript là gì?

Object.create()

Object.keys()

Object.values()

Object.entries()

Object.assign()

Object.freeze()

Object.seal()

Kết luận và rút ra bài học

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội