Katakanlah saya punya objek:

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

Saya ingin membuat objek baru dengan subset propertinya.

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

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

Bagaimana saya bisa mencapai ini?

Menggunakan Destrukturisasi Objek dan Properti

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

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

Dari Philipp Kewisch:

Ini sebenarnya hanyalah fungsi anonim yang dipanggil secara instan. Semua ini dapat ditemukan di halaman Penugasan Destrukturisasi di MDN. Ini formulir yang diperluas

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)

Saya sarankan untuk melihat Lodash ; ia memiliki banyak fungsi utilitas yang luar biasa.

Misalnya pick()persis apa yang Anda cari:

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

biola

Jika Anda menggunakan ES6, ada cara yang sangat ringkas untuk melakukan ini dengan menggunakan penataan. Destrukturisasi memungkinkan Anda untuk dengan mudah menambahkan objek menggunakan spread, tetapi juga memungkinkan Anda untuk membuat objek subset dengan cara yang sama.

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

Meskipun sedikit lebih bertele-tele, Anda dapat mencapai apa yang orang lain rekomendasikan underscore / lodash selama 2 tahun yang lalu, dengan menggunakan Array.prototype.reduce .

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

Pendekatan ini menyelesaikannya dari sisi lain: alih-alih mengambil objek dan meneruskan nama properti ke sana untuk mengekstrak, ambil array nama properti dan kurangi menjadi objek baru.

Sementara itu lebih verbose dalam kasus paling sederhana, panggilan balik di sini cukup berguna, karena Anda dapat dengan mudah memenuhi beberapa persyaratan umum, misalnya mengubah properti 'warna' menjadi 'warna' pada objek baru, susun array, dll. - semua hal-hal yang perlu Anda lakukan ketika menerima objek dari satu layanan / perpustakaan dan membangun objek baru yang diperlukan di tempat lain. Walaupun garis bawah / lodash adalah lib yang sangat baik dan diimplementasikan dengan baik, ini adalah pendekatan yang saya pilih untuk mengurangi ketergantungan pada vendor, dan pendekatan yang lebih sederhana, lebih konsisten ketika logika membangun-subset saya menjadi lebih kompleks.

edit: versi es7 yang sama:

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

sunting: Contoh yang bagus untuk kari, juga! Minta fungsi 'pilih' mengembalikan fungsi lainnya.

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

Di atas cukup dekat dengan metode lain, kecuali itu memungkinkan Anda membangun 'pemilih' dengan cepat. misalnya

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

Apa yang sangat rapi tentang pendekatan ini, adalah Anda dapat dengan mudah memasukkan 'picks' yang dipilih ke dalam apa pun yang berfungsi, misalnya Array#map:

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

Destrukturisasi ES6

Sintaksis restrukturisasi memungkinkan untuk merusak dan menggabungkan kembali suatu objek, dengan parameter fungsi atau variabel.

Batasannya adalah bahwa daftar kunci sudah ditentukan sebelumnya, mereka tidak dapat didaftar sebagai string, seperti yang disebutkan dalam pertanyaan. Destrukturisasi menjadi lebih rumit jika kuncinya adalah non-alfanumerik, misalnya foo_bar.

The downside adalah bahwa ini mengharuskan untuk menduplikasi daftar kunci, ini menghasilkan kode verbose jika daftar panjang. Karena merusak duplikat sintaksis objek objek dalam kasus ini, daftar dapat disalin dan ditempel sebagaimana adanya.

Keuntungannya adalah bahwa itu adalah solusi yang alami untuk ES6.

IIFE

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

Variabel sementara

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

Daftar string

Daftar sewenang-wenang dari kunci yang dipilih terdiri dari string, sesuai dengan pertanyaan. Ini memungkinkan untuk tidak menentukan sebelumnya dan menggunakan variabel yang berisi nama-nama kunci, seperti pick(obj, 'foo', someKey, ...moreKeys).

Satu kalimat menjadi lebih pendek pada setiap edisi 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] }), {});

Atau dengan operator koma:

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

ES2019

ECMAScript 2017 memiliki Object.entriesdan Array.prototype.includes, ECMAScript 2019 memiliki Object.fromEntries, mereka dapat di-polyfilled ketika dibutuhkan dan membuat tugas lebih mudah:

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

