欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中深拷貝與淺拷貝詳解

 更新時間：2022年02月09日 11:31:29   作者：橘貓吃不胖～  
大家好，本篇文章主要講的是JavaScript中深拷貝與淺拷貝詳解，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下

1 淺拷貝概念

深拷貝和淺拷貝是只針對Object和Array這樣的引用數(shù)據(jù)類型的。

淺拷貝是創(chuàng)建一個新對象，該對象有著原始對象屬性值的一份精確拷貝。如果屬性是基本類型，拷貝的就是基本類型的值，如果屬性是引用類型，拷貝的就是內(nèi)存地址 ，所以如果其中一個對象改變了這個地址，就會影響到另一個對象。

示例代碼：

let people = { //定義一個People對象
    name: "張三",
    age: 3,
    address: "中國"
}

console.log("原對象：", people);
let newPeople = people; //進行淺拷貝
console.log("新對象：", newPeople);
//原對象： { name: '張三', age: 3, address: '中國' }
//新對象： { name: '張三', age: 3, address: '中國' }

//為對象修改名字
newPeople.name = "橘貓吃不胖";
console.log("原對象：", people);
console.log("新對象：", newPeople);
//原對象： { name: '橘貓吃不胖', age: 3, address: '中國' }
//新對象： { name: '橘貓吃不胖', age: 3, address: '中國' }

從上面的示例可以看出，當newPeople的name屬性修改后，原來的people也發(fā)生了變化，這是因為新創(chuàng)建的對象與舊對象具有相同的內(nèi)存地址。

2 深拷貝概念

深拷貝是將一個對象從內(nèi)存中完整的拷貝一份出來,從堆內(nèi)存中開辟一個新的區(qū)域存放新對象，且修改新對象不會影響原對象。

示例代碼：

let people = { //定義一個People對象
    name: "張三",
    age: 3,
    address: "中國"
}

//對people進行深拷貝
let newPeople = JSON.parse(JSON.stringify(people));
console.log("原對象：", people);
console.log("新對象：", newPeople);
// 原對象： { name: '張三', age: 3, address: '中國' }
// 新對象： { name: '張三', age: 3, address: '中國' }

//修改新對象中的adress屬性
newPeople.address = "俄羅斯";
console.log("原對象：", people);
console.log("新對象：", newPeople);
// 原對象： { name: '張三', age: 3, address: '中國' }
// 新對象： { name: '張三', age: 3, address: '俄羅斯' }

從上面的例子可以看出，深拷貝后，修改新對象，不會影響原對象。

3 淺拷貝的實現(xiàn)方式

3.1 Object.assign()

Object.assign()方法用于將所有可枚舉屬性的值從一個或多個源對象分配到目標對象。它將返回目標對象。Object.assign() 進行的是淺拷貝，拷貝的是對象的屬性的引用，而不是對象本身。

語法：

Object.assign(target, ...sources)
//target：目標對象；sources：源對象。

如果目標對象中的屬性具有相同的鍵，則屬性將被源對象中的屬性覆蓋。后面的源對象的屬性將類似地覆蓋前面的源對象的屬性。

示例：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

//進行淺拷貝
const returnedTarget = Object.assign(target, source);

console.log(target);
console.log(returnedTarget);
// { a: 1, b: 4, c: 5 }
// { a: 1, b: 4, c: 5 }

//修改其中的值
target.b = 10;
console.log(target);
console.log(returnedTarget);
// { a: 1, b: 10, c: 5 }
// { a: 1, b: 10, c: 5 }

當對象object只有一層的時候，是深拷貝，示例代碼如下：

const obj = { name: "橘貓吃不胖" };

//進行淺拷貝
let newObj = Object.assign({}, obj);

//修改新對象中的name屬性為張三
newObj.name = "張三";
console.log("原對象：", obj);
console.log("新對象：", newObj);
// 原對象： { name: '橘貓吃不胖' }
// 新對象： { name: '張三' }

3.2 Array.prototype.concat()

concat()方法用于合并兩個或多個數(shù)組。此方法不會更改現(xiàn)有數(shù)組，而是返回一個新數(shù)組。

語法：

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
//valueN可選，數(shù)組和/或值，將被合并到一個新的數(shù)組中。
//如果省略了所有 valueN 參數(shù)，則 concat 會返回調(diào)用此方法的現(xiàn)存數(shù)組的一個淺拷貝。

示例代碼：

let arr1 = [1, 2, { name: "橘貓吃不胖" }];

//進行淺拷貝
let arr2 = arr1.concat();

console.log("原數(shù)組：", arr1);
console.log("新數(shù)組：", arr2);
// 原數(shù)組： [ 1, 2, { name: '橘貓吃不胖' } ]
// 新數(shù)組： [ 1, 2, { name: '橘貓吃不胖' } ]

//修改原數(shù)組
arr1[1] = "hhhhh";
console.log("原數(shù)組：", arr1);
console.log("新數(shù)組：", arr2);
// 原數(shù)組： [ 1, 'hhhhh', { name: '橘貓吃不胖' } ]
// 新數(shù)組： [ 1, 2, { name: '橘貓吃不胖' } ]

3.3 Array.prototype.slice()

slice() 方法返回一個新的數(shù)組對象，這一對象是一個由 begin 和 end 決定的原數(shù)組的淺拷貝（包括 begin，不包括end）。原始數(shù)組不會被改變。

語法：

arr.slice([begin[, end]])
//begin：可選，提取起始處的索引（從 0 開始），從該索引開始提取原數(shù)組元素。
//如果該參數(shù)為負數(shù)，則表示從原數(shù)組中的倒數(shù)第幾個元素開始提取，slice(-2) 表示提取原數(shù)組中的倒數(shù)第二個元素到最后一個元素（包含最后一個元素）。
//如果省略 begin，則 slice 從索引 0 開始。
//如果 begin 超出原數(shù)組的索引范圍，則會返回空數(shù)組。

//end：可選，提取終止處的索引（從 0 開始），在該索引處結(jié)束提取原數(shù)組元素。slice 會提取原數(shù)組中索引從 begin 到 end 的所有元素（包含 begin，但不包含 end）。
//slice(1,4) 會提取原數(shù)組中從第二個元素開始一直到第四個元素的所有元素 （索引為 1, 2, 3的元素）。
//如果該參數(shù)為負數(shù)， 則它表示在原數(shù)組中的倒數(shù)第幾個元素結(jié)束抽取。 slice(-2,-1) 表示抽取了原數(shù)組中的倒數(shù)第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數(shù)第二個元素）。
//如果 end 被省略，則 slice 會一直提取到原數(shù)組末尾。
//如果 end 大于數(shù)組的長度，slice 也會一直提取到原數(shù)組末尾。

示例代碼：

let arr1 = [1, 2, { name: "橘貓吃不胖" }];

//進行淺拷貝
let arr2 = arr1.slice();

console.log("原數(shù)組：", arr1);
console.log("新數(shù)組：", arr2);
// 原數(shù)組： [ 1, 2, { name: '橘貓吃不胖' } ]
// 新數(shù)組： [ 1, 2, { name: '橘貓吃不胖' } ]

//修改原數(shù)組
arr1[1] = "hhhhh";
console.log("原數(shù)組：", arr1);
console.log("新數(shù)組：", arr2);
// 原數(shù)組： [ 1, 'hhhhh', { name: '橘貓吃不胖' } ]
// 新數(shù)組： [ 1, 2, { name: '橘貓吃不胖' } ]

3.4 直接賦值

直接使用“=”賦值可以實現(xiàn)淺拷貝，示例代碼如下：

let obj1 = { //定義一個對象obj1
    name: "張三",
    age: 34
}
let obj2 = obj1; //進行淺拷貝

console.log("obj1：", obj1);
console.log("obj2：", obj2);
// obj1： { name: '張三', age: 34 }
// obj2： { name: '張三', age: 34 }

//修改obj2中的name屬性
obj2.name = "橘貓吃不胖";

console.log("obj1：", obj1);
console.log("obj2：", obj2);
// obj1： { name: '橘貓吃不胖', age: 34 }
// obj2： { name: '橘貓吃不胖', age: 34 }

4 深拷貝的實現(xiàn)方式

4.1 JSON.parse(JSON.stringify())

JSON是一種語法，用來序列化對象、數(shù)組、數(shù)值、字符串、布爾值和 null 。它基于JavaScript語法，但與之不同：JavaScript不是JSON，JSON也不是JavaScript。

JSON對象包含兩個方法：用于解析JSON的parse()方法，以及將對象/值轉(zhuǎn)換為JSON字符串的stringify()方法，下面對這兩種方法進行一些介紹。

JSON.parse()方法用來解析JSON字符串，構造由字符串描述的JavaScript值或?qū)ο?。提供可選的 reviver 函數(shù)用以在返回之前對所得到的對象執(zhí)行變換(操作)。

