Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Implementierungsschritte der Array-Zusammenführungsmethode und der Objektzusammenführung in JS

Detaillierte Erläuterung der Implementierungsschritte der Array-Zusammenführungsmethode und der Objektzusammenführung in JS

php中世界最好的语言
Freigeben: 2018-05-22 10:45:04
Original
1510 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Erläuterung der Implementierungsschritte der Array-Zusammenführungsmethode und der Objekt--Zusammenführung in JS geben. Was sind die Vorsichtsmaßnahmen für die Array-Zusammenführungsmethode und das Objekt? Im Folgenden sehen wir uns praktische Fälle an.

1 Array-Zusammenführung

1.1 Concat-Methode

var a=[1,2,3],b=[4,5,6];
var c=a.concat(b);
console.log(c);// 1,2,3,4,5,6
console.log(a);// 1,2,3 不改变本身
Nach dem Login kopieren

1.2 Schleifendurchquerung

var arr1=['a','b'];
var arr2=['c','d','e'];
for(var i=0;i<arr2.length;i++){
   arr1.push(arr2[i]) 
}
console.log(arr1);//[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;]
Nach dem Login kopieren

1.3 apply

Um Array arr1 und Array arr2 zusammenzuführen, verwenden Sie Array.prototype.push.apply(arr1, arr2) oder arr1.push.apply ( arr1,arr2);

var arr1=[&#39;a&#39;,&#39;b&#39;];
var arr2=[&#39;c&#39;,&#39;d&#39;,&#39;e&#39;];
Array.prototype.push.apply(arr1,arr2);
//或者
arr1.push.apply(arr1,arr2);<br>console.log(arr1) //['a','b','c','d','e']
Nach dem Login kopieren

2 Objektzusammenführung

2.1 $.extend()

var obj1= {'a': 1};
var obj2= {'b': 1};
var c = $.extend(obj1, obj2); 
console.log(obj1); // {a: 1, b: 1} obj1已被修改 
//或者 <br>var obj3 = $.extend({}, obj1, obj2) <br>console.log(obj3); //{a: 1, b: 1} 不会改变obj1,obj2
Nach dem Login kopieren

2.2 Traversal-Zuweisung

var obj1={'a':1};
var obj2={'b':2,'c':3};
for(var key in obj2){
   if(obj2.hasOwnProperty(key)===true){  <br>   //此处hasOwnProperty是判断自有属性,
使用 for in 循环遍历对象的属性时,原型链上的所有属性都将被访问会避免原型对象扩展带来的干扰
      obj1[key]=obj2[key];
} 
}
console.log(obj1);//{'a':1,'b':2,'c':3};
Nach dem Login kopieren

2.3 Obj.assign()

Sie können eine beliebige Anzahl der eigenen aufzählbaren Eigenschaften des Quellobjekts in das Zielobjekt kopieren und dann Gibt das Zielobjekt zurück.

Object.assign(target, ...sources)
//a. 复制一个对象<br>var obj = { a: 1 ,b:2};
var copyObj = Object.assign({}, obj);
console.log(copyObj); // { a: 1,b:2 }<br><br>//b.合并多个对象 
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 且目标对象自身也会改变。 
Nach dem Login kopieren

2.4 Tiefe Kopie und flache Kopie des Objekts

2.4.1 Flache Kopie

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
$.extend(obj1, obj2);  //obj1拷贝了obj2的属性
console.log(obj1) // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1) // 22
obj2.b.b1=44;  //obj2重新赋值
console.log(obj1.b.b1) // 44 obj1.b仅拷贝了对象的指引,所以受原obj2的影响
Nach dem Login kopieren

2.4.2 Tiefe Kopie

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
$.extend(true,obj1, obj2);  //第一个参数设为true表示深复制
console.log(obj1) // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1) // 22
obj2.b.b1=44;  //obj2重新赋值
console.log(obj1.b.b1) // 22 obj1拷贝了obj2的所有属性以及值,并不受obj2的影响
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Installation und Verwendung von Node.js Express

Schritte zur Verwendung von Node.js Express Front-End-Entwicklungsvorlagen-Engine Jade Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierungsschritte der Array-Zusammenführungsmethode und der Objektzusammenführung in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage