ES6의 키로 객체 속성 필터링

객체가 있다고 가정 해 봅시다.

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

위의 객체를 필터링하여 다른 객체를 만들고 싶습니다.

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

Es6을 사용하여이를 수행하는 깨끗한 방법을 찾고 있으므로 스프레드 연산자를 사용할 수 있습니다.

허용되는 값 목록이 있으면 다음을 사용하여 객체에 쉽게 유지할 수 있습니다.

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);

이것은 다음을 사용합니다.

1. Object.keysraw(원래 데이터)의 모든 속성을 나열한 다음
2. Array.prototype.filter 다음을 사용하여 허용 된 목록에있는 키를 선택합니다.
   1. Array.prototype.includes 그들이 있는지 확인하기 위해
3. Array.prototype.reduce 허용 된 속성만으로 새 객체를 작성합니다.

이렇게하면 허용 된 속성으로 얕은 복사본이 만들어 지지만 속성 자체는 복사되지 않습니다.

당신은 또한 사용할 수있는 개체의 확산 연산자를 그들에게 (덕분에 돌연변이없이 일련의 객체를 생성하는 이 언급 대한 rjerue을 ) :

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);

퀴즈의 목적으로 원치 않는 필드를 원래 데이터에서 제거하려면 ( 추악한 돌연변이가 포함되어 있기 때문에 권장 하지 않습니다 ) includes검사를 다음과 같이 뒤집을 수 있습니다.

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);

돌연변이 기반 솔루션을 보여주기 위해이 예제를 포함하고 있지만 사용하지 않는 것이 좋습니다.

ES6 구문을 사용해도 괜찮다면 여기 와 여기에 언급 된 것처럼 가장 깨끗한 방법 은 다음 과 같습니다 .

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

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

이제 다음이 newData포함됩니다.

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

또는 키를 문자열로 저장 한 경우 :

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

후자의 경우 [key]로 변환 item2되지만 const할당을 사용하고 있으므로 할당의 이름을 지정해야합니다. _버림 값을 나타냅니다.

더 일반적으로:

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, ...

이렇게하면 작업이 한 줄짜리로 줄어들뿐만 아니라 다른 키가 무엇인지 (보존하려는) 알 필요가 없습니다.

가장 깨끗한 방법은 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)

이전에 언급되지 않은 것은 아니지만 일반적인 ES6 답변에 대한 답변을 결합하면됩니다.

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);

외부 라이브러리가없는 Modern JS의 한 줄에 있는 또 다른 솔루션 .

" Destructuring "기능을 가지고 놀고있었습니다 :

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);

이제 Object.fromEntries 메소드 를 사용하여 더 짧고 간단하게 만들 수 있습니다 (브라우저 지원 확인).

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)
   )
);

더 읽어보기 : Object.fromEntries

generic을 추가하여 generic으로 ofilter구현할 oreduce수 있으므로 배열과 같은 방식으로 객체를 쉽게 필터링 할 수 있습니다.

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 } } ]
  )

아래의 브라우저에서 결과를 확인하십시오 –

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 } } ]
  )

이 두 기능은 여러 가지 방법으로 구현 될 수 있습니다. 나는 Array.prototype.reduce안쪽 에 붙이기로 선택 oreduce했지만 처음부터 쉽게 쓸 수 있습니다.

이것이 최근에 내가 한 일입니다.

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

좋아,이 원 라이너는 어때?

    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]})));

여기에 대한 답변은 확실히 적합하지만 객체의 모든 속성에 대해 화이트리스트를 반복해야하므로 약간 느립니다. 아래의 솔루션은 화이트리스트를 한 번만 반복하므로 큰 데이터 세트의 경우 훨씬 빠릅니다.

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)

ssube의 answeranswer 에 대한 피기 백 .

재사용 가능한 버전이 있습니다.

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

그것을 사용하려면

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);

ES6 화살표 기능의 아름다운 점은 allowed매개 변수 로 전달할 필요가 없다는 것 입니다.

다음과 같이 할 수 있습니다 :

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);

이것은 작동하지만 명확 with하지 않으며 진술은 권장되지 않습니다 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with ).

사용하지 않고 간단한 솔루션을 사용 filter하는 Object.entries()대신Object.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
},{})

이를 달성하는 방법에는 여러 가지가 있습니다. 허용 대답 가장 확대됨에없는 키 - 필터 - 절감 접근 방식을 사용합니다.

대신 for...in루프를 사용하여 객체의 키를 반복하거나 허용 된 키를 반복 한 다음 새 객체 를 구성하는 것이 ~ 50 % 더 성능 ^이 좋습니다.

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

^{ㅏ. 간단한 사용 사례의 벤치 마크는 jsPerf 를 참조하십시오 . 브라우저마다 결과가 다릅니다.}

객체에서 특정 키를 제거 할 수 있습니다

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))

간단한 방법! 이것을하기 위해.

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})

"신규"를 사용하는 다른 솔루션 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);

이 바이올린 에서 시연...

하지만 난에서 솔루션처럼 여기이 대답 사용 과 :Object.fromEntries Array.filterArray.includes

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

이 바이올린 에서 시연 ...

좋아, 이건 어때?

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;
}

다음과 같이 호출하십시오.

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

이 함수는 키 목록을 기반으로 객체를 필터링합니다. reduce를 호출하기 전에 Array.filter를 사용할 필요가 없으므로 이전 답변보다 효율적입니다. O (n + 필터링)과 반대로 O (n)

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

루프 중에 특정 속성 / 키가 발견되면 아무것도 반환하지 않고 나머지는 계속하십시오.

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>
    );
});

아직 아무도 이것을 제안하지 않은 것에 놀랐습니다. 유지하려는 키에 대해 매우 깨끗하고 명시 적입니다.

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

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

또는 더러운 라이너 하나를 원한다면 :

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

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

또 다른 방법은 사용하는 것 Array.prototype.forEach()같은

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)

원시 데이터에서 사용 가능한 키 값만 포함하므로 정크 데이터를 추가 할 수 없습니다.

그게 내 해결책이 될 것입니다.

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