JavaScript: filter () dla Objects

ECMAScript 5 ma filter()prototyp dla Arraytypów, ale nie Objecttypów, jeśli dobrze rozumiem.

Jak zaimplementować filter()for Objectw JavaScript?

Powiedzmy, że mam ten obiekt:

var foo = {
    bar: "Yes"
};

I chcę napisać, filter()który działa na Objects:

Object.prototype.filter = function(predicate) {
    var result = {};

    for (key in this) {
        if (this.hasOwnProperty(key) && !predicate(this[key])) {
            result[key] = this[key];
        }
    }

    return result;
};

Działa to, gdy używam go w poniższej wersji demonstracyjnej, ale kiedy dodam go do mojej witryny korzystającej z jQuery 1.5 i jQuery UI 1.8.9, otrzymuję błędy JavaScript w FireBug.

Object.prototype.filter = function(predicate) {
  var result = {};
  for (key in this) {
    if (this.hasOwnProperty(key) && !predicate(this[key])) {
      console.log("copying");
      result[key] = this[key];
    }
  }
  return result;
};

var foo = {
  bar: "Yes",
  moo: undefined
};

foo = foo.filter(function(property) {
  return typeof property === "undefined";
});

document.getElementById('disp').innerHTML = JSON.stringify(foo, undefined, '  ');
console.log(foo);

#disp {
  white-space: pre;
  font-family: monospace
}

<div id="disp"></div>

Nigdy nie przedłużaj Object.prototype.

W twoim kodzie pojawią się okropne rzeczy. Wszystko się zepsuje. Rozszerzasz wszystkie typy obiektów, w tym literały obiektów.

Oto szybki przykład, który możesz wypróbować:

    // Extend Object.prototype
Object.prototype.extended = "I'm everywhere!";

    // See the result
alert( {}.extended );          // "I'm everywhere!"
alert( [].extended );          // "I'm everywhere!"
alert( new Date().extended );  // "I'm everywhere!"
alert( 3..extended );          // "I'm everywhere!"
alert( true.extended );        // "I'm everywhere!"
alert( "here?".extended );     // "I'm everywhere!"

Zamiast tego utwórz funkcję, którą przekazujesz obiekt.

Object.filter = function( obj, predicate) {
    let result = {}, key;

    for (key in obj) {
        if (obj.hasOwnProperty(key) && !predicate(obj[key])) {
            result[key] = obj[key];
        }
    }

    return result;
};

Przede wszystkim przedłużanie uważa się za złą praktykęObject.prototype . Zamiast podać funkcję jako funkcji użyteczności na Object, jak już tam są Object.keys, Object.assign, Object.is, ... etc.

Podaję tutaj kilka rozwiązań:

1. Korzystanie reduceiObject.keys
2. Jak (1), w połączeniu z Object.assign
3. Używanie mapi rozkładanie składni zamiastreduce
4. Korzystanie Object.entriesiObject.fromEntries

1. Używanie reduceiObject.keys

Za pomocą reducei Object.keysaby zaimplementować żądany filtr (używając składni strzałek ES6 ):

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

// Example use:
var scores = {
    John: 2, Sarah: 3, Janet: 1
};
var filtered = Object.filter(scores, score => score > 1); 
console.log(filtered);

Zauważ, że w powyższym kodzie predicatemusi być warunek włączenia (w przeciwieństwie do warunku wyłączenia zastosowany OP), aby był zgodny z tym, jak Array.prototype.filterdziała.

2. Jak (1) w połączeniu z Object.assign

W powyższym rozwiązaniu operator przecinka jest używany w reduceczęści, aby zwrócić zmutowany resobiekt. Można to oczywiście zapisać jako dwie wypowiedzi zamiast jednego wyrażenia, ale to drugie jest bardziej zwięzłe. Aby to zrobić bez operatora przecinek, można użyć Object.assignzamiast tego, który ma powrócić zmutowaną obiektu:

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

// Example use:
var scores = {
    John: 2, Sarah: 3, Janet: 1
};
var filtered = Object.filter(scores, score => score > 1); 
console.log(filtered);

3. Używanie mapi rozkładanie składni zamiastreduce

Tutaj przenosimy Object.assignwywołanie z pętli, więc jest ono wykonywane tylko raz i przekazujemy poszczególne klucze jako osobne argumenty (przy użyciu składni rozszerzonej ):

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

// Example use:
var scores = {
    John: 2, Sarah: 3, Janet: 1
};
var filtered = Object.filter(scores, score => score > 1); 
console.log(filtered);

