Diyelim ki bir nesnem var:

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

Özelliklerinin bir alt kümesiyle yeni bir nesne yapmak istiyorum.

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

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

Bunu nasıl başarabilirim?

Nesne Yıkımını ve Özellik Kısayolunu Kullanma

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

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

Philipp Kewisch'ten:

Bu gerçekten sadece anonim bir fonksiyon olarak anılır. Tüm bunlar MDN'deki Yıkım Ataması sayfasında bulunabilir . İşte genişletilmiş bir form

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'a bir göz atmanızı öneririm ; çok sayıda faydalı fonksiyona sahiptir.

Örneğin pick()tam olarak aradığın şey olurdu:

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

Vaktini boşa harcamak

ES6 kullanıyorsanız, bunu yıkım kullanarak yapmanın çok özlü bir yolu var. Yıkım, bir forma kullanarak nesnelere kolayca eklemenizi sağlar, ancak aynı zamanda alt küme nesnelerini de yapmanızı sağlar.

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

Biraz daha ayrıntılı olsa da, Array.prototype.reduce komutunu kullanarak herkesin 2 yıl önce alt çizgi / lodash'ı önerdiğini başarabilirsiniz .

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

Bu yaklaşım onu ​​diğer taraftan çözer: bir nesneyi alıp ayıklamak için özellik adlarını iletmek, bir dizi özellik adı almak ve bunları yeni bir nesneye azaltmak yerine.

En basit durumda daha ayrıntılı olsa da, burada bir geri çağrı oldukça kullanışlı, çünkü bazı ortak gereksinimleri kolayca karşılayabilirsiniz, örneğin 'renk' özelliğini yeni nesnede 'renk' olarak değiştirmek, dizileri düzleştirmek vb. bir hizmetten / kitaplıktan bir nesne alırken ve başka bir yere ihtiyaç duyulan yeni bir nesne oluştururken yapmanız gerekenler. Alt çizgi / lodash mükemmel, iyi uygulanmış kütüphaneler olsa da, daha az satıcıya güvenmek için tercih edilen yaklaşımım ve alt küme oluşturma mantığım daha karmaşık hale geldiğinde daha basit, daha tutarlı bir yaklaşım.

edit: aynı es7 sürümü:

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

edit: currying için de güzel bir örnek! 'Seç' işlevinin başka bir işlev döndürmesini sağlayın.

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

Yukarıdakiler diğer yönteme oldukça yakındır, ancak anında bir 'seçici' oluşturmanıza izin verir. Örneğin

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

Bu yaklaşım hakkında özellikle temiz olan şey, seçilen 'seçimleri' kolayca bir işlev alan herhangi bir şeye aktarabilmenizdir, örneğin Array#map:

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

ES6 yıkımı

Yıkım sözdizimi , bir nesneyi işlev parametreleri veya değişkenlerle yıkmaya ve yeniden birleştirmeye izin verir.

Sınırlama, anahtar listesinin önceden tanımlanmış olması, sorudan bahsedildiği gibi dize olarak listelenememesidir. Bir anahtarın alfasayısal olmadığı durumlarda yıkım daha karmaşık hale gelir, ör foo_bar.

Dezavantajı, bunun bir anahtar listesinin çoğaltılmasını gerektirmesidir, bir listenin uzun olması durumunda ayrıntılı kodla sonuçlanır. Bu durumda yıkım, nesne değişmez sözdizimini çoğalttığından, bir liste olduğu gibi kopyalanabilir ve yapıştırılabilir.

Bunun tersi, ES6 için doğal olan performanslı bir çözümdür.

Hayatta

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

Geçici değişkenler

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

Dizelerin bir listesi

Seçilmiş anahtarların keyfi listesi, sorunun gerektirdiği gibi dizelerden oluşur. Bu, onları önceden tanımlamamıza ve anahtar adları içeren değişkenler kullanmanıza izin verir pick(obj, 'foo', someKey, ...moreKeys).

Her JS sürümünde bir astar daha kısalır.

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

Veya virgül operatörü ile:

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

ES2019

