Làm cách nào để lấy giá trị khóa cụ thể từ đối tượng trong JavaScript?

Trong bài viết này, hãy cho chúng tôi hiểu “khóa” và “giá trị” trong một mảng là gì & cũng xem xét các phương pháp khác nhau mà chúng tôi có thể lấy các cặp khóa-giá trị này

Mục lục

• Khóa và giá trị trong một mảng là gì?
• Các phương pháp khác nhau để có được các cặp khóa-giá trị
• Hỗ trợ trình duyệt

Khóa và giá trị trong một mảng là gì?

Các khóa là các chỉ mục và các giá trị là các phần tử của một mảng kết hợp. Các mảng kết hợp về cơ bản là các đối tượng trong JavaScript nơi các chỉ mục được thay thế bằng các khóa do người dùng xác định. Chúng không có thuộc tính độ dài như một mảng bình thường và không thể duyệt qua bằng cách sử dụng vòng lặp for thông thường

Đây là một ví dụ về một mảng kết hợp

var arr = { "one": 1, "two": 2, "three": 3 }; 

Không giống như các mảng đơn giản, chúng tôi sử dụng dấu ngoặc nhọn thay vì dấu ngoặc vuông. Nội dung hoặc giá trị của mảng kết hợp được truy cập bằng các phím

Trong mảng trên, một, hai & ba là khóa và 1, 2 & 3 là giá trị. Chúng có thể được lấy riêng lẻ bằng cách sử dụng các phương thức keys() & values() như hình bên dưới

//to get values
for (let value of Object.values(arr)) {
    alert(value);
}
//Output: 1, 2, 3

//to get keys
for (let value of Object.values(arr)) {
    alert(value);
}
//Output: one, two, three

Các phương pháp khác nhau để có được các cặp khóa-giá trị

Bây giờ chúng ta đã biết cách lấy các khóa và giá trị trong một mảng, chúng ta hãy xem xét các phương thức khác nhau để lấy các cặp khóa-giá trị

Trước tiên chúng ta hãy lưu trữ các khóa và giá trị được trích xuất trước đó trong các mảng riêng biệt

var keys = ["one", "two", "three"];
var values = [1, 2, 3];

Phương pháp 1. Sử dụng một đối tượng để lưu trữ các cặp khóa => giá trị

Trong phương thức này, chúng ta lưu trữ các phần tử từ mảng “keys” & các giá trị tương ứng từ mảng “values” bằng cách sử dụng một mảng kết hợp "obj"

// create object
var obj = {};

// Loop to insert key & value in this object one by one
for (var i = 0; i < keys.length; i++) {
    obj[keys[i]] = values[i];

} 

// output can be displayed as : one => 1  two => 2 three => 3

Phương pháp 2. Sử dụng phương thức map()

Bản đồ là một tập hợp các phần tử trong đó mỗi phần tử được lưu trữ dưới dạng một cặp khóa, giá trị. Các đối tượng của loại bản đồ có thể chứa cả đối tượng và giá trị nguyên thủy dưới dạng khóa hoặc giá trị. Khi duyệt qua đối tượng bản đồ, nó trả về cặp khóa, giá trị theo thứ tự như đã chèn

Từ mảng đối tượng này, nếu bạn muốn trích xuất các giá trị của tất cả các thuộc tính đối tượng có tên là "name" chẳng hạn thành một mảng mới, bạn có thể thực hiện theo các cách sau

Sử dụng Array.prototype.map()

Bạn có thể sử dụng phương thức Array.prototype.map() để tạo một mảng mới chỉ bao gồm các giá trị của khóa cụ thể. Sử dụng Array.prototype.map() sẽ gọi hàm gọi lại được cung cấp cho từng phần tử của mảng và thêm các giá trị được trả về vào mảng kết quả mới. Ví dụ

// ES5+
const names = users.map(function (user) {
    return user.name;
});

console.log(names); // ['John', 'Wayne', 'David']

Trong ES6+, bạn có thể rút ngắn cú pháp này bằng cách sử dụng hàm mũi tên và giải nén thuộc tính đối tượng có liên quan được chuyển đến hàm gọi lại được cung cấp, chẳng hạn như như vậy

// ES6+
const names = users.map(({ name }) => name);

console.log(names); // ['John', 'Wayne', 'David']

Sử dụng vòng lặp for

Nếu bạn không thể hỗ trợ ES5 tối thiểu, thì bạn có thể chỉ cần lặp lại mảng bằng cách sử dụng vòng lặp for chẳng hạn và trích xuất các giá trị đối tượng vào một mảng mới theo cách sau.

const names = [];

for (let i = 0; i < users.length; i++) {
    if (!users[i].hasOwnProperty('name')) {
        continue;
    }

    names.push(users[i].name);
}

console.log(names); // ['John', 'Wayne', 'David']

Xin lưu ý việc sử dụng phương pháp

// ES5+
const names = users.map(function (user) {
    return user.name;
});

console.log(names); // ['John', 'Wayne', 'David']

0 trong đoạn mã trên;

---

Hy vọng bạn tìm thấy bài viết này hữu ích. Nó được xuất bản vào ngày 01 tháng 6 năm 2021. Hãy thể hiện tình yêu và sự ủng hộ của bạn bằng cách

Các phương pháp này là chung chung, có một thỏa thuận chung để sử dụng chúng cho các cấu trúc dữ liệu. Nếu chúng ta từng tạo cấu trúc dữ liệu của riêng mình, chúng ta cũng nên triển khai chúng

Chúng được hỗ trợ cho

• Map
• Set
• Array

Các đối tượng đơn giản cũng hỗ trợ các phương thức tương tự, nhưng cú pháp hơi khác một chút

