객체가 있다고 가정 해보십시오.

elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
};

속성의 하위 집합으로 새 객체를 만들고 싶습니다.

 // pseudo code
 subset = elmo.slice('color', 'height')

 //=> { color: 'red', height: 'unknown' }

어떻게하면 되나요?

객체 파괴 및 속성 속기 사용

const object = { a: 5, b: 6, c: 7  };
const picked = (({ a, c }) => ({ a, c }))(object);

console.log(picked); // { a: 5, c: 7 }

Philipp Kewisch에서 :

이것은 실제로 즉시 호출되는 익명 함수입니다. 이 모든 것은 MDN 의 Destructuring Assignment 페이지에서 찾을 수 있습니다 . 확장 된 형태는 다음과 같습니다

let unwrap = ({a, c}) => ({a, c});

let unwrap2 = function({a, c}) { return { a, c }; };

let picked = unwrap({ a: 5, b: 6, c: 7 });

let picked2 = unwrap2({a: 5, b: 6, c: 7})

console.log(picked)
console.log(picked2)

Lodash를 살펴 보는 것이 좋습니다 . 많은 유용한 유틸리티 기능이 있습니다.

예를 들어 pick()원하는 것이 바로 다음과 같습니다.

var subset = _.pick(elmo, ['color', 'height']);

깡깡이

ES6을 사용하는 경우에는 구조화를 사용하여이 작업을 수행하는 매우 간결한 방법이 있습니다. Destructuring을 사용하면 스프레드를 사용하여 객체를 쉽게 추가 할 수 있지만 동일한 방식으로 하위 세트 객체를 만들 수도 있습니다.

const object = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd',
}

// Remove "c" and "d" fields from original object:
const {c, d, ...partialObject} = object;
const subset = {c, d};

console.log(partialObject) // => { a: 'a', b: 'b'}
console.log(subset) // => { c: 'c', d: 'd'};

좀 더 장황하지만 Array.prototype.reduce 를 사용하여 2 년 전 다른 사람들이 밑줄 / 로다시를 추천 한 것을 달성 할 수 있습니다 .

var subset = ['color', 'height'].reduce(function(o, k) { o[k] = elmo[k]; return o; }, {});

이 접근법은 반대편에서 그것을 해결합니다. 객체를 가져 와서 속성 이름을 전달하여 추출하고 속성 이름 배열을 가져 와서 새 객체로 줄이십시오.

가장 간단한 경우에 더 장황하지만, 여기의 콜백은 몇 가지 일반적인 요구 사항을 쉽게 충족시킬 수 있기 때문에 매우 편리합니다. 예를 들어 새 객체에서 'color'속성을 'color'로 변경하거나 배열을 평평하게하는 등 하나의 서비스 / 라이브러리에서 오브젝트를 수신하고 다른 곳에 필요한 새 오브젝트를 빌드 할 때 수행해야하는 작업. 밑줄 / 로대시는 우수하고 잘 구현 된 라이브러리이지만, 이것은 공급 업체 의존도를 낮추기 위해 선호하는 방법이며, 하위 집합 작성 논리가 복잡해지면 더 단순하고 일관된 방법입니다.

편집 : 같은 es7 버전 :

const subset = ['color', 'height'].reduce((a, e) => (a[e] = elmo[e], a), {});

편집 : 카레에 대한 좋은 예! 'pick'함수가 다른 함수를 반환하도록합니다.

const pick = (...props) => o => props.reduce((a, e) => ({ ...a, [e]: o[e] }), {});

위의 방법은 다른 방법과 거의 비슷하지만 즉시 '피커'를 만들 수 있습니다. 예 :

pick('color', 'height')(elmo);

이 접근 방식에서 특히 좋은 점은 선택한 '선택'을 기능을 수행하는 모든 항목에 쉽게 전달할 수 있다는 것입니다 Array#map.

[elmo, grover, bigBird].map(pick('color', 'height'));
// [
//   { color: 'red', height: 'short' },
//   { color: 'blue', height: 'medium' },
//   { color: 'yellow', height: 'tall' },
// ]

ES6 파괴

구조화 구문을 사용하면 함수 매개 변수 또는 변수를 사용하여 오브젝트를 구조화하고 재결합 할 수 있습니다.

