Filter properti objek dengan kunci di ES6

Katakanlah saya punya objek:

{
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

Saya ingin membuat objek lain dengan memfilter objek di atas sehingga saya memiliki sesuatu seperti.

 {
    item1: { key: 'sdfd', value:'sdfd' },
    item3: { key: 'sdfd', value:'sdfd' }
 }

Saya mencari cara yang bersih untuk mencapai ini menggunakan Es6, jadi operator spread tersedia untuk saya.

Jika Anda memiliki daftar nilai yang diizinkan, Anda dapat dengan mudah menyimpannya di objek menggunakan:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    obj[key] = raw[key];
    return obj;
  }, {});

console.log(filtered);

Ini menggunakan:

1. Object.keysuntuk mendaftar semua properti di raw(data asli), lalu
2. Array.prototype.filter untuk memilih kunci yang ada dalam daftar yang diizinkan, menggunakan
   1. Array.prototype.includes untuk memastikan mereka hadir
3. Array.prototype.reduce untuk membangun objek baru dengan hanya properti yang diizinkan.

Ini akan membuat salinan dangkal dengan properti yang diizinkan (tetapi tidak akan menyalin properti itu sendiri).

Anda juga dapat menggunakan operator penyebaran objek untuk membuat serangkaian objek tanpa memutasikannya (terima kasih kepada rjerue karena menyebutkan ini ):

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    return {
      ...obj,
      [key]: raw[key]
    };
  }, {});

console.log(filtered);

Untuk keperluan hal-hal sepele, jika Anda ingin menghapus bidang yang tidak diinginkan dari data asli (yang saya tidak akan merekomendasikan melakukannya, karena melibatkan beberapa mutasi buruk), Anda dapat membalikkan includescek seperti:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

Object.keys(raw)
  .filter(key => !allowed.includes(key))
  .forEach(key => delete raw[key]);

console.log(raw);

Saya menyertakan contoh ini untuk menunjukkan solusi berbasis mutasi, tetapi saya tidak menyarankan menggunakannya.

Jika Anda baik-baik saja dengan menggunakan sintaks ES6, saya menemukan bahwa cara terbersih untuk melakukan ini, seperti disebutkan di sini dan di sini adalah:

const data = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const { item2, ...newData } = data;

Sekarang, newDataberisi:

{
  item1: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

Atau, jika Anda memiliki kunci yang disimpan sebagai string:

const key = 'item2';
const { [key]: _, ...newData } = data;

Dalam kasus terakhir, [key]dikonversi menjadi item2tetapi karena Anda menggunakan consttugas, Anda harus menentukan nama untuk tugas tersebut. _mewakili nilai membuang.

Lebih umum:

const { item2, ...newData } = data; // Assign item2 to item2
const { item2: someVarName, ...newData } = data; // Assign item2 to someVarName
const { item2: _, ...newData } = data; // Assign item2 to _
const { ['item2']: _, ...newData } = data; // Convert string to key first, ...

Ini tidak hanya mengurangi operasi Anda menjadi satu-liner tetapi juga tidak mengharuskan Anda untuk mengetahui apa kunci lainnya (yang ingin Anda pertahankan).

Cara terbersih yang bisa Anda temukan adalah dengan Lodash # pick

const _ = require('lodash');

const allowed = ['item1', 'item3'];

const obj = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

const filteredObj = _.pick(obj, allowed)

Tidak ada yang belum dikatakan sebelumnya, tetapi untuk menggabungkan beberapa jawaban untuk jawaban ES6 umum:

const raw = {
  item1: { key: 'sdfd', value: 'sdfd' },
  item2: { key: 'sdfd', value: 'sdfd' },
  item3: { key: 'sdfd', value: 'sdfd' }
};

const filteredKeys = ['item1', 'item3'];

const filtered = filteredKeys
  .reduce((obj, key) => ({ ...obj, [key]: raw[key] }), {});

console.log(filtered);

Hanya solusi lain dalam satu baris Modern JS tanpa perpustakaan eksternal .

Saya bermain dengan fitur " Penghancuran ":

const raw = {
    item1: { key: 'sdfd', value: 'sdfd' },
    item2: { key: 'sdfd', value: 'sdfd' },
    item3: { key: 'sdfd', value: 'sdfd' }
  };
var myNewRaw = (({ item1, item3}) => ({ item1, item3 }))(raw);
console.log(myNewRaw);

Anda sekarang dapat membuatnya lebih pendek dan sederhana dengan menggunakan metode Object.fromEntries (periksa dukungan browser):

const raw = { item1: { prop:'1' }, item2: { prop:'2' }, item3: { prop:'3' } };

const allowed = ['item1', 'item3'];

const filtered = Object.fromEntries(
   Object.entries(raw).filter(
      ([key, val])=>allowed.includes(key)
   )
);

baca lebih lanjut tentang: Object.fromEntries

Anda dapat menambahkan generik ofilter(diimplementasikan dengan generik oreduce) sehingga Anda dapat dengan mudah menyaring objek dengan cara yang sama dengan array -

const oreduce = (f, acc, o) =>
  Object
    .entries (o)
    .reduce
      ( (acc, [ k, v ]) => f (acc, v, k, o)
      , acc
      )

const ofilter = (f, o) =>
  oreduce
    ( (acc, v, k, o)=>
        f (v, k, o)
          ? Object.assign (acc, {[k]: v})
          : acc
    , {}
    , o
    )

Kita bisa melihatnya bekerja di sini -

const data =
  { item1: { key: 'a', value: 1 }
  , item2: { key: 'b', value: 2 }
  , item3: { key: 'c', value: 3 }
  }

console.log
  ( ofilter
      ( (v, k) => k !== 'item2'
      , data
      )
      // [ { item1: { key: 'a', value: 1 } }
      // , { item3: { key: 'c', value: 3 } }
      // ]

  , ofilter
      ( x => x.value === 3
      , data
      )
      // [ { item3: { key: 'c', value: 3 } } ]
  )

Verifikasi hasil di browser Anda sendiri di bawah ini -

const oreduce = (f, acc, o) =>
  Object
    .entries (o)
    .reduce
      ( (acc, [ k, v ]) => f (acc, v, k, o)
      , acc
      )

const ofilter = (f, o) =>
  oreduce
    ( (acc, v, k, o)=>
        f (v, k, o)
          ? Object.assign (acc, { [k]: v })
          : acc
    , {}
    , o
    )

const data =
  { item1: { key: 'a', value: 1 }
  , item2: { key: 'b', value: 2 }
  , item3: { key: 'c', value: 3 }
  }

console.log
  ( ofilter
      ( (v, k) => k !== 'item2'
      , data
      )
      // [ { item1: { key: 'a', value: 1 } }
      // , { item3: { key: 'c', value: 3 } }
      // ]

  , ofilter
      ( x => x.value === 3
      , data
      )
      // [ { item3: { key: 'c', value: 3 } } ]
  )

Kedua fungsi ini dapat diimplementasikan dengan berbagai cara. Saya memilih untuk melampirkan ke Array.prototype.reducedalam oreducetetapi Anda bisa dengan mudah menulis semuanya dari awal

Beginilah cara saya melakukannya, baru-baru ini:

const dummyObj = Object.assign({}, obj);
delete dummyObj[key];
const target = Object.assign({}, {...dummyObj});

ok, bagaimana dengan one-liner ini

    const raw = {
      item1: { key: 'sdfd', value: 'sdfd' },
      item2: { key: 'sdfd', value: 'sdfd' },
      item3: { key: 'sdfd', value: 'sdfd' }
    };

    const filteredKeys = ['item1', 'item3'];

    const filtered = Object.assign({}, ...filteredKeys.map(key=> ({[key]:raw[key]})));

Jawaban di sini pasti cocok tetapi mereka agak lambat karena mereka memerlukan perulangan melalui daftar putih untuk setiap properti di objek. Solusi di bawah ini jauh lebih cepat untuk kumpulan data besar karena hanya melewati peritel sekali:

const data = {
  allowed1: 'blah',
  allowed2: 'blah blah',
  notAllowed: 'woah',
  superSensitiveInfo: 'whooooah',
  allowed3: 'bleh'
};

const whitelist = ['allowed1', 'allowed2', 'allowed3'];

function sanitize(data, whitelist) {
    return whitelist.reduce(
      (result, key) =>
        data[key] !== undefined
          ? Object.assign(result, { [key]: data[key] })
          : result,
      {}
    );
  }

  sanitize(data, whitelist)

Membonceng answeranswer ssube ini .

Ini versi yang bisa digunakan kembali.

Object.filterByKey = function (obj, predicate) {
  return Object.keys(obj)
    .filter(key => predicate(key))
    .reduce((out, key) => {
      out[key] = obj[key];
      return out;
    }, {});
}

Untuk menyebutnya gunakan

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

var filtered = Object.filterByKey(raw, key => 
  return allowed.includes(key));
});

console.log(filtered);

Hal yang indah tentang fungsi panah ES6 adalah Anda tidak harus masuk allowedsebagai parameter.

Anda dapat melakukan sesuatu seperti ini:

const base = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const filtered = (
    source => { 
        with(source){ 
            return {item1, item3} 
        } 
    }
)(base);

// one line
const filtered = (source => { with(source){ return {item1, item3} } })(base);

Ini berfungsi tetapi tidak terlalu jelas, ditambah withpernyataan itu tidak direkomendasikan ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with ).

Solusi yang lebih sederhana tanpa menggunakan filterdapat dicapai dengan Object.entries()alih - alihObject.keys()

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.entries(raw).reduce((acc,elm)=>{
  const [k,v] = elm
  if (allowed.includes(k)) {
    acc[k] = v 
  }
  return acc
},{})