Đối với các đối tượng đơn giản, các phương thức sau đây khả dụng

• Mục tiêu. keys(obj) – trả về một mảng các phím
• Mục tiêu. giá trị (obj) – trả về một mảng giá trị
• Mục tiêu. các mục (obj) – trả về một mảng gồm các cặp [key, value]

Xin lưu ý các điểm khác biệt (ví dụ so với bản đồ)

Cú pháp MapObjectCall_______41_______

let user = {
  name: "John",
  age: 30
};

// loop over values
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

1, nhưng không phải

let user = {
  name: "John",
  age: 30
};

// loop over values
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

2Mảng “thực” có thể trả về

Sự khác biệt đầu tiên là chúng ta phải gọi

let user = {
  name: "John",
  age: 30
};

// loop over values
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

1 chứ không phải

let user = {
  name: "John",
  age: 30
};

// loop over values
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

2

Tại sao vậy? . Hãy nhớ rằng, các đối tượng là cơ sở của tất cả các cấu trúc phức tạp trong JavaScript. Vì vậy, chúng ta có thể có một đối tượng của riêng mình như

let user = {
  name: "John",
  age: 30
};

// loop over values
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

5 thực hiện phương thức

let user = {
  name: "John",
  age: 30
};

// loop over values
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

6 của chính nó. Và chúng ta vẫn có thể gọi

let user = {
  name: "John",
  age: 30
};

// loop over values
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

7 trên đó

Sự khác biệt thứ hai là các phương thức

let user = {
  name: "John",
  age: 30
};

// loop over values
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

8 trả về các đối tượng mảng “thực”, không chỉ là một đối tượng có thể lặp lại. Đó chủ yếu là vì lý do lịch sử

Ví dụ

let user = {
  name: "John",
  age: 30
};

• let user = {
    name: "John",
    age: 30
  };
  
  // loop over values
  for (let value of Object.values(user)) {
    alert(value); // John, then 30
  }

  9

• let prices = {
    banana: 1,
    orange: 2,
    meat: 4,
  };
  
  let doublePrices = Object.fromEntries(
    // convert prices to array, map each key/value pair into another pair
    // and then fromEntries gives back the object
    Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
  );
  
  alert(doublePrices.meat); // 8

  0

• let prices = {
    banana: 1,
    orange: 2,
    meat: 4,
  };
  
  let doublePrices = Object.fromEntries(
    // convert prices to array, map each key/value pair into another pair
    // and then fromEntries gives back the object
    Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
  );
  
  alert(doublePrices.meat); // 8

  1

Đây là một ví dụ về việc sử dụng

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // convert prices to array, map each key/value pair into another pair
  // and then fromEntries gives back the object
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

2 để lặp qua các giá trị thuộc tính

________số 8_______

Mục tiêu. khóa/giá trị/mục nhập bỏ qua các thuộc tính tượng trưng

Giống như vòng lặp

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // convert prices to array, map each key/value pair into another pair
  // and then fromEntries gives back the object
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

3, các phương thức này bỏ qua các thuộc tính sử dụng

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // convert prices to array, map each key/value pair into another pair
  // and then fromEntries gives back the object
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

4 làm khóa

Thông thường đó là thuận tiện. Nhưng nếu chúng ta cũng muốn các khóa tượng trưng, ​​thì có một phương thức riêng Object. getOwnPropertySymbols trả về một mảng chỉ các khóa tượng trưng. Ngoài ra, tồn tại một phương thức Reflect. ownKeys(obj) trả về tất cả các khóa

Các đối tượng thiếu nhiều phương thức tồn tại cho mảng, e. g.

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // convert prices to array, map each key/value pair into another pair
  // and then fromEntries gives back the object
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

5,

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // convert prices to array, map each key/value pair into another pair
  // and then fromEntries gives back the object
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

6 và những người khác

Nếu chúng tôi muốn áp dụng chúng, thì chúng tôi có thể sử dụng

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // convert prices to array, map each key/value pair into another pair
  // and then fromEntries gives back the object
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

7 theo sau là

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // convert prices to array, map each key/value pair into another pair
  // and then fromEntries gives back the object
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

8

1. Sử dụng

   let prices = {
     banana: 1,
     orange: 2,
     meat: 4,
   };
   
   let doublePrices = Object.fromEntries(
     // convert prices to array, map each key/value pair into another pair
     // and then fromEntries gives back the object
     Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
   );
   
   alert(doublePrices.meat); // 8

   9 để lấy một mảng các cặp khóa/giá trị từ map.keys()0
2. Sử dụng các phương thức mảng trên mảng đó, e. g.

   let prices = {
     banana: 1,
     orange: 2,
     meat: 4,
   };
   
   let doublePrices = Object.fromEntries(
     // convert prices to array, map each key/value pair into another pair
     // and then fromEntries gives back the object
     Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
   );
   
   alert(doublePrices.meat); // 8

   5, để chuyển đổi các cặp khóa/giá trị này
3. Sử dụng map.keys()2 trên mảng kết quả để biến nó trở lại thành một đối tượng

Ví dụ: chúng tôi có một đối tượng có giá và muốn nhân đôi chúng

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // convert prices to array, map each key/value pair into another pair
  // and then fromEntries gives back the object
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

Thoạt nhìn có vẻ khó, nhưng sẽ trở nên dễ hiểu sau khi bạn sử dụng một hoặc hai lần. Chúng ta có thể tạo ra những chuỗi biến đổi mạnh mẽ theo cách này

Làm cách nào để lấy giá trị khóa cụ thể từ các đối tượng trong JavaScript?

Làm cách nào để chỉ nhận một khóa cụ thể trong đối tượng JavaScript?

Làm cách nào để truy cập khóa đối tượng trong JavaScript?