Maison > interface Web > js tutoriel > Explication détaillée des étapes de mise en œuvre de la méthode de fusion de tableaux et de la fusion d'objets dans JS

Explication détaillée des étapes de mise en œuvre de la méthode de fusion de tableaux et de la fusion d'objets dans JS

php中世界最好的语言
Libérer: 2018-05-22 10:45:04
original
1510 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes de mise en œuvre de la méthode de fusion de tableaux et de la fusion d'objets en JS Quelles sont les précautions pour la mise en œuvre de la fusion de tableaux. Fusion de méthodes et d'objets dans JS. Voici quelques cas pratiques.

1 Fusion de tableaux

Méthode de concatération 1.1

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 不改变本身
Copier après la connexion

1.2 Boucle Traversez

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;]
Copier après la connexion

1.3 apply

pour fusionner le tableau arr1 et le tableau arr2, utilisez Array.prototype.push.apply(arr1, arr2) ou 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']
Copier après la connexion

2 Fusion d'objets

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
Copier après la connexion

2.2 Affectation de traversée

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};
Copier après la connexion

2.3 Obj.assign()

Vous pouvez attribuer n'importe quel nombre d'objets source à Les propriétés énumérables elles-mêmes sont copiées dans l'objet cible, puis renvoyées à l'objet cible.

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 }, 且目标对象自身也会改变。 
Copier après la connexion

2.4 Copie profonde et copie superficielle de l'objet

2.4.1 Copie superficielle

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的影响
Copier après la connexion

2.4.2 Copie profonde

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的影响
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour installer et utiliser Node.js Express

Étapes pour utiliser Node. moteur de modèles de développement front-end Jade Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal