This is the fourth day of my participation in the August Text Challenge.More challenges in August

Shallow copy

Typical cases

  • Object.assign()
  • An assignment
  • Array.prototype.slice()
  • Array.prototype.concat()

define

Shallow copy for js basic types of copy right, to a reference type copies only a pointer, but the pointer to heap memory is the same, so for the fundamental types of the original object properties change will not affect the new copy of the object of the corresponding property, but the property change of the original object reference type, a new copy of the corresponding object attribute changes

Object. The assign instance

var obj = {name: 'hello'.child: {name: 'tom'.age: 10}};
var copy = Object.assign({}, obj)

obj
child:
  age: 20
  name: "jerry"
name: "world"

copy
child:
  age: 20
  name: "jerry"
name: "hello"

obj.name = 'world';
obj.child.name = 'jerry';
obj.child.age = 20;

obj
child:
  age: 20
  name: "jerry"
name: "world"
copy
child:
  age: 20
  name: "jerry"
name: "hello"
Copy the code

Rest instance

var rest = {name: 'iamrest'.child: {childname: 'iamchild'.age: 30}};
undefined
varrestcopy = {... rest}undefined
rest
{name: "iamrest".child: {... }}child: {childname: "iamchild".age: 30}
name: "iamrest"
restcopy
{name: "iamrest".child: {... }}child: {childname: "iamchild".age: 30}
name: "iamrest"

rest.name = 'imnotrest';
rest.child.age = 40
40
rest
{name: "imnotrest".child: {... }}child: {childname: "iamchild".age: 40}
name: "imnotrest"
__proto__: Object
restcopy
{name: "iamrest".child: {... }}child: {childname: "iamchild".age: 40}
name: "iamrest"
__proto__: Object
Copy the code

Array. The prototype. Slice instance

The slice() method returns a new array object, which is a shallow copy of the original array determined by begin and end (not including end). The original array will not be changed. , see developer.mozilla.org/zh-CN/docs/…

Slice method usage (core: shallow copy array)

arr.slice();
// [0, end]

arr.slice(begin);
// [begin, end]

arr.slice(begin, end);
// [begin, end)
Copy the code
The instance
var arr = [3.4[5.6]].undefined

var slice0 = arr.slice();
undefined

slice0;
(3) [3.4.Array(2)]
0: 3
1: 4
2: (2) [5.6]
length: 3
__proto__: Array(0)
Copy the code

Conclusion: If no arguments are passed, a full shallow copy of the original array is made

var slice1 = arr.slice(1);
undefined

slice1;
(2) [4.Array(2)]
0: 4
1: (2) [5.6]
length: 2
__proto__: Array(0)
Copy the code

Conclusion: If you pass an argument, the index position of the array (the element containing the index position) is shallow copied to the last element of the array

var slice2 = arr.slice(0.2);
undefined

slice2
(2) [3.4]
0: 3
1: 4
length: 2
__proto__: Array(0)
Copy the code

If two arguments are passed, the original array is shallow copied from the index position of the first argument (containing the element) to the second argument (excluding the element)

Insert array splice method (core: slice array, add and delete elements, directly operate on the original array)

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

If the second argument after start is considered deleteCount, it will be deleteCount. If the second argument after start is considered deleteCount, it will be deleteCount. In fact, they all start with the third parameter and are optional. If they are filled in, they are added to indicate the element to be added to the array

Method points
  1. The method returns a value ofBe deletedAn array of elements
  2. Methods delete and add elements based on the original array, that is, operate on the array directly (i.e. operate on the array as if it were a linked list).
Parameters of the note
  • Start Operation starting point
  • DeleteCount Number of deletions
  • Item new element
Start can be any integer, including positive integer, negative integer, and 0
  • If 0, it starts at the first element of the array (and includes the element where the start index resides)
  • If it is a negative integer in the array length range, it is counted forward from the end of the array
  • If it is a positive integer in the array length range, it counts backwards from the array header

As a whole, the splice method is an advanced slicing operation that can delete and add elements to an array simultaneously

DeleteCount indicates the number of elements to delete. Zero or negative values do not delete array elements
The instance
[3.4.7.8].splice('s')
(4) [3.4.7.8]
[3.4.7.8].splice(false)
(4) [3.4.7.8]
[3.4.7.8].splice(true)
(3) [4.7.8]
[3.4.7.8].splice(1000)
[]
[3.4.7.8].splice(-1000)
(4) [3.4.7.8]
[3.4.7.8].splice(0)
(4) [3.4.7.8]
[3.4.7.8].splice(1)
(3) [4.7.8]
[3.4.7.8].splice(3.1)
[8]
[3.4.7.8].splice(3.6)
[8]
Copy the code