제한 사항은 키 목록이 미리 정의되어 있으며 질문에서 언급했듯이 문자열로 나열 할 수 없다는 것입니다. 키가 영숫자가 아닌 경우 구조화가 더 복잡해집니다 (예 :) foo_bar.

단점은 키 목록을 복제해야하므로 목록이 긴 경우 자세한 코드가 생성된다는 것입니다. 이 경우에 구조를 제거하면 객체 리터럴 구문이 복제되므로 목록을 그대로 복사하여 붙여 넣을 수 있습니다.

단점은 ES6에 자연스러운 성능 솔루션이라는 것입니다.

IIFE

let subset = (({ foo, bar }) => ({ foo, bar }))(obj); // dupe ({ foo, bar })

임시 변수

let { foo, bar } = obj;
let subset = { foo, bar }; // dupe { foo, bar }

문자열 목록

선택된 키의 임의 목록은 질문에 따라 문자열로 구성됩니다. 이를 통해 사전 정의 할 수 없으며 키 이름이 포함 된 변수를 사용할 수 있습니다 pick(obj, 'foo', someKey, ...moreKeys).

각 JS 버전마다 하나의 라이너가 짧아집니다.

ES5

var subset = Object.keys(obj)
.filter(function (key) { 
  return ['foo', 'bar'].indexOf(key) >= 0;
})
.reduce(function (obj2, key) {
  obj2[key] = obj[key];
  return obj2;
}, {});

ES6

let subset = Object.keys(obj)
.filter(key => ['foo', 'bar'].indexOf(key) >= 0)
.reduce((obj2, key) => Object.assign(obj2, { [key]: obj[key] }), {});

또는 쉼표 연산자로 :

let subset = Object.keys(obj)
.filter(key => ['foo', 'bar'].indexOf(key) >= 0)
.reduce((obj2, key) => (obj2[key] = obj[key], obj2), {});

ES2019

ECMAScript를 2017가 Object.entries와 Array.prototype.includesECMAScript를 2019가 있으며, Object.fromEntries필요하고 쉽게 작업을 할 때, 그들은 polyfilled 할 수 있습니다 :

let subset = Object.fromEntries(
  Object.entries(obj)
  .filter(([key]) => ['foo', 'bar'].includes(key))
)

하나의 라이너는 Lodashpick 와 유사 하거나 omit키 목록이 인수를 통해 전달 되는 도우미 함수로 다시 작성 될 수 있습니다 .

let pick = (obj, ...keys) => Object.fromEntries(
  Object.entries(obj)
  .filter(([key]) => keys.includes(key))
);

let subset = pick({ foo: 1, qux: 2 }, 'foo', 'bar'); // { foo: 1 }

누락 된 키에 대한 참고 사항

디스트 럭처링과 기존 Lodash와 유사한 pick기능 의 주요 차이점은 디스트 럭처링 에는 존재하지 않는 선택된 키가 undefined하위 집합에 값을 포함한다는 것입니다.

(({ foo, bar }) => ({ foo, bar }))({ foo: 1 }) // { foo: 1, bar: undefined }

이 동작은 바람직하거나 바람직하지 않을 수 있습니다. 구문을 파괴하기 위해 변경할 수 없습니다.

하지만 pick대신 집어 키의 목록을 반복하여 키 누락 포함하도록 변경 될 수있다 :

let inclusivePick = (obj, ...keys) => Object.fromEntries(
  keys.map(key => [key, obj[key]])
);

let subset = inclusivePick({ foo: 1, qux: 2 }, 'foo', 'bar'); // { foo: 1, bar: undefined }

핵심 라이브러리에 내장 된 것과 같은 것은 없지만 객체 파괴를 사용하여 수행 할 수 있습니다 ...

const {color, height} = sourceObject;
const newObject = {color, height};

유틸리티 함수를 작성할 수도 있습니다 ...

const cloneAndPluck = function(sourceObject, keys) {
    const newObject = {};
    keys.forEach((obj, key) => { newObject[key] = sourceObject[key]; });
    return newObject;
};

const subset = cloneAndPluck(elmo, ["color", "height"]);

Lodash와 같은 라이브러리도 있습니다 _.pick().

