Apa cara terbaik / standar untuk menggabungkan dua array asosiatif dalam JavaScript? Apakah semua orang hanya melakukannya dengan memutar for
lingkaran mereka sendiri ?
Apa cara terbaik / standar untuk menggabungkan dua array asosiatif dalam JavaScript? Apakah semua orang hanya melakukannya dengan memutar for
lingkaran mereka sendiri ?
Jawaban:
dengan jquery Anda bisa menelepon $.extend
var obj1 = {a: 1, b: 2};
var obj2 = {a: 4, c: 110};
var obj3 = $.extend(obj1, obj2);
obj1 == obj3 == {a: 4, b: 2, c: 110} // Pseudo JS
(assoc. array adalah objek di js)
lihat di sini: http://api.jquery.com/jQuery.extend/
sunting: Seperti yang disarankan rymo, lebih baik melakukannya dengan cara ini:
obj3 = $.extend({}, obj1, obj2);
obj3 == {a: 4, b: 2, c: 110}
Seperti di sini obj1 (dan obj2) tetap tidak berubah.
sunting2: Pada tahun 2018 cara untuk melakukannya adalah melalui Object.assign
:
var obj3 = Object.assign({}, obj1, obj2);
obj3 === {a: 4, b: 2, c: 110} // Pseudo JS
Jika bekerja dengan ES6 ini dapat dicapai dengan Penyebar Operator :
const obj3 = { ...obj1, ...obj2 };
obj1
, gunakan objek kosong sebagai target:$.extend({}, obj1, obj2)
Object.assign()
, yang tidak bergantung pada JQuery jika Anda belum menggunakan perpustakaan.
Sekarang di 2016 saya akan mengatakan cara terbaik / standar adalah Object.assign ()
Javascript Murni. Tidak diperlukan jQuery.
obj1 = {a: 1, b: 2};
obj2 = {a: 4, c: 110};
obj3 = Object.assign({},obj1, obj2); // Object {a: 4, b: 2, c: 110}
Informasi lebih lanjut, contoh dan polyfill di sini:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Inilah cara Prototype melakukannya:
Object.extend = function(destination, source) {
for (var property in source) {
if (source.hasOwnProperty(property)) {
destination[property] = source[property];
}
}
return destination;
};
disebut sebagai, misalnya:
var arr1 = { robert: "bobby", john: "jack" };
var arr2 = { elizabeth: "liz", jennifer: "jen" };
var shortnames = Object.extend(arr1,arr2);
EDIT : menambahkan hasOwnProperty () periksa sebagaimana ditunjukkan oleh bucabay dalam komentar
Sederhana saja ...
function mergeArray(array1,array2) {
for(item in array1) {
array2[item] = array1[item];
}
return array2;
}
arrau1.prototype
hasOwnProperty
cek itu. Mengacu pada objek sebagai array juga menyesatkan (mereka objek), nama-nama arg harus menyampaikan bahwa array2 dimutasi atau objek baru harus dikembalikan. Saya akan mengedit jawaban tetapi pada dasarnya itu akan menjadi jawaban yang persis diedit Jonathan Fingland yang telah diperbaiki.
Garis bawah juga memiliki metode perluasan:
Salin semua properti di objek sumber ke objek tujuan. Ini tidak berurutan, jadi sumber terakhir akan menimpa properti dengan nama yang sama dalam argumen sebelumnya.
_.extend(destination, *sources)
_.extend({name : 'moe'}, {age : 50});
=> {name : 'moe', age : 50}
Di dojo , 2-objek / array "merge" adalah lang.mixin(destination, source)
- Anda juga dapat mencampur beberapa sumber menjadi satu tujuan, dll - lihat referensi fungsi mixin untuk detailnya.
apakah Anda ingin menimpa properti jika namanya sama tetapi nilainya tidak?
Dan apakah Anda ingin secara permanen mengubah salah satu objek asli,
atau Anda ingin objek yang digabungkan kembali?
function mergedObject(obj1, obj2, force){
for(var p in obj1) this[p]= obj1[p];
for(var p in obj2){
if(obj2.hasOwnProperty(p)){
if(force || this[p]=== undefined) this[p]= obj2[p];
else{
n= 2;
while(this[p+n]!== undefined)++n;
this[p+n]= obj2[p];
}
}
}
}
function extend(objects) {
var args
, first = Array.prototype.slice.call(arguments, 0, 1)[0]
, second;
if (arguments.length > 1) {
second = Array.prototype.splice.call(arguments, 1, 1)[0];
for (var key in second) {
first[key] = second[key];
}
args = Array.prototype.slice.call(arguments, 0);
return extend.apply(this, args);
}
return first;
}
...
var briansDirections = {
step1: 'Remove pastry from wrapper.',
step2: 'Place pastry toaster.',
step3: 'Remove pastry from toaster and enjoy.',
};
extend(briansDirections, { step1: 'Toast Poptarts' }, { step2: 'Go ahead, toast \'em' }, { step3: 'Hey, are you sill reading this???' });
...
Ini hanya memperluas percikan objek, secara rekursif. Juga, perhatikan bahwa fungsi rekursif ini adalah TCO ( Tail-Call Dioptimalkan ) karena kembalinya adalah panggilan terakhir untuk dirinya sendiri.
Selain itu, Anda mungkin menginginkan properti yang ditargetkan . Dalam hal ini, Anda mungkin ingin untuk menyingkat objek berdasarkan id
, quantity
atau properti lain. Pendekatan ini dapat memiliki buku kecil yang ditulis tentang hal itu dan memerlukan penjajaran objek dan bisa menjadi sangat kompleks. Saya telah menulis perpustakaan kecil untuk ini yang tersedia berdasarkan permintaan.
Semoga ini membantu!
Pada 2019 Anda memiliki 2 opsi yang baik:
Penugasan objek [ doc ]
const result = Object.assign({}, baseObject, updatingObject);
Penyebaran objek [ doc ]
const result = { ...baseObject, ...updatingObject};
Yang pertama cenderung lebih aman, lebih standar dan polivalen. Pro dan kontra yang bagus di sini
Yahoo UI (YUI) juga memiliki fungsi pembantu untuk ini:
http://developer.yahoo.com/yui/examples/yahoo/yahoo_merge.html
YAHOO.namespace('example');
YAHOO.example.set1 = { foo : "foo" };
YAHOO.example.set2 = { foo : "BAR", bar : "bar" };
YAHOO.example.set3 = { foo : "FOO", baz : "BAZ" };
var Ye = YAHOO.example;
var merged = YAHOO.lang.merge(Ye.set1, Ye.set2, Ye.set3);
jquery memiliki boolean untuk salinan dalam. Anda dapat melakukan sesuatu seperti itu:
MergeRecursive = function(arr1, arr2){
$.extend(true, arr1, arr2);
return arr1;
};
Anda juga dapat mengedit fungsi ini untuk mendukung n-array untuk digabung.
ArrayMergeRecursive = function(){
if(arguments.length < 2){
throw new Error("ArrayMergeRecursive: Please enter two or more objects to merge!");
}
var arr1=arguments[0];
for(var i=0; i<=arguments.length; i++ ){
$.extend(true, arr1, arguments[i]);
}
return arr1;
};
Jadi sekarang bisa kamu lakukan
var arr1 = {'color': {'mycolor': 'red'}, 3: 5},
arr2 = {4: 10, 'color': {'favorite': 'green', 0: 'blue'}},
arr3 = ['Peter','Jhon','Demosthenes'],
results = ArrayMergeRecursive(arr1, arr2, arr3); // (arr1, arr2 ... arrN)
console.log("Result is:", results);
Saya membutuhkan penggabungan objek dalam. Jadi semua jawaban lain tidak banyak membantu saya. _.extend dan jQuery.extend melakukannya dengan baik, kecuali Anda memiliki array rekursif seperti yang saya lakukan. Tapi itu tidak terlalu buruk, Anda dapat memprogramnya dalam lima menit:
var deep_merge = function (arr1, arr2) {
jQuery.each(arr2, function (index, element) {
if (typeof arr1[index] === "object" && typeof element === "object") {
arr1[index] = deep_merge(arr1[index], element);
} else if (typeof arr1[index] === "array" && typeof element === "array") {
arr1[index] = arr1[index].concat(element);
} else {
arr1[index] = element;
}
});
return arr1;
}
Untuk menggabungkan array di jQuery, bagaimana dengan $ .merge?
var merged = $.merge([{id:3, value:'foo3'}], [{id:1, value:'foo1'}, {id:2, value:'foo2'}]);
merged[0].id == 3;
merged[0].value == 'foo3';
merged[1].id == 1;
merged[1].value == 'foo1';
merged[2].id == 2;
merged[2].value == 'foo2';
var addProps = function (original, props) {
if(!props) {
return original;
}
if (Array.isArray(original)) {
original.map(function (e) {
return addProps(e, props)
});
return original;
}
if (!original) {
original = {};
}
for (var property in props) {
if (props.hasOwnProperty(property)) {
original[property] = props[property];
}
}
return original;
};
Tes
console.log(addProps([{a: 2}, {z: 'ciao'}], {timestamp: 13}));
console.log(addProps({single: true}, {timestamp: 13}));
console.log(addProps({}, {timestamp: 13}));
console.log(addProps(null, {timestamp: 13}));
[ { a: 2, timestamp: 13 }, { z: 'ciao', timestamp: 13 } ]
{ single: true, timestamp: 13 }
{ timestamp: 13 }
{ timestamp: 13 }
Object.getOwnPropertyNames is not a function
akan merusak aplikasi.