DeleteCount = arr. Length-start (deleteCount = arr

  • When start passes a strange argument, such as a string, Splice tries to convert the string to a number. If the conversion fails, it becomes a NaN, and then it treats it as a zero, emptying the array.
  • Boolean values are also converted to numbers, true is 1, false is 0;
  • For floating-point numbers, splice will round them, leaving only the integer part.
  • So when you pass a positive integer greater than the length of the array, you don’t delete the elements of the array. When you pass a negative integer with the absolute value greater than the length of the array, deleteCount = arr. Length-start results in a number greater than the length of the array, so the array is emptied
[3.4.7.8].splice('s'.3)
(3) [3.4.7]
[3.4.7.8].splice(false.3)
(3) [3.4.7]
[3.4.7.8].splice(true.3)
(3) [4.7.8]
[3.4.7.8].splice(-1000.3)
(3) [3.4.7]
[3.4.7.8].splice(1000.3)
[]
[3.4.7.8].splice(0.3)
(3) [3.4.7]
[3.4.7.8].splice('1'.3)
(3) [4.7.8]

Number('s')
NaN

[3.4.7.8].splice(NaN.3)
(3) [3.4.7]

[3.4.7.8].splice(3.6.3)
[8]
[3.4.7.8].splice(3.2.3)
[8]

Number(3.6)
3.6
parseInt(3.6)
3
parseInt(3.2)
3
Copy the code

If the value of start is an integer greater than the length of the array, no matter how many elements deleteCount is, If start is a negative integer whose absolute value is greater than the length of the array, start presses 0

On the contrary, the analysis will be more complicated. The above is just for understanding, with the original official definition attached:

Start Specifies the starting position of the modification (counting from 0). If the length of the array is exceeded, the contents are appended from the end of the array. If it is negative, it represents the number of bits from the bottom of the array (counting from -1); If the absolute value of a negative number is greater than the length of the array, the starting position is bit 0.

DeleteCount An optional integer representing the number of array elements to be removed. If deleteCount is 0 or negative, the element is not removed. In this case, at least one new element should be added.

If deleteCount is greater than the total number of elements after start, all elements after start are deleted (including the start bit). If deleteCount is omitted, it is equivalent to (arr. Length-start).

item1, item2, … optional

The element to be added to the array starts at the start position. If not specified, splice() will delete only array elements.

Deep copy

define

Deep copy is an absolute copy of the copied object. The two copied objects are independent of each other

implementation

var tom = {name: 'iamtom'.child: {age: 20.name: 'imtomchild'}};
undefined

var tomcopy = JSON.parse(JSON.stringify(tom));
undefined

tomcopy
{name: "iamtom".child: {... }}child: {age: 20.name: "imtomchild"}
name: "iamtom"
__proto__: Object

tom
{name: "iamtom".child: {... }}child: {age: 20.name: "imtomchild"}
name: "iamtom"
__proto__: Object

tom.child.age = 30;
30

tom
{name: "iamtom".child: {... }}child: {age: 30.name: "imtomchild"}
name: "iamtom"
__proto__: Object

tomcopy
{name: "iamtom".child: {... }}child: {age: 20.name: "imtomchild"}
name: "iamtom"
__proto__: Object
Copy the code

Conclusion: Stringing the copied object using the Stringify method of a JSON object and then objectifying the generated string produces an object identical to the original object but with a different memory space

var arr = [2.3.5.11.49];
undefined
var arrcopy = JSON.parse(JSON.stringify(arr));
undefined

arr
(5) [2.3.5.11.49]
arrcopy
(5) [2.3.5.11.49]

arr[2] = 6;
6

arr
(5) [2.3.6.11.49]
arrcopy
(5) [2.3.5.11.49]
Copy the code

Conclusion: Arrays also work (because arrays are objects by nature)

There is a problem

Special attributes of an object cannot be copied, including:

  • undefined
  • Symbol value
  • function
  • The date type
  • Regular type
  • …
var special = {
	name: 'normal'.a: undefined.b: function test() {
		console.log('hello')},c: Symbol('world'),}undefined

var specialcopy = JSON.parse(JSON.stringify(special))
undefined

special
{name: "normal".a: undefined.b: ƒ.c: Symbol(world)} a: undefinedb: ƒ test (c) :Symbol(world)name: "normal"__proto__: Object
a: undefined
b: ƒ test ()c: Symbol(world)
name: "normal"
__proto__: Object

specialcopy
{name: "normal"}
Copy the code

reference

  • Built-in es5 objects
  • Object. Assign principle and its implementation
  • Parse the differences between assignment, shallow copy, and deep copy
  • How to implement a deep copy of the interview question