사용 된 답변이 없기 때문에이 답변을 추가하고 Comma operator있습니다.

그것은 매우 쉽게 destructuring assignment및 ,연산자

const object = { a: 5, b: 6, c: 7  };
const picked = ({a,c} = object, {a,c})

console.log(picked);

동적 속성 할당이 향상되면 다음과 같이 보일 수 있습니다.

하나 더 해결책 :

var subset = {
   color: elmo.color,
   height: elmo.height 
}

이것은 지금까지 거의 모든 대답보다 훨씬 더 읽기 쉬워 보이지만 어쩌면 그것은 저뿐입니다!

Lodash 를 사용할 수도 있습니다.

var subset = _.pick(elmo ,'color', 'height');

보완하면서 "elmo"배열이 있다고 가정 해 봅시다.

elmos = [{ 
      color: 'red',
      annoying: true,
      height: 'unknown',
      meta: { one: '1', two: '2'}
    },{ 
      color: 'blue',
      annoying: true,
      height: 'known',
      meta: { one: '1', two: '2'}
    },{ 
      color: 'yellow',
      annoying: false,
      height: 'unknown',
      meta: { one: '1', two: '2'}
    }
];

lodash를 사용하여 동일한 동작을 원하면 다음을 수행하십시오.

var subsets = _.map(elmos, function(elm) { return _.pick(elm, 'color', 'height'); });

이 질문 에서 논의한 바와 같이 JavaScript에서 동적으로 명명 된 변수를 파기하는 것은 불가능 합니다.

키를 동적으로 설정 하려면 다음과 같이 객체를 변경하지 않고 축소 기능을 사용할 수 있습니다.

const getSubset = (obj, ...keys) => keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {});

const elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
}

const subset = getSubset(elmo, 'color', 'annoying')
console.log(subset)

단일 복제본을 업데이트하는 대신 모든 반복에서 새 객체를 생성하고 있습니다. – mpen

아래는 단일 복제본으로 reduce를 사용하는 버전입니다 (감소하기 위해 전달 된 초기 값 업데이트).

const getSubset = (obj, ...keys) => keys.reduce((acc, curr) => {
  acc[curr] = obj[curr]
  return acc
}, {})

const elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
}

const subset = getSubset(elmo, 'annoying', 'height', 'meta')
console.log(subset)

TypeScript 솔루션 :

export function pick<T extends object, U extends keyof T>(obj: T, paths: Array<U>) {
    return paths.reduce((o, k) => {
        o[k] = obj[k];
        return o;
    }, Object.create(null));
}

타이핑 정보는 자동 완성을 허용합니다.

속임수를 위한 DefinitelyTyped의 크레딧U extends keyof T

pick이미 사용중인 경우 lodash 라이브러리의 방법을 사용하십시오 .

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

_.pick(object, ['a', 'c']);

// => { 'a': 1, 'c': 3 }

https://lodash.com/docs/4.17.10#pick

다이나믹 솔루션

['color', 'height'].reduce((a,b) => (a[b]=elmo[b],a), {})

let subset= (obj,keys)=> keys.reduce((a,b)=> (a[b]=obj[b],a),{});


// TEST

let elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
};

console.log( subset(elmo, ['color', 'height']) );

또 다른 방법은 ...

var elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
}

var subset = [elmo].map(x => ({
  color: x.color,
  height: x.height
}))[0]

이 함수는 Objects =) 배열과 함께 사용할 수 있습니다

어때요 :

function sliceObj(obj) {
  var o = {}
    , keys = [].slice.call(arguments, 1);
  for (var i=0; i<keys.length; i++) {
    if (keys[i] in obj) o[keys[i]] = obj[keys[i]];
  }
  return o;
}

var subset = sliceObj(elmo, 'color', 'height');

이것은 Chrome 콘솔에서 작동합니다. 이것에 문제가 있습니까?

var { color, height } = elmo
var subelmo = { color, height }
console.log(subelmo) // {color: "red", height: "unknown"}

동적 속성으로 할당 해체

이 솔루션은 특정 예에만 적용되는 것이 아니라보다 일반적으로 적용 할 수 있습니다.

