🦝 Keys Values Entries 🦝

Các phương pháp tỉnh Object.keys values entries

Cùng nhau tìm hiểu về các phương pháp tỉnh Object.keys() Object.values() Object.entries()
js_masterJavascript
javascript-lap-trinh.jpg

Chào các bạn

Trong bài viết này chúng ta cùng nhau tìm hiểu về các phương pháp tỉnh Object.keys() Object.values() Object.entries()

Object

Trong javascript chúng ta làm việc với lớp Object này rất thường xuyên. Nên chúng ta hiểu nó và biết nhiều về nó thì càng tốt.

Ở bài viết này mình sẽ nói về 3 phương pháp tỉnh đó. Đơn nhiên còn rất rất rất là nhiều thứ. Nhưng chúng ta nên chia nhỏ nó ra để cho dể hiểu cũng như dễ giải thích.

  1. Object.values()

Phương pháp tỉnh Object.values() dùng để lấy mãng các giá trị trong đối tượng.

Cú pháp

1let values = Object.values(ArrayLike || object);
Phương phápTham sốTrả về
Object.values(ArrayLike)ArrayLike Một đối tượng có chỉ mục lengtharray
Object.values(object)object Một đối tượng bình thườngarray

Ví dụ:

  • ArrayLike

    1  let arraylike = {
    2      0: "Hồ Quang Trí",
    3      1: 100,
    4      length: 2
    5  };
    6
    7  let values = Object.values(arraylike);
    8  console.log(values); // ['Hồ Quang Trí', 100, 2]
    9
    10  console.log(Array.from(arraylike)); // ['Hồ Quang Trí', 100]
  • object

    1  let object = {
    2      0: "Hồ Quang Trí",
    3      1: 100,
    4      name: 2 // Đổi length thành name
    5  };
    6
    7  let values = Object.values(object);
    8  console.log(values); // ['Hồ Quang Trí', 100, 2]
    9
    10  console.log(Array.from(object)); // []

Như các bạn có thể thấy đầu ra từ hai ví dụ trên khác nhau phải không.

Dành cho các bạn chưa biết ArrayLike

ArrayLike là một đối tượng có key được đánh dấu từ 0 đến n và key cuối cùng là length có giá trị là n + 1

1let object = {
2    0: "Hồ Quang Trí",
3    1: 100,
4    2: [1, 2, 3],
5    length: 3
6};
7
8console.log(Array.from(object)); // ['Hồ Quang Trí', 100, Array(3)]

Array.from(object) ở đây là phương pháp tỉnh dùng để chuyển đối tượng ArrayLike về mảng thực.

  1. Object.keys()

Phương pháp tỉnh Object.key() dùng để lấy ra mảng các key của đối tượng

Cú pháp

1let keys = Object.keys(object);
Phương phápTham sốTrả về
Object.keys(object)object Một đối tượng bình thườngarray

Ví dụ:

1let object = {
2    name: "Hồ Quang Trí",
3    age: 1000
4}
5
6let keys = Object.keys(object);
7
8console.log(keys); // ['name', 'age']
  1. Object.entries()

Phương pháp tỉnh Object.entries() dùng để lấy ra một mảng 2 chiều các key và value trong object [[key, value]]

Cú pháp

1let keys = Object.entries(object || ArrayLike);
Phương phápTham sốTrả về
Object.entries(object)object Một đối tượng bình thườngMảng 2 chiều [[key, value]]
Object.entries(ArrayLike)ArrayLike Một đối tượng mảng giốngMảng 2 chiều [[key, value]]

Ví dụ:

  • object

    1  let object = {
    2      name: "Hồ Quang Trí",
    3      age: 1000
    4  }
    5
    6  let entries = Object.entries(object);
    7
    8  console.log(entries); // [Array(2), Array(2)] tương đương [["name", "Hồ Quang Trí"], ["age", 1000]]
  • ArrayLike

    1  let arraylike = {
    2      0: "Hồ Quang Trí",
    3      1: 1000,
    4      length: 2
    5  }
    6
    7  let entries = Object.entries(arraylike);
    8
    9  console.log(entries); // [Array(2), Array(2), Array(2)] tương đương [["name", "Hồ Quang Trí"], ["age", 1000], ["length", 2]]

Mỗi chức năng đó thực hiện các hành động khác nhau tùy thuộc vào bài toán các bạn làm.

Ở tất cả các ví dụ trên mình đã viết ra những điểm khác biệt của nó.

Áp dụng thực tế

Ví dụ như công việc của chúng ta. Ví dụ tháng nào chúng ta cũng có lương. Bài toán bây giờ yêu cầu tính tổng tất cả các lương đã làm.

1let user = {
2    thang1: 100,
3    thang2: 200,
4    thang3: 50,
5};
6
7let tongLuong = Object.values(user).reduce((tong, value) => {
8    tong += value;
9    return tong;
10}, 0);
11
12console.log(tongLuong); // 350

Đơn nhiên các bạn có thể dùng nhiều cách khác. Nhưng ở đây chúng ta đang nói về nó. Thì cứ nên dùng nó để áp dụng.

Tổng kết

Trong bài viết này mình đã nói qua về các phương pháp tỉnh. Các bạn chưa biết chổ nào thì cứ bình luận mình giải thích nhé.

  • entries
  • keys
  • values
  • mảng
  • đối tượng

OFFJS.COM - Blog học tập giải trí - 🐲

Chia sẻ nhiều kiến thức thú vị trong lập trình cũng như cuộc sống.

Giới thiệu


Trang web này mình sẽ nói về kiến thức lập trình và cuộc sống mà các bạn mới học hay đang dự định học. Có một bước đi đầu đời vững chắc.

Hồ Quang Trí.jpg

Đi kèm với đó là những lý thuyết và các dòng code minh họa. Để các bạn dễ hình dung.

Đơn nhiên cũng không dễ dàng ngày một ngày hai mà học hết được.

Học Tập Là Một Con Đường Dài Vô Tận

Nó sẽ nuốt các bạn vô số thời gian nhưng bù lại khi đã biết thì mọi thứ thật là tuyệt.

1console.log("Hồ Quang Trí");

Nếu có ai nói bạn học lập trình trong vòng 3 đến 6 tháng thì mình xin nói thật không bao giờ có chuyện đó nhé.

Chúc các bạn thành công.

Chân trang

phone-toan-phat.png

0353210168

address-toan-phat.png

Việt Nam