preface

In my work, I encountered a tree structure of data. The interface returned an array and needed to iterate through the array to generate a tree structure of data, so I had to define a variable (reference data type) and a recursive method. Insert variables and arrays to get the desired data structure. Some of them have little doubts about the parameter transmission value, so record the work bit by bit.

Analysis of the

First, let’s review what the js data types are. Primitive types: Undefined, Null, Boolean, Number, and String. A raw data value is a single, simple data value with no additional attributes or methods. Reference type: Object.

There are two main locations for storing variables in the JS engine, heap memory and stack memory.

Stack memory is mainly used to store variables of various basic types. Heap memory is mainly responsible for storing variable types such as Object.

Differences in use between the two types:

Copy the variable

Basic types of

var num1 = 1; var num2= num1 ; num2= 5; console.log(num1); // 1 console.log(num2); / / 5Copy the code

Num2 has changed, but num1 has not changed with it (the primitive type copies its value in stack memory)

Reference types

var obj1 = new Object(); obj1.num = 1; var obj2 = obj1; obj2.num = 2; console.log(obj1.num); // 2 console.log(obj2.num); / / 2Copy the code

Num2 has changed, but num1 has changed as well (reference types copy their own “pointer” values in stack memory, which refer to data in the heap)

Passing parameters

function abc(num) {
   num += 1; 
   returnnum; } var i = 5; var result = abc(i); console.log( i ); // 5 console.log( result ); / / 6Copy the code

As you can see from the demo above, parameter passing (primitive type) is value passing.

function hello(obj) {   
  obj.name = 'lucy'; 
  return obj; 
}
var person = new Object();
person.name = 'lili'; 
var newPerson = hello(person);
 console.log(hello.name); // lucy
console.log(newPerson.name); // lucy
Copy the code

As you can see from the demo above, parameter passing looks like passing by reference. But you’re actually passing a pointer. You can see this in the demo below.

function hello(obj) {
    obj.name = 'lucy'; obj = new Object(); // assign a new address obj.name ='lili';
    return obj;
}

var person = new Object();
person.name = 'jon';
var newPerson = hello(person);
console.log(person.name); // lucy 
console.log(newPerson.name); // lili 
Copy the code

When I pass a person in, I’m actually passing a pointer (that is, its memory address), not the person itself. So if you pass in hello, person and obj have the same memory address, so if you change obj, the value of name changes the value of Person. name. When obj is assigned a new memory address, the memory address of obj is not the same as the memory address of Person, so the person and name will not change when obj and name are changed.

Therefore, function arguments are passed the value of the memory address, and function pass arguments are passed by value.

conclusion

At the end of the summary, if I think of what JS function parameters are passed by value or by reference missing, will continue to complete in this article, but also hope that you stubborn friends of the key points in the article to supplement or put forward their own opinions. Feel free to comment or add in the comments below. Click a “like” or “hide” if you like to make sure you use it in your development.

Finally, give you a keyboard!

(_= >[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL; '~~ZXCVBNM,./~"].map(x= >(o+=` /${b='_'.repeat(w=x<y?2:'667699'[x=["Bs"."Tab"."Caps"."Enter"][p++]||'Shift',p])}\ \ | `,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+='__'+b)[73]&&(k.push(l,m,n,o),l=' ',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`) ()Copy the code

column

column

Front-end summary series

  • Front-end summary series: NPM dependencies (Build build)Highly recommended collection
  • Front-end summary series: NPM Dependencies (Framework Platform)Highly recommended collection
  • Front-end Summary series: NPM dependencies (class library tools)Highly recommended collection

“Flexible use” series

  • Use CSS development techniques flexiblyHighly recommended collection
  • Flexible use of JS development skillsHighly recommended collection
  • Use photoshop cutting skills flexiblyHighly recommended collection

The essay series

  • A zero-configuration, out-of-the-box React/Vue application that automates building scaffoldingHighly recommended
  • Front-end Performance Optimization GuideHighly recommended collection
  • Determine the browser operating environment in detailHighly recommended collection
  • Communication mode between H5 and AppHighly recommended collection

Intravenous drip series

  • JS string comparisonHighly recommended collection
  • JS common copy (copy)Highly recommended collection
  • JS function parameters are passed by value or by referenceHighly recommended collection

Tutorial series

  • NodeJS Gadget Series (1) : Create and publish Npm modules

Focus onUzeroPublic number, more front-end small dry goods waiting for you oh!