Misalnya jika saya memiliki dua benda:
var foo = {
x: "bar",
y: "baz"
}
dan
var oof = {}
dan saya ingin mentransfer nilai x dan y dari foo untuk oof. Apakah ada cara untuk melakukan itu dengan menggunakan es6 destructuring sintaks?
mungkin sesuatu seperti:
oof{x,y} = foo
Sementara jelek dan sedikit berulang-ulang, yang dapat anda lakukan
({x: oof.x, y: oof.y} = foo);
yang akan membaca dua nilai dari foo
objek, dan menulis mereka masing-masing lokasi pada oof
objek.
Secara pribadi saya'd masih suka membaca
oof.x = foo.x;
oof.y = foo.y;
atau
['x', 'y'].forEach(prop => oof[prop] = foo[prop]);
meskipun.
Tidak, destructuring tidak mendukung anggota ekspresi di shorthands tapi hanya polos propertynames pada waktu saat ini. Ada telah berbicara tentang seperti pada esdiscuss, tapi tidak ada proposal yang akan membuatnya menjadi ES6.
Anda mungkin dapat menggunakan Object.assign
namun - jika anda don't membutuhkan semua properti sendiri, anda masih dapat melakukan
var foo = …,
oof = {};
{
let {x, y} = foo;
Object.assign(oof, {x, y})
}
IMO ini adalah cara termudah untuk mencapai apa yang anda'kembali mencari:
let { prop1, prop2, prop3 } = someObject;
let data = { prop1, prop2, prop3 };
// data === { prop1: someObject.prop1, ... }
Pada dasarnya, destructure ke dalam variabel-variabel dan kemudian menggunakan penginisialisasi singkatan untuk membuat objek baru. Tidak perlu untuk Objek.menetapkan
Saya pikir ini adalah yang paling mudah dibaca way, ngomong-ngomong. Anda dapat dengan memilih alat peraga yang tepat keluar dari someObject
yang anda inginkan. Jika anda memiliki sebuah objek yang ada anda hanya ingin menggabungkan alat peraga ke dalam, melakukan sesuatu seperti ini:
let { prop1, prop2, prop3 } = someObject;
let data = Object.assign(otherObject, { prop1, prop2, prop3 });
// Makes a new copy, or...
Object.assign(otherObject, { prop1, prop2, prop3 });
// Merges into otherObject
Yang lain, bisa dibilang bersih, cara untuk menulis itu adalah:
let { prop1, prop2, prop3 } = someObject;
let newObject = { prop1, prop2, prop3 };
// Merges your selected props into otherObject
Object.assign(otherObject, newObject);
Saya menggunakan ini untuk POST
permintaan banyak di mana aku hanya perlu beberapa potongan-potongan data diskrit. Tapi, saya setuju harus ada satu kapal untuk melakukan hal ini.
Selain Objek.menetapkan
ada objek menyebar sintaks yang merupakan Tahap 2 proposal untuk ECMAScript.
var foo = {
x: "bar",
y: "baz"
}
var oof = { z: "z" }
oof = {...oof, ...foo }
console.log(oof)
/* result
{
"x": "bar",
"y": "baz",
"z": "z"
}
*/
Tapi untuk menggunakan fitur ini anda perlu menggunakan tahap-2
atau mengubah-objek-istirahat-tidur
plugin untuk babel. Berikut ini adalah demo di babel dengan tahap 2
Jika anda menggunakan BabelJS sekarang anda dapat mengaktifkan plugin saya babel-plugin-mengubah-objek-dari-destructuring
(lihat npm paket untuk instalasi dan penggunaan).
Saya memiliki masalah yang sama dijelaskan di thread ini dan bagi saya itu sangat melelahkan ketika anda membuat sebuah objek dari destructuring ekspresi, terutama ketika anda harus mengubah, menambah atau menghapus properti. Dengan plugin ini mempertahankan skenario tersebut akan jauh lebih mudah bagi anda.
let myObject = {
test1: "stringTest1",
test2: "stringTest2",
test3: "stringTest3"
};
let { test1, test3 } = myObject,
myTest = { test1, test3 };
dapat ditulis sebagai:
let myTest = { test1, test3 } = myObject;
let myArray = ["stringTest1", "stringTest2", "stringTest3"];
let [ test1, , test3 ] = myArray,
myTest = [ test1, test3 ];
dapat ditulis sebagai:
let myTest = [ test1, , test3 ] = myArray;
It's benar-benar mungkin. Hanya saja tidak dalam satu pernyataan.
var foo = {
x: "bar",
y: "baz"
};
var oof = {};
({x: oof.x, y: oof.y} = foo); // {x: "bar", y: "baz"}
(Catatan kurung di seluruh pernyataan.) Namun perlu diingat keterbacaan yang lebih penting dari kode-golf :).
Sumber: http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets
Anda hanya dapat menggunakan restrukturisasi untuk yang seperti ini:
const foo = {x:"a", y:"b"};
const {...oof} = foo; // {x:"a", y:"b"}
Atau gabungan kedua benda jika oof memiliki nilai-nilai:
const foo = {x:"a", y:"b"};
let oof = {z:"c"}
oof = Object.assign({}, oof, foo)
KERING
var a = {a1:1, a2: 2, a3: 3};
var b = {b1:1, b2: 2, b3: 3};
const newVar = (() => ({a1, a2, b1, b2})).bind({...a, ...b});
const val = newVar();
console.log({...val});
// print: Object { a1: 1, a2: 2, b1: 1, b2: 2 }
atau
console.log({...(() => ({a1, a2, b1, b2})).bind({...a, ...b})()});
Ini adalah yang paling mudah dibaca dan terpendek solusi yang saya bisa datang dengan:
let props = {
isValidDate: 'yes',
badProp: 'no!',
};
let { isValidDate } = props;
let newProps = { isValidDate };
console.log(newProps);
Itu akan output { isValidDate: 'ya' }
Ini akan bagus untuk beberapa hari, anda bisa mengatakan sesuatu seperti mari newProps = ({ isValidDate } = alat peraga)
tapi sayangnya itu bukan sesuatu ES6 mendukung.
Saya datang dengan metode ini:
exports.pick = function pick(src, props, dest={}) {
return Object.keys(props).reduce((d,p) => {
if(typeof props[p] === 'string') {
d[props[p]] = src[p];
} else if(props[p]) {
d[p] = src[p];
}
return d;
},dest);
};
Yang dapat anda gunakan seperti ini:
let cbEvents = util.pick(this.props.events, {onFocus:1,onBlur:1,onCheck:'onChange'});
let wrapEvents = util.pick(this.props.events, {onMouseEnter:1,onMouseLeave:1});
yaitu, anda dapat memilih sifat-sifat yang anda inginkan dan menempatkan mereka ke sebuah objek baru. Tidak seperti _.pilih
anda juga dapat mengubah nama mereka pada waktu yang sama.
Jika anda ingin copy alat peraga ke objek yang ada, hanya menetapkan tujuan
arg.
It's tidak cara yang indah, atau saya merekomendasikan hal ini, tetapi itu's mungkin cara ini, hanya untuk pengetahuan.
const myObject = {
name: 'foo',
surname: 'bar',
year: 2018
};
const newObject = ['name', 'surname'].reduce(
(prev, curr) => (prev[curr] = myObject[curr], prev),
{},
);
console.log(JSON.stringify(newObject)); // {"name":"foo","surname":"bar"}
Anda dapat merusak objek menetapkan langsung ke objek lain atribut.
Contoh kerja:
let user = {};
[user.name, user.username] = "Stack Overflow".split(' ');
document.write(`
1st attr: ${user.name} <br />
2nd attr: ${user.username}`);
Anda dapat bekerja dengan merusak menggunakan variabel dengan nama yang sama dengan nama atribut objek yang ingin anda nikmati, dengan cara ini anda don't perlu anda lakukan:
biarkan user = { nama: 'Mike' } mari { nama: nama } = pengguna;
Gunakan cara ini:
biarkan user = { nama: 'Mike' } mari { nama } = pengguna;
Dengan cara yang sama anda dapat mengatur nilai-nilai baru untuk objek struktur jika mereka memiliki atribut yang sama dengan nama.
Melihat ini contoh kerja:
// The object to be destructed
let options = {
title: "Menu",
width: 100,
height: 200
};
// Destructing
let {width: w, height: h, title} = options;
// Feedback
document.write(title + "<br />"); // Menu
document.write(w + "<br />"); // 100
document.write(h); // 200
Ini adalah jenis kecurangan, tetapi anda dapat melakukan sesuatu seperti ini...
const originalObject = {
hello: 'nurse',
meaningOfLife: 42,
your: 'mom',
};
const partialObject = (({ hello, your }) => {
return { hello, your };
})(originalObject);
console.log(partialObject); // { hello: 'nurse', your: 'mom' }
Dalam prakteknya, saya pikir anda'd jarang mau menggunakan itu. Berikut adalah JAUH lebih jelas... tapi tidak hampir sama menyenangkan.
const partialObject = {
hello: originalObject.hello,
your: originalObject.your,
};
Lain benar-benar rute yang berbeda, yang meliputi mucking dengan prototipe (hati-hati sekarang...):
if (!Object.prototype.pluck) {
Object.prototype.pluck = function(...props) {
return props.reduce((destObj, prop) => {
destObj[prop] = this[prop];
return destObj;
}, {});
}
}
const originalObject = {
hello: 'nurse',
meaningOfLife: 42,
your: 'mom',
};
const partialObject2 = originalObject.pluck('hello', 'your');
console.log(partialObject2); // { hello: 'nurse', your: 'mom' }
Anda dapat menggunakan JSON kelas metode untuk mencapai hal sebagai berikut
const foo = {
x: "bar",
y: "baz"
};
const oof = JSON.parse(JSON.stringify(foo, ['x','y']));
// output -> {x: "bar", y: "baz"}
Lulus sifat yang perlu ditambahkan ke objek yang dihasilkan sebagai argumen kedua untuk stringify
fungsi dalam berbagai format.