const subset2 = (x, y) => ({[x]:a, [y]:b}) => ({[x]:a, [y]:b});

const subset3 = (x, y, z) => ({[x]:a, [y]:b, [z]:c}) => ({[x]:a, [y]:b, [z]:c});

// const subset4...etc.


const o = {a:1, b:2, c:3, d:4, e:5};


const pickBD = subset2("b", "d");
const pickACE = subset3("a", "c", "e");


console.log(
  pickBD(o), // {b:2, d:4}
  pickACE(o) // {a:1, c:3, e:5}
);

subset4더 많은 속성을 고려하기 위해 등을 쉽게 정의 할 수 있습니다 .

좋은 Array.prototype.reduce:

const selectable = {a: null, b: null};
const v = {a: true, b: 'yes', c: 4};

const r = Object.keys(selectable).reduce((a, b) => {
  return (a[b] = v[b]), a;
}, {});

console.log(r);

이 응답은 또한, 마법 콤마 연산자를 사용 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

정말로 화려하고 싶다면 더 컴팩트합니다.

const r = Object.keys(selectable).reduce((a, b) => (a[b] = v[b], a), {});

재사용 가능한 함수로 통합

const getSelectable = function (selectable, original) {
  return Object.keys(selectable).reduce((a, b) => (a[b] = original[b], a), {})
};

const r = getSelectable(selectable, v);
console.log(r);

1. 인수를 배열로 변환

2. Array.forEach()재산을 고르기 위해 사용 하십시오

   Object.prototype.pick = function(...args) {
      var obj = {};
      args.forEach(k => obj[k] = this[k])
      return obj
   }
   var a = {0:"a",1:"b",2:"c"}
   var b = a.pick('1','2')  //output will be {1: "b", 2: "c"}

function splice()
{
    var ret = new Object();

    for(i = 1; i < arguments.length; i++)
        ret[arguments[i]] = arguments[0][arguments[i]];

    return ret;
}

var answer = splice(elmo, "color", "height");

시험

const elmo={color:"red",annoying:!0,height:"unknown",meta:{one:"1",two:"2"}};

const {color, height} = elmo; newObject = ({color, height});

console.log(newObject); //{ color: 'red', height: 'unknown' }

Ivan Nosov 답변에 내 2 센트 추가 :

필자의 경우 객체에서 '슬라이스'하기 위해 많은 키가 필요했기 때문에 매우 역동적 인 솔루션이 아닌 추악하고 빠릅니다.

const object = { a: 5, b: 6, c: 7, d: 8, aa: 5, bb: 6, cc: 7, dd: 8, aaa: 5, bbb: 6, ccc: 7, ddd: 8, ab: 5, bc: 6, cd: 7, de: 8  };
const picked = (({ a, aa, aaa, ab, c, cc, ccc, cd }) => ({ a, aa, aaa, ab, c, cc, ccc, cd }))(object);

console.log(picked);

eval을 사용하는 동적 솔루션은 다음과 같습니다.

const slice = (k, o) => eval(`(${k} => ${k})(o)`);


const object    = { a: 5, b: 6, c: 7, d: 8, aa: 5, bb: 6, cc: 7, dd: 8, aaa: 5, bbb: 6, ccc: 7, ddd: 8, ab: 5, bc: 6, cd: 7, de: 8  };
const sliceKeys = '({ a, aa, aaa, ab, c, cc, ccc, cd })';

console.log( slice(sliceKeys, object) );

참고 : 원래 질문은 자바 스크립트에 대한 것이지만 아래 솔루션으로 jQuery를 수행 할 수 있습니다.

원하는 경우 하나의 슬라이스에 대한 샘플 코드가 jquery를 확장 할 수 있습니다.

jQuery.extend({
  sliceMe: function(obj, str) {
      var returnJsonObj = null;
    $.each( obj, function(name, value){
        alert("name: "+name+", value: "+value);
        if(name==str){
            returnJsonObj = JSON.stringify("{"+name+":"+value+"}");
        }

    });
      return returnJsonObj;
  }
});

var elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
};


var temp = $.sliceMe(elmo,"color");
alert(JSON.stringify(temp));

여기에 같은 바이올린이 있습니다 : http://jsfiddle.net/w633z/