一個 js 中值傳遞和引用傳遞的坑。

qingshanli1988 發布于2019-08-20 14:51 / 2336人閱讀

今天在調試代碼時遇到一個問題，剛開始想不明白，然后分析了一下后，才知道其中的問題，這也是一個基礎的問題，（所以基礎是很重要的）

代碼如下：

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引用傳遞

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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