Ada banyak cara untuk mencapai ini. The jawaban yang diterima menggunakan Keys-Filter-Mengurangi pendekatan, yang bukan yang paling performant.

Alih-alih, menggunakan for...inloop untuk mengulang melalui kunci dari suatu objek, atau mengulang melalui kunci yang dibolehkan, dan kemudian menyusun objek baru adalah ~ 50% lebih banyak performan ^a .

const obj = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const keys = ['item1', 'item3'];

function keysReduce (obj, keys) {
  return keys.reduce((acc, key) => {
    if(obj[key] !== undefined) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
};

function forInCompose (obj, keys) {
  const returnObj = {};
  for (const key in obj) {
    if(keys.includes(key)) {
      returnObj[key] = obj[key]
    }
  };
  return returnObj;
};

keysReduce(obj, keys);   // Faster if the list of allowed keys are short
forInCompose(obj, keys); // Faster if the number of object properties are low

^{Sebuah. Lihat jsPerf untuk tolok ukur kasus penggunaan sederhana. Hasil akan berbeda berdasarkan browser.}

Anda dapat menghapus kunci spesifik pada objek Anda

items={
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

// Example 1
var key = "item2";
delete items[key]; 

// Example 2
delete items["item2"];

// Example 3
delete items.item2;

const filteredObject = Object.fromEntries(Object.entries(originalObject).filter(([key, value]) => key !== uuid))

Cara sederhana! Untuk melakukan ini.

const myData = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};
const{item1,item3}=myData
const result =({item1,item3})

Solusi lain menggunakan metode "baru" Array.reduce:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = allowed.reduce((obj, key) => { 
  obj[key] = raw[key]; 
  return obj 
}, {})

console.log(filtered);

Demonstrasi dalam Fiddle ini ...

Tapi saya suka solusi dalam jawaban ini di sini yang menggunakan dan :Object.fromEntries Array.filterArray.includes

const object = Object.fromEntries( Object.entries(raw).filter(([key, value]) => allowed.includes(key)) );

Demonstrasi dalam Fiddle ini ...

OK, bagaimana dengan ini:

const myData = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

function filteredObject(obj, filter) {
  if(!Array.isArray(filter)) {
   filter = [filter.toString()];
  }
  const newObj = {};
  for(i in obj) {
    if(!filter.includes(i)) {
      newObj[i] = obj[i];
    }
  }
  return newObj;
}

dan menyebutnya seperti ini:

filteredObject(myData, ['item2']); //{item1: { key: 'sdfd', value:'sdfd' }, item3: { key: 'sdfd', value:'sdfd' }}

Fungsi ini akan memfilter objek berdasarkan daftar kunci, ini lebih efisien daripada jawaban sebelumnya karena tidak harus menggunakan Array.filter sebelum memanggil mengurangi. jadi itu O (n) sebagai lawan dari O (n + disaring)

function filterObjectByKeys (object, keys) {
  return Object.keys(object).reduce((accum, key) => {
    if (keys.includes(key)) {
      return { ...accum, [key]: object[key] }
    } else {
      return accum
    }
  }, {})
}

Selama pengulangan, tidak mengembalikan apa pun ketika properti / kunci tertentu ditemukan dan melanjutkan sisanya:

const loop = product =>
Object.keys(product).map(key => {
    if (key === "_id" || key === "__v") {
        return; 
    }
    return (
        <ul className="list-group">
            <li>
                {product[key]}
                <span>
                    {key}
                </span>
            </li>
        </ul>
    );
});

Saya terkejut bagaimana belum ada yang menyarankan ini. Ini sangat bersih dan sangat eksplisit tentang kunci mana yang ingin Anda simpan.

const unfilteredObj = {a: ..., b:..., c:..., x:..., y:...}

const filterObject = ({a,b,c}) => ({a,b,c})
const filteredObject = filterObject(unfilteredObject)

Atau jika Anda ingin liner yang kotor:

const unfilteredObj = {a: ..., b:..., c:..., x:..., y:...}

const filteredObject = (({a,b,c})=>({a,b,c}))(unfilteredObject);

Pendekatan lain akan digunakan Array.prototype.forEach()sebagai

const raw = {
  item1: {
    key: 'sdfd',
    value: 'sdfd'
  },
  item2: {
    key: 'sdfd',
    value: 'sdfd'
  },
  item3: {
    key: 'sdfd',
    value: 'sdfd'
  }
};

const allowed = ['item1', 'item3', 'lll'];

var finalObj = {};
allowed.forEach(allowedVal => {
  if (raw[allowedVal])
    finalObj[allowedVal] = raw[allowedVal]
})
console.log(finalObj)

Ini mencakup nilai hanya kunci-kunci yang tersedia dalam data mentah dan dengan demikian mencegah penambahan data sampah.

Itu akan menjadi solusi saya:

const filterObject = (obj, condition) => {
    const filteredObj = {};
    Object.keys(obj).map(key => {
      if (condition(key)) {
        dataFiltered[key] = obj[key];
      }
    });
  return filteredObj;
}