一個(gè) js 中值傳遞和引用傳遞的坑。

qingshanli1988 發(fā)布于2019-08-20 14:51 / 2331人閱讀

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

代碼如下：

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}]

如果你能不假思索的得出上面的答案，我相信你對(duì)這方面的知識(shí)已經(jīng)很了解了，所以可以不用繼續(xù)往下看了，如果你像我今天該開始一樣，覺得有點(diǎn)疑惑的話，那么這篇文文章就很適合你。

首先我們應(yīng)該知道的是，在 javascript 中，基本數(shù)據(jù)類型是通過值傳遞的。

比如:

var a=1,b;
    b = a;// 這時(shí) a 和 b 的值都為 1
    a = 2;//這時(shí) a 的值 為 2，b 的值還是為 1 ，

所以當(dāng) b = a， a = 2；a直接賦給b的值 是1，所以 b 就等于 1，而 a 的變化改變不了 b 的值

在 js 中復(fù)雜數(shù)據(jù)類型是通過引用傳遞的

比如：

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

了解了以上的一些基礎(chǔ)知識(shí)后，就不難理解最開始的代碼輸出結(jié)果了。

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}]

第一段代碼當(dāng)然好理解，就是簡(jiǎn)單的值傳遞而已，然而第二段代碼呢？我剛開始有點(diǎn)困惑的是，既然也是值傳遞，那為什么它的值沒有變化還是原先的值，注意：這里我忽略了重要的一點(diǎn)，所以導(dǎo)致我不明白，那就是在這個(gè) forEach 的遍歷中，還存在一個(gè)賦值的過程，就是這個(gè)過程導(dǎo)致 arr1 的值沒有改變，在每次循環(huán)中 arr1中的值都會(huì)賦給 item， 就是 item = b， item = c，item = d，所以后面對(duì)item 的改變就與 b，v，d 沒有關(guān)系了。 
所以那么 第三段也就很好理解了，他也與第二段代碼一樣，每次回存在一個(gè)賦值，但是注意的是 arr2 中存儲(chǔ)的是對(duì)象，就是 item = { a:1 } ...,這樣 item 仍然指向 arr2 中對(duì)象，所以這時(shí)對(duì) item 的修改就可以通過 arr2 來反應(yīng)出來。

雖然這只是自己的粗心造成的，但仍然是自己的基礎(chǔ)不扎實(shí)而導(dǎo)致的，所以想要成為好的程序員，基礎(chǔ)是非常重要的。希望大家都能注重基礎(chǔ)的知識(shí)，為自己學(xué)習(xí)高級(jí)東西而打下堅(jiān)實(shí)的基礎(chǔ)。