Khóa và giá trị trong JavaScript là gì?

Hãy xem những hàm tiện ích nào cung cấp JavaScript để trích xuất các khóa, giá trị và mục nhập từ một đối tượng

1. Sự vật. keys() trả về các phím

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

2 là một hàm tiện ích trả về danh sách các khóa của

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

3

Hãy sử dụng

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

4 để lấy khóa của đối tượng hero

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

6 trả về danh sách ['name', 'city'], như mong đợi, là các khóa của đối tượng hero

1. 1 phím trong thực tế. phát hiện nếu đối tượng trống

Nếu bạn muốn nhanh chóng kiểm tra xem một đối tượng có trống không (không có thuộc tính riêng) thì cách tiếp cận tốt là kiểm tra xem danh sách khóa có trống không

Để kiểm tra xem đối tượng có trống không, tất cả những gì bạn cần làm là xác minh thuộc tính độ dài của mảng được trả về bởi

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

2

javascript
const isObjectEmpty = Object.keys(object).length === 0;

Trong ví dụ sau, đối tượng

javascript
const isObjectEmpty = Object.keys(object).length === 0;

0 không có thuộc tính, trong khi đối tượng

javascript
const isObjectEmpty = Object.keys(object).length === 0;

1 có một thuộc tính

javascript
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0;    // => true
Object.keys(nonEmpty).length === 0; // => false

javascript
const isObjectEmpty = Object.keys(object).length === 0;

2 đánh giá thành

javascript
const isObjectEmpty = Object.keys(object).length === 0;

3, có nghĩa là

javascript
const isObjectEmpty = Object.keys(object).length === 0;

0 không có thuộc tính

2. Sự vật. giá trị () trả về giá trị

javascript
const isObjectEmpty = Object.keys(object).length === 0;

5 là hàm tiện ích JavaScript trả về danh sách các giá trị của

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

3

Hãy sử dụng chức năng này để lấy các giá trị của đối tượng hero

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.values(hero); // => ['Batman', 'Gotham']

javascript
const isObjectEmpty = Object.keys(object).length === 0;

8 trả về các giá trị của hero.

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

0

2. 1 Giá trị trong thực tế. tính tổng các thuộc tính

javascript
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0;    // => true
Object.keys(nonEmpty).length === 0; // => false

1 là vật giữ giá của một số cuốn sách. Khóa thuộc tính là tên sách, trong khi giá trị là giá sách

Làm thế nào bạn sẽ xác định tổng của tất cả các cuốn sách từ đối tượng?

Hãy xem làm thế nào để làm điều đó

javascript
const books = {
  'The Shining': 5.50,
  'Harry Potter and the Goblet of Fire': 10.00,
  '1984': 4.35
};
const prices = Object.values(books);
prices; // => [4.35, 5.5, 10]
const sum = prices.reduce((sum, price) => sum + price);
sum; // => 19.85

javascript
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0;    // => true
Object.keys(nonEmpty).length === 0; // => false

2 trả về các giá trị của đối tượng sách, trong trường hợp này là danh sách

javascript
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0;    // => true
Object.keys(nonEmpty).length === 0; // => false

3

Sau đó,

javascript
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0;    // => true
Object.keys(nonEmpty).length === 0; // => false

4 tóm tắt giá

3. Sự vật. các mục() trả về các mục

Cuối cùng,

javascript
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0;    // => true
Object.keys(nonEmpty).length === 0; // => false

5 là một chức năng hữu ích để truy cập các mục của

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

3

Hãy trích xuất các mục của đối tượng hero

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.entries(hero); // => `[['name', 'Batman'], ['city', 'Gotham']]`

javascript
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0;    // => true
Object.keys(nonEmpty).length === 0; // => false

8 trả về các mục của hero.

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.keys(hero); // => ['name', 'city']

1

3. 1 Mục nhập trong thực tế. tìm thuộc tính có giá trị 0

Một lần nữa, hãy sử dụng đối tượng

javascript
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0;    // => true
Object.keys(nonEmpty).length === 0; // => false

1 giữ giá của một số cuốn sách. Lần này, do nhầm lẫn, một trong những cuốn sách đã được gán với giá

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.values(hero); // => ['Batman', 'Gotham']

2

Hãy tìm cuốn sách có giá

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.values(hero); // => ['Batman', 'Gotham']

2 và đăng nhập tên của nó vào bảng điều khiển

Sử dụng danh sách mục nhập của đối tượng phù hợp để giải quyết nhiệm vụ này

javascript
const books = {
  'The Shining': 5.50,
  'Harry Potter and the Goblet of Fire': 10.00,
  '1984': 0
};
for (const [book, price] of Object.entries(books)) {
  if (price === 0) {
    console.log(book);
  }
}
// logs '1984'

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.values(hero); // => ['Batman', 'Gotham']

4 trả về một danh sách các bộ dữ liệu. tên sách và giá.

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.values(hero); // => ['Batman', 'Gotham']

5 trích xuất tại chỗ từ bộ tên sách và giá

Cuối cùng, trong chu kỳ

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.values(hero); // => ['Batman', 'Gotham']

6, bạn có thể kiểm tra xem giá sách nào là

javascript
const hero = {
  name: 'Batman',
  city: 'Gotham'  
};
Object.values(hero); // => ['Batman', 'Gotham']

2 và ghi tên vào bảng điều khiển nếu đúng như vậy

4. Bản tóm tắt

Khóa, giá trị và mục nhập là 3 danh sách phổ biến để trích xuất từ ​​đối tượng JavaScript để xử lý thêm

JavaScript cung cấp chức năng tiện ích cần thiết để truy cập các danh sách này

• Chìa khóa được trả lại bởi

  javascript
  const hero = {
    name: 'Batman',
    city: 'Gotham'  
  };
  Object.keys(hero); // => ['name', 'city']
  

  2
• Các giá trị được trả về bởi

  javascript
  const isObjectEmpty = Object.keys(object).length === 0;
  

  5
• Và các mục được trả lại bởi

  javascript
  const empty = {};
  const nonEmpty = { a: 1 };
  Object.keys(empty).length === 0;    // => true
  Object.keys(nonEmpty).length === 0; // => false
  

  5

Bạn biết những cách nào khác để truy cập các khóa, giá trị và mục nhập?

Thích bài viết?

đề xuất cải tiến

Bài đăng chất lượng vào hộp thư đến của bạn

Tôi thường xuyên xuất bản bài viết có chứa

• Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
• Tổng quan về các tính năng JavaScript mới
• Cách sử dụng TypeScript và cách gõ
• Thiết kế phần mềm và thực hành mã hóa tốt

Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn

Đặt mua

Tham gia cùng 6943 người đăng ký khác

Giới thiệu về Dmitri Pavlutin

Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm (nhưng không giới hạn) uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉

Khóa trong JavaScript là gì?

Sự khác biệt giữa khóa và giá trị là gì?

Khóa và giá trị trong đối tượng là gì?

Làm cách nào để lấy khóa và giá trị trong JavaScript?