本篇文章為大家展示了怎么在JavaScript中引用vs復(fù)制，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

10多年專注成都網(wǎng)站制作，成都定制網(wǎng)站，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)站,高端網(wǎng)頁制作,對石雕等多個行業(yè)，擁有多年設(shè)計經(jīng)驗。

let age = 18;
let age2 = age;
console.log(age, age2);

我們會得到以下的值：

18 18

這個相信大家都能很好理解。

那么如果我們改變 age 的值呢？輸出會有什么變化？

age = 20;
console.log(age, age2);

我們會得到：

20 18

看到這里大家就奇怪了，上面的結(jié)果都很正常啊。

但在 JavaScript 中是有例外的，對于普通數(shù)據(jù)類型如 integer，string，boolean 可以通過 = 來復(fù)制這個變量，但對于 array 和 object 數(shù)據(jù)類型，= 只能起到引用的效果。

大家可以看下面這個例子：

let arr = ['wes', 'bob', 'faker'];
let arr2 = arr;
console.log(arr2, arr);
arr[2] = 'dean';
console.log(arr2, arr);

得到的結(jié)果是：

["wes", "bob", "faker"] ["wes", "bob", "faker"]
["wes", "bob", "dean"] ["wes", "bob", "dean"]

我們會發(fā)現(xiàn)隨著 arr 的改變，arr2 也會跟著改變。

說明 arr2 并沒有復(fù)制 arr 的值，只是引用了它，它們都指向同一個內(nèi)存中的值。

object 也是一樣的：

let obj = {
 age: 19,
 name: 'like',
 last: 'jam'
};
let obj2 = obj;
console.log(obj, obj2);
obj.age = 50;
console.log(obj, obj2);

得到的結(jié)果是：

{age: 19, name: "like", last: "jam"} {age: 19, name: "like", last: "jam"}
{age: 50, name: "like", last: "jam"} {age: 50, name: "like", last: "jam"}

那么如何復(fù)制 array 和 object 呢？

復(fù)制 array 的方法：

方法1：

let arr2 = [].concat(arr);

方法2：

let arr2 = arr.slice();

方法3：

let arr2 = Array.from(arr);

方法4：

let arr2 = [...arr];

一般我們比較常用的是方法3和方法4，方法1和方法2比較取巧，但都是可以達到復(fù)制 array 的目的的。

ps: [...arr] 是 ES6 中的方法。

復(fù)制 object 的方法：

方法1：

let obj2 = Object.assign({}, obj);

方法2：

let obj2 = {...obj};

方法1和方法2都有個缺點，它們只會復(fù)制對象的第一層。

看下面這個例子：

let obj = {
 number: 12,
 name: {
  first: 'bob',
  last: 'evil'
 }
};
let obj2 = Object.assign({}, obj);
obj.number = 50;
console.log(obj, obj2);

我們會得到下面的結(jié)果：

obj = {
    number: 50,
    name: {
        first: 'bob',
        last: 'evil'
    }
}

obj2 = {
    number: 12,
    name: {
        first: 'bob',
        last: 'evil'
    }
}

但如果我們改變第二層的值：

obj.name.first = 'sam';
console.log(obj, obj2);

obj = {
    number: 50,
    name: {
        first: 'sam',
        last: 'evil'
    }
}

obj2 = {
    number: 12,
    name: {
        first: 'sam',
        last: 'evil'
    }
}

上述內(nèi)容就是怎么在JavaScript中引用vs復(fù)制，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標題：怎么在JavaScript中引用vs復(fù)制
分享地址：http://www.chinadenli.net/article44/jcojhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、搜索引擎優(yōu)化、動態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站維護、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)