Lấy subset của object

Đây là cách lấy subset của object. Subset là một phần được cắt ra từ một object, và phương pháp giới thiệu ở đây là cắt một phần của object bằng cách chỉ định tên property. Ví dụ, khi có object với nhiều property như sau, đây là cách tạo object chỉ có vài property từ đó.

ts
const profile = {
  name: "suin",
  twitter: "suin",
  github: "suin",
  country: "VN",
  city: "Ha Noi",
  district: "Hoan Kiem",
  address: "1 Ba Trieu",
  building: "Toa nha ABC",
  zipcode: "100000",
};
 
// Muốn lấy object chỉ có 6 property dưới đây từ object có 9 property ở trên
 
const address = {
  country: "VN",
  city: "Ha Noi",
  district: "Hoan Kiem",
  address: "1 Ba Trieu",
  building: "Toa nha ABC",
  zipcode: "100000",
};

ts
const profile = {
  name: "suin",
  twitter: "suin",
  github: "suin",
  country: "VN",
  city: "Ha Noi",
  district: "Hoan Kiem",
  address: "1 Ba Trieu",
  building: "Toa nha ABC",
  zipcode: "100000",
};
 
// Muốn lấy object chỉ có 6 property dưới đây từ object có 9 property ở trên
 
const address = {
  country: "VN",
  city: "Ha Noi",
  district: "Hoan Kiem",
  address: "1 Ba Trieu",
  building: "Toa nha ABC",
  zipcode: "100000",
};

Phương pháp 1: Kết hợp immediately invoked function, destructuring assignment và shorthand property name

Phương pháp đầu tiên để lấy subset của object là kết hợp immediately invoked function, destructuring assignment và shorthand property name.

ts
const sns = (({ twitter, github }) => ({ twitter, github }))(profile);
//=> {
//   "twitter": "suin",
//   "github": "suin"
// }

ts
const sns = (({ twitter, github }) => ({ twitter, github }))(profile);
//=> {
//   "twitter": "suin",
//   "github": "suin"
// }

Ưu và nhược điểm của phương pháp này như sau.

• Ưu điểm
  • Không cần library bên ngoài.
• Nhược điểm
  • Với người đọc lần đầu có thể thấy code bất ngờ.
  • Cần viết cùng tên property ở 2 chỗ: phần tham số của immediately invoked function và shorthand property name, nên dư thừa.

Cách viết này tiện lợi khi muốn trích xuất vài property ít, nhưng khi muốn trích xuất nhiều property thì lượng code tăng và dần trở nên khó khăn.

Khi property muốn loại bỏ ít hơn property muốn trích xuất, chỉ định property muốn loại bỏ như sau sẽ dễ hơn.

ts
const address = (({ name, twitter, github, ...rest }) => rest)(profile);
        
const address: {
    country: string;
    city: string;
    district: string;
    address: string;
    building: string;
    zipcode: string;
}
//=> {
//   "country": "VN",
//   "city": "Ha Noi",
//   "district": "Hoan Kiem",
//   "address": "1 Ba Trieu",
//   "building": "Toa nha ABC",
//   "zipcode": "100000"
// }

ts
const address = (({ name, twitter, github, ...rest }) => rest)(profile);
        
const address: {
    country: string;
    city: string;
    district: string;
    address: string;
    building: string;
    zipcode: string;
}
//=> {
//   "country": "VN",
//   "city": "Ha Noi",
//   "district": "Hoan Kiem",
//   "address": "1 Ba Trieu",
//   "building": "Toa nha ABC",
//   "zipcode": "100000"
// }

Trong JavaScript, có thể loại bỏ property từ object bằng delete, nên cách viết trên có thể trông rườm rà. Lý do viết như này là vì trong TypeScript, delete không dễ sử dụng. Khi muốn loại bỏ property từ object bằng delete, trong TypeScript property đó phải là optional.

ts
const address = { ...profile };
delete address.name;
The operand of a 'delete' operator must be optional.2790The operand of a 'delete' operator must be optional.

ts
const address = { ...profile };
delete address.name;
The operand of a 'delete' operator must be optional.2790The operand of a 'delete' operator must be optional.

Phương pháp 2: lodash.pick / lodash.omit

Phương pháp thứ hai sử dụng lodash. lodash là library cung cấp nhiều hàm tiện ích, trong đó có hàm pick để lấy subset của object.

ts
import _ from "lodash";
 
const sns = _.pick(profile, ["twitter", "github"]);
//=> {
//   "twitter": "suin",
//   "github": "suin"
// }

ts
import _ from "lodash";
 
const sns = _.pick(profile, ["twitter", "github"]);
//=> {
//   "twitter": "suin",
//   "github": "suin"
// }

Nếu chỉ cần hàm pick thay vì toàn bộ lodash, có thể sử dụng package lodash.pick. Trong trường hợp này, sử dụng hàm pick như sau.

ts
import pick from "lodash.pick";
 
const sns = pick(profile, ["twitter", "github"]);

ts
import pick from "lodash.pick";
 
const sns = pick(profile, ["twitter", "github"]);

Ưu và nhược điểm của lodash.pick như sau.

• Ưu điểm
  • Khai báo và dễ đọc.
  • Lượng code ít.
• Nhược điểm
  • Cần cài đặt library.

lodash.pick là hàm chỉ định tên property muốn trích xuất, nhưng khi property muốn loại bỏ ít hơn property muốn trích xuất, sử dụng lodash.omit sẽ tiện hơn.

ts
import _ from "lodash";
 
const address = _.omit(profile, ["name", "twitter", "github"]);
//=> {
//   "country": "VN",
//   "city": "Ha Noi",
//   "district": "Hoan Kiem",
//   "address": "1 Ba Trieu",
//   "building": "Toa nha ABC",
//   "zipcode": "100000"
// }

ts
import _ from "lodash";
 
const address = _.omit(profile, ["name", "twitter", "github"]);
//=> {
//   "country": "VN",
//   "city": "Ha Noi",
//   "district": "Hoan Kiem",
//   "address": "1 Ba Trieu",
//   "building": "Toa nha ABC",
//   "zipcode": "100000"
// }

Cài đặt lodash, lodash.pick và lodash.omit bằng lệnh sau.

bash
# Cài đặt lodash
npm install lodash
npm install -D @types/lodash
# Cài đặt lodash.pick và lodash.omit
npm install lodash.pick lodash.omit
npm install -D @types/lodash.pick @types/lodash.omit

bash
# Cài đặt lodash
npm install lodash
npm install -D @types/lodash
# Cài đặt lodash.pick và lodash.omit
npm install lodash.pick lodash.omit
npm install -D @types/lodash.pick @types/lodash.omit