Sebagai contoh jika saya memiliki dua objek:
var foo = {
x: "bar",
y: "baz"
}
dan
var oof = {}
dan saya ingin mentransfer nilai x dan y dari foo ke oof. Apakah ada cara untuk melakukan itu menggunakan sintaksis esstructuring es6?
mungkin sesuatu seperti:
oof{x,y} = foo
javascript
ecmascript-6
destructuring
majorBummer
sumber
sumber
Object.assign(oof, foo)
Object.assign
Jawaban:
Meski jelek dan sedikit berulang, Anda bisa melakukannya
yang akan membaca dua nilai
foo
objek, dan menuliskannya ke lokasi masing-masing padaoof
objek.Secara pribadi saya masih lebih suka membaca
atau
meskipun.
sumber
var oof = {};
.({x: oof.x, y: oof.y} = foo)
? Saya pikir Anda telah menempatkan tambahan f di oof .Tidak, perusakan tidak mendukung ekspresi anggota di singkatan tetapi hanya propertynames biasa pada saat ini. Sudah ada pembicaraan tentang esdiscuss, tetapi tidak ada proposal yang akan masuk ke ES6.
Anda mungkin dapat menggunakan
Object.assign
namun - jika Anda tidak membutuhkan semua properti sendiri, Anda masih bisa melakukannyasumber
--harmony_destructuring
diaktifkan. Saya melihat "SyntaxError: Token yang tidak terduga."{oof.x, oof.y} = foo
. Atau mungkin aku benar-benar melewatkannya.IMO ini adalah cara termudah untuk mencapai apa yang Anda cari:
Pada dasarnya, perusakan menjadi variabel dan kemudian gunakan singkatan initializer untuk membuat objek baru. Tidak perlu
Object.assign
Saya pikir ini adalah cara yang paling mudah dibaca. Anda dapat memilih alat peraga yang tepat sesuai
someObject
yang Anda inginkan. Jika Anda memiliki objek yang sudah ada dan ingin digabungkan dengan props, lakukan sesuatu seperti ini:Cara lain, yang bisa dibilang lebih bersih, untuk menulisnya adalah:
Saya menggunakan ini untuk
POST
banyak permintaan di mana saya hanya perlu beberapa data diskrit. Tapi, saya setuju harus ada satu liner untuk melakukan ini.EDIT: PS - Saya baru-baru ini belajar Anda dapat menggunakan ultra destrukturisasi pada langkah pertama untuk menarik nilai bersarang dari objek kompleks! Misalnya...
Plus, Anda bisa menggunakan operator spread alih-alih Object.assign ketika membuat objek baru:
Atau...
sumber
Selain
Object.assign
ada sintaks penyebaran objek yang merupakan proposal Tahap 2 untuk ECMAScript.Tetapi untuk menggunakan fitur ini, Anda perlu menggunakan
stage-2
atautransform-object-rest-spread
plugin untuk babel. Berikut ini adalah demo tentang babel denganstage-2
sumber
Plugin BabelJS
Jika Anda menggunakan BabelJS sekarang Anda dapat mengaktifkan plugin saya
babel-plugin-transform-object-from-destructuring
( lihat paket npm untuk instalasi dan penggunaan ).Saya memiliki masalah yang sama yang dijelaskan di utas ini dan bagi saya itu sangat melelahkan ketika Anda membuat objek dari ekspresi yang merusak, terutama ketika Anda harus mengganti nama, menambah atau menghapus properti. Dengan plugin ini, mempertahankan skenario seperti itu akan jauh lebih mudah bagi Anda.
Contoh objek
dapat ditulis sebagai:
Contoh array
dapat ditulis sebagai:
sumber
let myTest = { test1, test3 } = myObject;
tidak berfungsiSangat mungkin. Hanya saja tidak dalam satu pernyataan.
(Perhatikan tanda kurung di sekitar pernyataan.) Namun perlu diingat keterbacaan lebih penting daripada kode-golf :).
Sumber: http://exploringjs.com/es6/ch_destrukturisasi.html#sec_assignment-targets
sumber
Anda bisa menggunakan restrukturisasi untuk itu seperti ini:
Atau menggabungkan kedua objek jika memiliki nilai:
sumber
oof = {...oof, ...foo}
Anda bisa mengembalikan objek yang dirusak dalam fungsi panah, dan menggunakan Object.assign () untuk menetapkannya ke variabel.
sumber
KERING
atau
sumber
Anda dapat merusak objek yang ditugaskan langsung ke atribut objek lain.
Contoh kerja:
Anda dapat bekerja dengan merusak menggunakan variabel dengan nama atribut objek yang sama yang ingin Anda tangkap, dengan cara ini Anda tidak perlu melakukannya:
Gunakan cara ini:
Cara yang sama Anda dapat mengatur nilai baru ke struktur objek jika mereka memiliki nama atribut yang sama.
Lihatlah contoh kerja ini:
sumber
Ini bekerja di chrome 53.0.2785.89
sumber
oof
hanya menerima referensifoo
dan melewati seluruh perusakan (setidaknya di Chrome).oof === foo
danlet oof = { x } = foo
belum mengembalikan{ x, y }
Saya datang dengan metode ini:
Yang bisa Anda gunakan seperti ini:
yaitu, Anda dapat memilih properti mana yang Anda inginkan dan memasukkannya ke objek baru. Tidak seperti itu
_.pick
Anda, Anda juga dapat mengubah nama mereka secara bersamaan.Jika Anda ingin menyalin alat peraga ke objek yang ada, cukup setel
dest
arg.sumber
Ini agak curang, tetapi Anda dapat melakukan sesuatu seperti ini ...
Dalam praktiknya, saya pikir Anda jarang ingin menggunakannya. Berikut ini JAUH lebih jelas ... tetapi tidak menyenangkan.
Rute lain yang sama sekali berbeda, yang mencakup pengikatan dengan prototipe (hati-hati sekarang ...):
sumber
Ini adalah solusi yang paling mudah dibaca dan paling singkat yang bisa saya buat:
Ini akan menampilkan
{ isValidDate: 'yes' }
Akan menyenangkan untuk suatu hari bisa mengatakan sesuatu seperti
let newProps = ({ isValidDate } = props)
tapi sayangnya itu bukan sesuatu yang didukung ES6.sumber
Ini bukan cara yang indah, saya juga tidak merekomendasikannya, tetapi mungkin seperti ini, hanya untuk pengetahuan.
sumber
Anda dapat menggunakan metode kelas JSON untuk mencapainya sebagai berikut
Pass properti yang perlu ditambahkan ke objek yang dihasilkan sebagai argumen kedua
stringify
berfungsi dalam format array.MDN Doc untuk JSON.stringify
sumber