一个 js 中值传递和引用传递的坑。

qingshanli1988 发布于2019-08-20 14:51 / 2218人阅读

今天在调试代码时遇到一个问题，刚开始想不明白，然后分析了一下后，才知道其中的问题，这也是一个基础的问题，（所以基础是很重要的）

代码如下：

var a = 3;
a = a * 2;
console.log(a); // a = 6

var b = 1, c =2, d = 3;
var arr1 = [b,c,d];
arr1.forEach((item)=>{
    item = item * 2;
});
console.log(arr1); //arr1 = [1,2,3];

var arr2 = [{a:1},{a:2},{a:3}];
arr2.forEach((item)=>{
    item.a = item.a*2;
});
console.log(arr2); //arr2 = [{a:2},{a:4},{a:6}]

如果你能不假思索的得出上面的答案，我相信你对这方面的知识已经很了解了，所以可以不用继续往下看了，如果你像我今天该开始一样，觉得有点疑惑的话，那么这篇文文章就很适合你。

首先我们应该知道的是，在 javascript 中，基本数据类型是通过值传递的。

比如:

var a=1,b;
    b = a;// 这时 a 和 b 的值都为 1
    a = 2;//这时 a 的值 为 2，b 的值还是为 1 ，

所以当 b = a， a = 2；a直接赋给b的值是1，所以 b 就等于 1，而 a 的变化改变不了 b 的值

在 js 中复杂数据类型是通过引用传递的

比如：

var v1 = { a:1 };
var v2 = v1; //v2 = { a:1 }
v1.a = 2;
console.log(v2.a); // v2.a = 2;

了解了以上的一些基础知识后，就不难理解最开始的代码输出结果了。

1.
    var a = 3;
    a = a * 2;
    console.log(a); // a = 6
    
2. 
    var b = 1, c =2, d = 3;
    var arr1 = [b,c,d];
    arr1.forEach((item)=>{
    item = item * 2;
    });
    console.log(arr1); //arr1 = [1,2,3];
    
3. 
    var arr2 = [{a:1},{a:2},{a:3}];
    arr2.forEach((item)=>{
    item.a = item.a*2;
    });
    console.log(arr2); //arr2 = [{a:2},{a:4},{a:6}]

第一段代码当然好理解，就是简单的值传递而已，然而第二段代码呢？我刚开始有点困惑的是，既然也是值传递，那为什么它的值没有变化还是原先的值，注意：这里我忽略了重要的一点，所以导致我不明白，那就是在这个 forEach 的遍历中，还存在一个赋值的过程，就是这个过程导致 arr1 的值没有改变，在每次循环中 arr1中的值都会赋给 item，就是 item = b， item = c，item = d，所以后面对item 的改变就与 b，v，d 没有关系了。
所以那么第三段也就很好理解了，他也与第二段代码一样，每次回存在一个赋值，但是注意的是 arr2 中存储的是对象，就是 item = { a:1 } ...,这样 item 仍然指向 arr2 中对象，所以这时对 item 的修改就可以通过 arr2 来反应出来。

虽然这只是自己的粗心造成的，但仍然是自己的基础不扎实而导致的，所以想要成为好的程序员，基础是非常重要的。希望大家都能注重基础的知识，为自己学习高级东西而打下坚实的基础。

云服务器 GPU云服务器 js传递一个对象引用传递 jsp和js如何传递数据 php引用传递

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81967.html

举三个列子，弄清楚js中值传递。

摘要：值传递的典型这是典型的值传递的例子，只是把它的值给了局部变量，因此他们的存储是分开的，函数不会改变的值。看来的参数传递还是有点小复杂的。预备知识首先要明白基本类型和引用类型的区别：基本类型： var num1=5; var num2=num1; 基本类型存储图 showImg(https://segmentfault.com/img/bVEB5w?w=214&h=325); 从...

Big_fat_cat 2019-08-22 10:41 评论0 收藏0
JS对象(2)值传递与引用传递

摘要：对象值传递与引用传递数据类型与数据结构我们需要先回忆一下。值传递与引用传递通过上述的理解要明白中值传递与引用传递就太简单了，下面的两个超级简单的可以诠释一切。 title: JS对象(2)值传递与引用传递 date: 2016-10-05 tags: JavaScript 0x00 数据类型与数据结构我们需要先回忆一下。 JavaScript 是一种弱类型或者说动态语...

Jacendfeng 2019-08-21 11:17 评论0 收藏0
JS中深拷贝与浅拷贝

摘要：地址传递引用类型则是地址传递，将存放在栈内存中的地址赋值给接收的变量。即对象的浅拷贝会对主对象进行拷贝，但不会复制主对象里面的对象。相关知识点 1.javascript变量包含两种不同数据类型的值：基本类型和引用类型。基本类型值指的是简单的数据段，包括es6里面新增的一共是有6种，具体如下：number、string、boolean、null、undefined、symbol。引...

ranwu 2019-08-23 15:41 评论0 收藏0
javascript 变量赋值为数组是引用传递的坑

摘要：记录今天处理了小时的，代码如下我以为预期是结果却是说明这是一个引用传递了。铭记前天，月号，又遇到一个坑，原以为数组引用是一坑，暂时用这样的方式解决了，可是当引用内好有引用时这样的方式同意会遭遇坑，切记记录今天处理了2小时的BUG，代码如下： var a ={ id:[1,2,3] } var d = a.id; d.push(4); console.dir(a); ...

13651657101 2019-08-19 14:45 评论0 收藏0
在iframe使用中关于数据传递的一些问题

摘要：之前很少使用这个标签，因为感觉到父子页面之间传递数据不太方便。最近同事做的一组页面中大量的使用了用来嵌入其他页面，由于懒所以只好看看如何在的标签下传递数据。在父页面中使用函数来向子页面发送消息而在子页面中添加这个来接受消息。之前很少使用IFRAME这个标签，因为感觉到父子页面之间传递数据不太方便。最近同事做的一组页面中大量的使用了IFRAME用来嵌入其他页面，由于懒,所以只好看看如何...

Object 2019-08-19 14:26 评论0 收藏0