ECMAScript 2017 , ECMAScript 2019'a sahiptir Object.entriesve gerektiğinde çoklu doldurulabilir ve görevi kolaylaştırır:Array.prototype.includesObject.fromEntries

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

Tek satırlıkpick , Lodash'a benzer bir yardımcı işlev olarak veya omitanahtar listesinin bağımsız değişkenlerden geçirildiği şekilde yeniden yazılabilir :

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 }

Eksik tuşlar hakkında bir not

Yıkım ve geleneksel Lodash benzeri pickişlev arasındaki en büyük fark, yıkımın undefinedbir alt kümede değeri olan var olmayan seçilmiş anahtarlar içermesidir :

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

Bu davranış istenebilir veya istenmeyebilir. Yıkım sözdizimi için değiştirilemez.

İken pickyerine aldı tuşlarının bir listesini yineleme tarafından anahtarları eksik içerecek şekilde değiştirilebilir:

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 }

Çekirdek kütüphanede yerleşik böyle bir şey yoktur, ancak bunu yapmak için nesne yıkımını kullanabilirsiniz ...

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

Ayrıca bir yardımcı program işlevi yazabilirsiniz ...

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

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

Lodash gibi kütüphaneler de var _.pick().

Bu cevabı ekliyorum çünkü cevapların hiçbiri kullanılmadı Comma operator.

Bu çok kolay destructuring assignmentve ,operatör

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

console.log(picked);

Dinamik özellikler ataması için belirli bir geliştirmeyle şu şekilde görünebilir:

Bir çözüm daha:

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

Bu benim için şimdiye kadarki herhangi bir cevaptan çok daha okunabilir görünüyor, ama belki bu sadece benim!

Lodash'ı da kullanabilirsiniz .

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

Tamamlayıcı, diyelim bir dizi "elmo" lar var:

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 kullanarak aynı davranışı istiyorsanız, sadece:

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

Bu soruda tartışıldığı gibi JavaScript'te dinamik olarak adlandırılmış değişkenlere zarar vermek imkansızdır .

Anahtarları dinamik olarak ayarlamak için , nesneyi aşağıdaki gibi mutasyona uğratmadan azaltma işlevini kullanabilirsiniz:

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)

Tek bir klonu güncellemek yerine her yinelemede yeni bir nesne oluşturduğunuzu unutmayın. - mpen

aşağıda tek klonlu azaltma kullanan bir sürümdür (azaltmak için ilk değeri güncelleme).

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 çözümü:

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

Yazma bilgileri otomatik tamamlamaya bile izin verir:

İçin kredi DefinitelyTyped için U extends keyof Thile!

pickZaten kullanıyorsanız, kütüphane kütüphanesini kullanın .

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

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

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

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

Dinamik çözüm

['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']) );

Başka bir yol ...

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]

Bu işlevi bir dizi Nesne ile kullanabilirsiniz =)

Nasıl olur:

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

Bu, Chrome konsolunda benim için çalışıyor. Bununla ilgili bir sorun mu var?

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

Dinamik özelliklere sahip yıkım ataması

Bu çözüm yalnızca özel örneğiniz için değil, daha genel olarak uygulanabilir:

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

Daha subset4fazla mülkü hesaba katmak için kolayca vb. Tanımlayabilirsiniz .

Yaşlı 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);

bu cevap büyülü virgül operatörünü de kullanıyor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

gerçekten süslü olmak istiyorsanız, bu daha kompakt:

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

Hepsini yeniden kullanılabilir bir işleve koymak:

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. bağımsız değişkenleri diziye dönüştür

2. Array.forEach()özelliği seçmek için kullan

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

Deneyin

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

2 sentimi Ivan Nosov cevabına ekleyerek :

Benim durumumda nesneden 'dilimlenmek' için birçok anahtara ihtiyacım vardı, bu yüzden çirkin çok hızlı hale geliyor ve çok dinamik bir çözüm değil:

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

İşte eval kullanarak dinamik bir çözüm:

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

Not: Sorulan orijinal soru javascript için olsa da, aşağıdaki çözüm ile jQuery yapılabilir

burada bir dilim için örnek kod istiyorsanız jquery genişletebilirsiniz:

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

İşte aynı keman: http://jsfiddle.net/w633z/