Satu kalimatpick dapat ditulis ulang sebagai fungsi pembantu yang mirip dengan Lodash atau di omitmana daftar kunci dilewatkan melalui argumen:

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 }

Catatan tentang kunci yang hilang

Perbedaan utama antara perusakan dan fungsi konvensional seperti Lodash pickadalah bahwa perusakan mencakup kunci pilihan yang tidak ada dengan undefinednilai dalam subset:

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

Perilaku ini mungkin diinginkan atau tidak. Itu tidak dapat diubah untuk merusak sintaksis.

Sementara pickdapat diubah untuk memasukkan kunci yang hilang dengan mengulangi daftar kunci yang dipilih sebagai gantinya:

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 }

Tidak ada yang seperti itu built-in ke perpustakaan inti, tetapi Anda dapat menggunakan perusakan objek untuk melakukannya ...

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

Anda juga bisa menulis fungsi utilitas melakukannya ...

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

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

Perpustakaan seperti Lodash juga punya _.pick().

Saya menambahkan jawaban ini karena tidak ada jawaban yang digunakan Comma operator.

Ini sangat mudah dengan destructuring assignmentdan ,Operator

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

console.log(picked);

Dengan penyempurnaan tertentu untuk penetapan properti dinamis, itu bisa terlihat seperti ini:

Satu lagi solusi:

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

Ini terlihat jauh lebih mudah dibaca daripada jawaban apa pun sejauh ini, tapi mungkin itu hanya aku!

Anda dapat menggunakan Lodash juga.

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

Melengkapi, katakanlah Anda memiliki array "elmo" s:

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

Jika Anda menginginkan perilaku yang sama, menggunakan lodash, Anda cukup:

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

Destrukturisasi menjadi variabel yang dinamai secara dinamis adalah mustahil di JavaScript seperti yang dibahas dalam pertanyaan ini .

Untuk mengatur kunci secara dinamis , Anda dapat menggunakan fungsi pengurangan tanpa memutasi objek sebagai berikut:

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)

Harus dicatat bahwa Anda membuat objek baru di setiap iterasi alih-alih memperbarui satu klon. - Mpen

di bawah ini adalah versi menggunakan pengurangan dengan klon tunggal (memperbarui nilai awal yang diteruskan untuk mengurangi)

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)

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

Informasi pengetikan bahkan memungkinkan untuk penyelesaian otomatis:

Penghargaan untuk DefinitelyTyped untuk U extends keyof Ttrik!

Gunakan pickmetode perpustakaan lodash jika Anda sudah menggunakan.

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

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

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

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

Solusi dinamis

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

Dengan cara lain ...

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]

Anda dapat menggunakan fungsi ini dengan array Objects =)

Bagaimana tentang:

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

Ini berfungsi untuk saya di konsol Chrome. Ada masalah dengan ini?

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

Merusak penugasan dengan properti dinamis

Solusi ini tidak hanya berlaku untuk contoh spesifik Anda tetapi lebih umum berlaku:

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

Anda dapat dengan mudah menentukan subset4dll. Untuk mempertimbangkan lebih banyak properti.

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

jawaban ini menggunakan operator koma ajaib, juga: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

jika Anda ingin benar-benar mewah, ini lebih ringkas:

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

Menyatukan semuanya menjadi fungsi yang dapat digunakan kembali:

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. konversi argumen menjadi array

2. gunakan Array.forEach()untuk memilih properti

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

Mencoba

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

Menambahkan 2 sen saya ke jawaban Ivan Nosov :

Dalam kasus saya, saya perlu banyak tombol untuk 'diiris' dari objek sehingga menjadi sangat cepat dan bukan solusi yang sangat dinamis:

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

Jadi di sini adalah solusi dinamis menggunakan 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) );

Catatan: meskipun pertanyaan awal yang diajukan adalah untuk javascript, ini dapat dilakukan jQuery dengan solusi di bawah ini

Anda dapat memperluas jquery jika Anda inginkan di sini adalah kode sampel untuk satu slice:

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

ini biola untuk hal yang sama: http://jsfiddle.net/w633z/