前言

在工作中我遇到了一颗树状结构的数据，接口返回一个数组需要遍历数组生成一个树形结构的数据，那么要先定义好一个变量（引用数据类型），和一个递归的方法。把变量和数组穿进去，得到想要的数据结构。其中有小伙伴对参数传值有点小疑惑，记录一下工作点滴。

分析

首先，回顾一下js的数据类型有那些。原始类型: Undefined、Null、Boolean(布尔值)、Number(数值) 和 String(字符串)。原始数据值是一种没有额外属性和方法的单一简单数据值。引用类型: Object。

在js引擎中对变量的存储主要有两种位置，堆内存和栈内存。

栈内存主要用于存储各种基本类型的变量。而堆内存主要负责像对象Object这种变量类型的存储。

两种类型在使用上的区别：

复制变量

基本类型

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

num2改变了，但是num1没有跟着改变（原始类型复制的是自己在栈内存中的值）

引用类型

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

num2 改变了，但是 num1 也跟着改变（引用类型复制的是自己在栈内存中的“指针”值，“指针”指向的是堆里面的数据）

传递参数

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

看上面demo可以看出参数传参（原始类型）是值传递.。

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

上面demo可以看出参数传参好像是引用传递。但是实际是传递了“指针”这个值。下面demo可以看出这一点。

function hello(obj) {
    obj.name = 'lucy';
    obj = new Object(); // 新赋值了一个地址
    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

当我把 person 传进去的时候，实际是传递了“指针”(就是它的内存地址)这个值，并不是person 本身。那么传进hello函数是 person和obj 拥有相同内存地址，因此改变了 obj,name的值就是改变了person.name 的值。当 obj 赋于一个新的内存地址的时候，obj的内存地址就和person的内存地址不是同一个了，因此改变了obj,name的时候 person,name是不会改变的。

因此，函数参数传递的是内存地址这个值，函数传递参数就是按值传递的。

结语

写到最后总结得差不多了，后续如果我想起还有哪些JS函数传参是按值传递还是按引用传递遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。

最后送大家一个键盘！

(_=>[..."`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`
`)()

专栏文章

《前端汇总》系列

《灵活运用》系列

灵活运用CSS开发技巧强烈推荐收藏
灵活运用JS开发技巧强烈推荐收藏
灵活运用PS切图技巧强烈推荐收藏

随笔系列

点滴系列

教程系列

NodeJS小工具系列(1)：创建和发布Npm模块

关注Uzero公众号，更多前端小干货等着你喔！

JS函数传参是按值传递还是按引用传递？

前言

分析

复制变量

基本类型

引用类型

传递参数

结语

专栏文章

专栏文章