Bagaimanakah saya boleh menapis pasangan nilai kunci dengan berkesan dalam objek JavaScript?

JavaScript: filter() for Objects

Prototaip penapis() wujud untuk jenis Array dalam ECMAScript 5, tetapi bukan untuk jenis Objek. Untuk melaksanakan fungsi penapis() untuk Objek dalam JavaScript, anda boleh menggunakan strategi berikut:

1. Menggunakan reduce() dan Object.keys()

Kaedah ini menggunakan reduce() untuk menggelung melalui kekunci objek dan Object.keys() untuk mendapatkan semula kekunci tersebut. Kemudian, ia menapis kekunci berdasarkan fungsi predikat dan mengembalikan objek baharu dengan pasangan nilai kunci yang ditapis:

Object.filter = (obj, predicate) => {
  Object.keys(obj)
    .filter(key => predicate(obj[key]))
    .reduce((res, key) => (res[key] = obj[key], res), {});
};

2. Menggunakan map() dan Spread Syntax

Pendekatan yang serupa dengan (1), tetapi bukannya reduce(), anda boleh menggunakan map() dan sintaks spread (...) untuk mencipta yang baharu objek:

Object.filter = (obj, predicate) => {
  Object.keys(obj)
    .filter(key => predicate(obj[key]))
    .map(key => ({ [key]: obj[key] }))
    .reduce((a, b) => ({ ...a, ...b }), {});
};

3. Menggunakan Object.entry() dan Object.fromEntries()

Kaedah ini menggunakan Object.entry() untuk menukar objek kepada tatasusunan pasangan nilai kunci dan kemudian Object.fromEntries() untuk membina semula objek selepas penapisan:

Object.filter = (obj, predicate) => {
  return Object.fromEntries(
    Object.entries(obj).filter(([key, value]) => predicate(value))
  );
};

4. Kaveat: Elakkan Memanjangkan Object.prototype

Walaupun penyelesaian ini menyediakan pelaksanaan penapis() berfungsi untuk Objects, ia dianggap sebagai amalan buruk untuk melanjutkan Object.prototype secara terus. Sebaliknya, berikan fungsi penapis anda sebagai fungsi utiliti yang berdiri sendiri, serupa dengan fungsi utiliti global JavaScript sedia ada seperti Object.assign() dan Object.keys().

Atas ialah kandungan terperinci Bagaimanakah saya boleh menapis pasangan nilai kunci dengan berkesan dalam objek JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!