JavaScript lấy tên thuộc tính đối tượng theo giá trị

Trong các phiên bản JavaScript trước đây, việc tìm ra các thuộc tính mà một đối tượng sở hữu là khá khó khăn. Về cơ bản, bạn sẽ cần lặp lại đối tượng theo cách thủ công và lọc ra các thuộc tính được kế thừa, như vậy

var charactersBooks = {
    Frodo: "Lord of the Rings",
    Aslan: "Chronicles of Narnia",
};

var characters = [ ];

for [var prop in charactersBooks] {
    if [charactersBooks.hasOwnProperty[prop]] {
        characters.push[prop];
    }
}

// Outputs: ["Frodo", "Aslan"]
console.log[characters];

Nhưng với ECMAScript 5, chúng tôi có quyền truy cập vào Object.keys giúp loại bỏ bản tóm tắt tẻ nhạt này

var charactersBooks = {
    Frodo: "Lord of the Rings",
    Aslan: "Chronicles of Narnia",
};

var characters = Object.keys[charactersBooks];

// Outputs: ["Frodo", "Aslan"]
console.log[characters];

Đúng như mong đợi, Object.keys chỉ truy xuất tên của các thuộc tính được khai báo trực tiếp trên đối tượng. Nó không nhận được tên của các thuộc tính được kế thừa. Ngoài ra, nó chỉ truy xuất tên của vô số thuộc tính. Tên thuộc tính không thể đếm được bị bỏ qua

Nhưng ES5 cũng cung cấp cho chúng ta một phương thức khác có tên là Object.getOwnPropertyNames, phương thức này ít nghiêm ngặt hơn về tên thuộc tính mà nó sẽ truy xuất. Giống như

var charactersBooks = {
    Frodo: "Lord of the Rings",
    Aslan: "Chronicles of Narnia",
};

var characters = Object.keys[charactersBooks];

// Outputs: ["Frodo", "Aslan"]
console.log[characters];

0,

var charactersBooks = {
    Frodo: "Lord of the Rings",
    Aslan: "Chronicles of Narnia",
};

var characters = Object.keys[charactersBooks];

// Outputs: ["Frodo", "Aslan"]
console.log[characters];

1 sẽ chỉ truy xuất các thuộc tính "riêng". Tuy nhiên, nó sẽ lấy tên của các thuộc tính không thể đếm được

Không chắc chắn những gì có nghĩa là vô số trong bối cảnh này? . [Thảo luận nhiều hơn sẽ đến trong các phần nhỏ giọt trong tương lai. ] Ví dụ đơn giản nhất có lẽ là thuộc tính

var charactersBooks = {
    Frodo: "Lord of the Rings",
    Aslan: "Chronicles of Narnia",
};

var characters = Object.keys[charactersBooks];

// Outputs: ["Frodo", "Aslan"]
console.log[characters];

2 của mảng. Hãy xem các chức năng của chúng tôi xử lý nó như thế nào

var authors = ["Tolkien", "Lewis"];

// Outputs: ["0", "1"]
console.log[Object.keys[authors]];

// Outputs: ["0", "1", "length"]
console.log[Object.getOwnPropertyNames[authors]];

Như bạn có thể thấy, Object.keys đã bỏ qua thuộc tính

var charactersBooks = {
    Frodo: "Lord of the Rings",
    Aslan: "Chronicles of Narnia",
};

var characters = Object.keys[charactersBooks];

// Outputs: ["Frodo", "Aslan"]
console.log[characters];

2 không thể đếm được trong khi Object.getOwnPropertyNames thì không

Làm thế nào để bạn biết khi nào nên sử dụng cái này hay cái kia?

Vì cả hai chức năng này đều là một phần của thông số kỹ thuật ES5 nên chúng không khả dụng trong các trình duyệt cũ hơn như IE8. Và thật không may, không thể nhập lại Object.getOwnPropertyNames. Tuy nhiên, Object.keys có thể được nhập lại bằng thư viện ES5 Shim

Psssst. TRẠI BOOTC PHÁT TRIỂN WEB 2023 sẽ bắt đầu chỉ sau vài ngày nữa. Tham gia danh sách chờ, giữ chỗ trong khóa học thuần tập kéo dài 10 tuần của tôi và tìm hiểu các nguyên tắc cơ bản, HTML, CSS, JS, Tailwind, React, Next. jsvà hơn thế nữa. ✨

Giả sử bạn có đối tượng này

const dog = {
  name: 'Roger'
}

Để lấy giá trị của thuộc tính

var charactersBooks = {
    Frodo: "Lord of the Rings",
    Aslan: "Chronicles of Narnia",
};

var characters = Object.keys[charactersBooks];

// Outputs: ["Frodo", "Aslan"]
console.log[characters];

9, bạn có thể sử dụng cú pháp dấu chấm, như thế này

dog.name

Hoặc bạn có thể sử dụng cú pháp truy cập thuộc tính dấu ngoặc vuông

dog['name']

Điều này đặc biệt hữu ích khi thuộc tính không có tên biến hợp lệ, chẳng hạn như

var authors = ["Tolkien", "Lewis"];

// Outputs: ["0", "1"]
console.log[Object.keys[authors]];

// Outputs: ["0", "1", "length"]
console.log[Object.getOwnPropertyNames[authors]];

0

const dog = {
  'the name': 'Roger'
}

dog['the name']

và nó cũng rất hữu ích khi bạn không biết trước tên thuộc tính và bạn đánh giá nó theo chương trình, như trong ví dụ này lặp qua các tên thuộc tính đối tượng

Làm cách nào để lấy tên và giá trị thuộc tính đối tượng trong JavaScript?

Làm cách nào để lấy các thuộc tính của một đối tượng trong JavaScript?

Làm cách nào để lấy tên biến đối tượng trong JavaScript?

Làm cách nào để lấy tên khóa đối tượng trong JavaScript?