語法：

JSON.parse(text[, reviver])
//text：要被解析成 JavaScript 值的字符串
//reviver，可選，轉(zhuǎn)換器, 如果傳入該參數(shù)(函數(shù))，可以用來修改解析生成的原始值，調(diào)用時機在 parse 函數(shù)返回之前。

示例：

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null

JSON.stringify()方法將一個 JavaScript 對象或值轉(zhuǎn)換為 JSON 字符串，如果指定了一個 replacer 函數(shù)，則可以選擇性地替換值，或者指定的 replacer 是數(shù)組，則可選擇性地僅包含數(shù)組指定的屬性。

語法：

JSON.stringify(value[, replacer [, space]])
//value：將要序列化成 一個 JSON 字符串的值。
//replacer，可選，如果該參數(shù)是一個函數(shù)，則在序列化過程中，被序列化的值的每個屬性都會經(jīng)過該函數(shù)的轉(zhuǎn)換和處理；如果該參數(shù)是一個數(shù)組，則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中；如果該參數(shù)為 null 或者未提供，則對象所有的屬性都會被序列化。
//space，可選，指定縮進用的空白字符串，用于美化輸出（pretty-print）；如果參數(shù)是個數(shù)字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格；如果該參數(shù)為字符串（當字符串長度超過10個字母，取其前10個字母），該字符串將被作為空格；如果該參數(shù)沒有提供（或者為 null），將沒有空格。

示例：

JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'

深拷貝示例代碼：

let people = { //定義一個People對象
    name: "張三",
    age: 3,
    address: "中國"
}

//對people進行深拷貝
let newPeople = JSON.parse(JSON.stringify(people));
console.log("原對象：", people);
console.log("新對象：", newPeople);
// 原對象： { name: '張三', age: 3, address: '中國' }
// 新對象： { name: '張三', age: 3, address: '中國' }

//修改新對象中的adress屬性
newPeople.address = "俄羅斯";
console.log("原對象：", people);
console.log("新對象：", newPeople);
// 原對象： { name: '張三', age: 3, address: '中國' }
// 新對象： { name: '張三', age: 3, address: '俄羅斯' }

用JSON.stringify將對象轉(zhuǎn)成JSON字符串，再用JSON.parse()把字符串解析成對象，這樣新的對象產(chǎn)生了，實現(xiàn)深拷貝。這種方法雖然可以實現(xiàn)數(shù)組或?qū)ο笊羁截悾荒芴幚砗瘮?shù)。

let arr1 = [1, 2, { name: "橘貓吃不胖" }, function () { }];

//進行深拷貝
let arr2 = JSON.parse(JSON.stringify(arr1));

console.log("原數(shù)組：", arr1);
console.log("新數(shù)組：", arr2);
// 原數(shù)組： [ 1, 2, { name: '橘貓吃不胖' }, [Function (anonymous)] ]
// 新數(shù)組： [ 1, 2, { name: '橘貓吃不胖' }, null ]

由上面例子可以看出，函數(shù)并沒有被拷貝在arr2中。這是因為 JSON.stringify() 方法是將一個JavaScript值（對象或者數(shù)組）轉(zhuǎn)換為一個 JSON字符串，不能接受函數(shù)。

4.2 函數(shù)庫lodash

Lodash是一個JavaScript庫，提供了多個實用程序功能，而Lodash庫中最常用的功能之一是cloneDeep()方法。此方法有助于深度克隆對象，還可以克隆JSON.stringify()方法的局限性，即不可序列化的屬性。

示例代碼：

const lodash = require("lodash");
let people = {
    name: "張三",
    age: 3,
    address: "中國"
}

//對people進行深拷貝
let newPeople = lodash.cloneDeep(people);
console.log("原對象：", people);
console.log("新對象：", newPeople);
// 原對象： { name: '張三', age: 3, address: '中國' }
// 新對象： { name: '張三', age: 3, address: '中國' }

//修改新對象中的adress屬性
newPeople.address = "俄羅斯";
newPeople.name = "橘貓吃不胖";
console.log("原對象：", people);
console.log("新對象：", newPeople);
// 原對象： { name: '張三', age: 3, address: '中國' }
// 新對象： { name: '橘貓吃不胖', age: 3, address: '俄羅斯' }

總結(jié)

到此這篇關于JavaScript中深拷貝與淺拷貝詳解的文章就介紹到這了,更多相關JavaScript深拷貝與淺拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論