Code example analysis of copying JavaScript arrays and objects

This article mainly introduces the knowledge related to the copying of JavaScript arrays and objects. Has very good reference value. Let’s take a look at it with the editor

1.Data type

In a narrow sense, JS All data is divided into two major types: basic types and reference types. The basic types include Undefined, Null, Boolean, Number and String, the reference type is Object, and the commonly used Array, Date, RegExp, Function, etc. all belong to the Object class type.

One of the differences between basic data and reference data is that when copying a variable, basic data copies an independent new copy, while reference data copies a reference to the original variable. The following is an example:

// 基本类型数据的复制
var a = 10;
var b = a; // b = 10
a = 20; // a = 20, b = 10
// 引用类型数据的复制
var m = [1, 2];
var n = m;
m[0] = 10;
console.log(n[0]); // 10

If I want to copy the value of the reference type itself instead of the reference, obviously the above method cannot be used.

2. Shallow copy of array

Shallow copy means that when the object (array) is copied, the value of its reference field will not be copied, but copied. A reference to the corresponding field. For example:

var src = [
 'alpha',
 ['bravo', 'chalie']
];
var dest = [];
for (var i = 0; i < src.length; i++) {
 dest[i] = src[i];
}
//此时，如果改变src中的引用字段，dest中相应的字段也会被改变
src[1].push(&#39;delta&#39;);
console.log(dest[1]); // [&#39;bravo&#39;, &#39;chalie&#39;, &#39;delta&#39;]

Shallow copy is generally used for one-dimensional array, that is, when there is no reference type in the array. Commonly used shallow copy methods are:

concat method

 var src = ['alpha', 'bravo'],
  dest = [];
 dest = dest.concat(src);

The concat method is more used in array merging, such as:

 var a = ['alpha', 'bravo'],
  b = ['chalie', 'delta'],
  combine;
 combine = a.concat(b);

It should be pointed out in particular that when concat is used to merge arrays, it copies all elements in two (or more) arrays to a new object. For large arrays, the overhead is relatively high. A better way is to copy the elements of the latter array to the previous array:

 var src = ['alpha', 'bravo'],
  dest = ['chalie', 'delta'];
 Array.prototype.push.apply(src, dest);

slice method

The slice method can be Returns the selected elements in an array and returns a new array.

 var src = ['alpha', 'bravo'],
 var dest = src.slice(0);

3. Shallow copying of objects

Shallow copying of objects can be achieved using for-in traversal, and the more convenient Object.assign is provided in es6 ()method.

 var src = {name: 'fox', age: 20},
  dest = null;
 dest = Object.assign({}, src);

You can also use $.extend in jQuery, _.extend in underscore, etc. to copy objects.

4. Deep copy

The application scenarios of shallow copy are limited. In more cases, we hope to be able to copy the objectto create a complete Copy, which requires the use of typeof or instanof operators to determine the type of each field. If a field is of basic type, it can be copied directly. If a field is of reference type, the above judgment needs to be made on all fields of the field, which makes it easy for us to consider using recursion to implement this function.

function deep_copy(src, dest) {
 for (var p in src) {
  if (Array.isArray(src[p]) || src[p] instanceof Object) {
   dest[p] = Array.isArray(src[p]) ? [] : {};
   arguments.callee(dest[p], src[p]);
  }else {
   dest[p] = src[p];
  }
 }
}

In the above code, since arrays are special objects, they can be traversed using for-in.

In addition, you can also use the json method:

 function deep_copy_in_json(src) {
  return JSON.parse(JSON.stringify(src));
 }

Although this is relatively simple, many attributes of the original object will be lost after the operation. , such as the construtor attribute and some methods in the object prototype.

The above is the detailed content of Code example analysis of copying JavaScript arrays and objects. For more information, please follow other related articles on the PHP Chinese website!