4. Używanie Object.entriesiObject.fromEntries

Ponieważ rozwiązanie przekształca obiekt w tablicę pośrednią, a następnie przekształca go z powrotem w zwykły obiekt, przydatne byłoby skorzystanie z Object.entries(ES2017) i odwrotnie (tj. Utworzenie obiektu z tablicy par klucz / wartość ) za pomocą Object.fromEntries( ES2019).

Prowadzi to do tej metody „one-liner” na Object:

Object.filter = (obj, predicate) => 
                  Object.fromEntries(Object.entries(obj).filter(predicate));

// Example use:
var scores = {
    John: 2, Sarah: 3, Janet: 1
};

var filtered = Object.filter(scores, ([name, score]) => score > 1); 
console.log(filtered);

Funkcja predykatu otrzymuje tutaj argument klucz / wartość, co jest nieco inne, ale pozwala na więcej możliwości w logice funkcji predykatu.

Jeśli chcesz użyć podkreślenia lub lodash , możesz użyć pick(lub odwrotnie omit).

Przykłady z dokumentów podkreślenia:

_.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age');
// {name: 'moe', age: 50}

Lub z oddzwanianiem (dla lodash , użyj pickBy ):

_.pick({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
  return _.isNumber(value);
});
// {age: 50}

Podejście ES6 ...

Wyobraź sobie, że masz ten obiekt poniżej:

const developers = {
  1: {
   id: 1,
   name: "Brendan", 
   family: "Eich"
  },
  2: {
   id: 2,
   name: "John", 
   family: "Resig"
  },  
  3: {
   id: 3,
   name: "Alireza", 
   family: "Dezfoolian"
 }
};

Utwórz funkcję:

const filterObject = (obj, filter, filterValue) => 
   Object.keys(obj).reduce((acc, val) => 
   (obj[val][filter] === filterValue ? acc : {
       ...acc,
       [val]: obj[val]
   }                                        
), {});

I nazwij to:

filterObject(developers, "name", "Alireza");

i zwróci :

{
  1: {
  id: 1,
  name: "Brendan", 
  family: "Eich"
  },
  2: {
   id: 2,
   name: "John", 
   family: "Resig"
  }
}

Jak już stwierdził Patrick, jest to zły pomysł, ponieważ prawie na pewno złamie dowolny kod innej firmy, którego kiedykolwiek będziesz chciał użyć.

Wszystkie biblioteki, takie jak jquery lub prototyp, ulegną awarii, jeśli się rozszerzysz Object.prototype. Powodem jest to, że leniwa iteracja obiektów (bez hasOwnPropertysprawdzania) ulegnie awarii, ponieważ dodane funkcje będą częścią iteracji.

Co powiesz na:

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

Lub...

function filterObj(keys, obj) {
  const newObj = {};
  Object.keys(obj).forEach(key => {
    if (keys.includes(key)) {
      newObj[key] = obj[key];
    }
  });
  return newObj;
}

Dany

object = {firstname: 'abd', lastname:'tm', age:16, school:'insat'};

keys = ['firstname', 'age'];

następnie :

keys.reduce((result, key) => ({ ...result, [key]: object[key] }), {});
// {firstname:'abd', age: 16}

// Helper
function filter(object, ...keys) {
  return keys.reduce((result, key) => ({ ...result, [key]: object[key] }), {});
  
};

//Example
const person = {firstname: 'abd', lastname:'tm', age:16, school:'insat'};

// Expected to pick only firstname and age keys
console.log(
  filter(person, 'firstname', 'age')
)

Stworzyłem taki, Object.filter()który nie tylko filtruje według funkcji, ale także akceptuje tablicę kluczy do włączenia. Opcjonalny trzeci parametr umożliwia odwrócenie filtru.

Dany:

var foo = {
    x: 1,
    y: 0,
    z: -1,
    a: 'Hello',
    b: 'World'
}

Szyk:

Object.filter(foo, ['z', 'a', 'b'], true);

Funkcjonować:

Object.filter(foo, function (key, value) {
    return Ext.isString(value);
});

Kod

Oświadczenie : postanowiłem użyć rdzenia Ext JS dla zwięzłości. Nie czułem, że konieczne jest pisanie kontrolerów typów dla typów obiektów, ponieważ nie było to częścią pytania.

// Helper function
function print(obj) {
    document.getElementById('disp').innerHTML += JSON.stringify(obj, undefined, '  ') + '<br />';
    console.log(obj);
}

Object.filter = function (obj, ignore, invert) {
    let result = {}; // Returns a filtered copy of the original list
    if (ignore === undefined) {
        return obj;   
    }
    invert = invert || false;
    let not = function(condition, yes) { return yes ? !condition : condition; };
    let isArray = Ext.isArray(ignore);
    for (var key in obj) {
        if (obj.hasOwnProperty(key) &&
                !(isArray && not(!Ext.Array.contains(ignore, key), invert)) &&
                !(!isArray && not(!ignore.call(undefined, key, obj[key]), invert))) {
            result[key] = obj[key];
        }
    }
    return result;
};

let foo = {
    x: 1,
    y: 0,
    z: -1,
    a: 'Hello',
    b: 'World'
};

print(Object.filter(foo, ['z', 'a', 'b'], true));
print(Object.filter(foo, (key, value) => Ext.isString(value)));

#disp {
    white-space: pre;
    font-family: monospace
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/builds/ext-core.min.js"></script>
<div id="disp"></div>

Moje wymyślone rozwiązanie:

function objFilter(obj, filter, nonstrict){
  r = {}
  if (!filter) return {}
  if (typeof filter == 'string') return {[filter]: obj[filter]}
  for (p in obj) {
    if (typeof filter == 'object' &&  nonstrict && obj[p] ==  filter[p]) r[p] = obj[p]
    else if (typeof filter == 'object' && !nonstrict && obj[p] === filter[p]) r[p] = obj[p]
    else if (typeof filter == 'function'){ if (filter(obj[p],p,obj)) r[p] = obj[p]}
    else if (filter.length && filter.includes(p)) r[p] = obj[p]
  }
  return r
}

Przypadki testowe:

obj = {a:1, b:2, c:3}

objFilter(obj, 'a') // returns: {a: 1}
objFilter(obj, ['a','b']) // returns: {a: 1, b: 2}
objFilter(obj, {a:1}) // returns: {a: 1}
objFilter(obj, {'a':'1'}, true) // returns: {a: 1}
objFilter(obj, (v,k,o) => v%2===1) // returns: {a: 1, c: 3}

https://gist.github.com/bernardoadc/872d5a174108823159d845cc5baba337

Rozwiązanie w Vanilla JS od roku 2020.

let romNumbers={'I':1,'V':5,'X':10,'L':50,'C':100,'D':500,'M':1000}

Możesz filtrować romNumbersobiekt według klucza:

const filteredByKey = Object.fromEntries(Object.entries(romNumbers).filter(([key, value]) => key === 'I'))
// filteredByKey = {I: 1} 

Lub filtruj romNumbersobiekt według wartości:

 const filteredByValue = Object.fromEntries(Object.entries(romNumbers).filter(([key, value]) => value === 5))
 // filteredByValue = {V: 5} 

Jeśli chcesz zmutować ten sam obiekt, a nie utworzyć nowy.

Poniższy przykład usunie wszystkie 0 lub puste wartości:

const sev = { a: 1, b: 0, c: 3 };
const deleteKeysBy = (obj, predicate) =>
  Object.keys(obj)
    .forEach( (key) => {
      if (predicate(obj[key])) {
        delete(obj[key]);
      }
    });

deleteKeysBy(sev, val => !val);

Jak wszyscy mówili, nie psuj prototypu. Zamiast tego po prostu napisz funkcję, aby to zrobić. Oto moja wersja z lodash:

import each from 'lodash/each';
import get from 'lodash/get';

const myFilteredResults = results => {
  const filteredResults = [];

  each(results, obj => {
    // filter by whatever logic you want.

    // sample example
    const someBoolean = get(obj, 'some_boolean', '');

    if (someBoolean) {
      filteredResults.push(obj);
    }
  });

  return filteredResults;
};

Używam tego, kiedy go potrzebuję:

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

W takich przypadkach używam jquery $ .map, która może obsługiwać obiekty. Jak wspomniano w innych odpowiedziach, zmiana natywnych prototypów nie jest dobrą praktyką ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Bad_practice_Extension_of_native_prototypes )

Poniżej znajduje się przykład filtrowania tylko poprzez sprawdzenie właściwości obiektu. Zwraca własny obiekt, jeśli warunek jest spełniony, lub zwraca, undefinedjeśli nie. undefinedNieruchomość sprawi, że rekord zniknie z listy obiektów;

$.map(yourObject, (el, index)=>{
    return el.yourProperty ? el : undefined;
});