本文實例講述了JS淺拷貝和深拷貝原理與實現方法。分享給大家供大家參考,具體如下:
淺拷貝只會拷貝一層,深層的引用類型改變還是會受到影響。
深拷貝是所有內部的屬性還有值都被拷貝了一份,不管深層的引用類型怎么改都不會受到影響。
淺拷貝的實現方式
1、自定義函數
function shallowClone (initalObj) { var obj = {}; for ( var i in initalObj) { obj[i] = initalObj[i]; } return obj;}
2、ES6 的 Object.assign()
let newObj = Object.assign({}, obj);
3、ES6 的對象擴展
let newObj = {...obj};
深拷貝的實現方式
1、JSON.stringify 和 JSON.parse
用 JSON.stringify
把對象轉換成字符串,再用 JSON.parse
把字符串轉換成新的對象。
可以轉成 JSON 格式的對象才能使用這種方法,如果對象中包含 function 或 RegExp 這些就不能用這種方法了。
let newObj = JSON.parse(JSON.stringify(obj));
2、jquery 和 zepto
jquery 和 zepto 里的 $.extend
方法可以用作深拷貝。
var $ = require('jquery');var newObj = $.extend(true, {}, obj);
3、lodash
用 lodash 函數庫提供的 _.cloneDeep
方法實現深拷貝。
var _ = require('lodash');var newObj = _.cloneDeep(obj);
4. 自己封裝
deepClone = (obj) => { let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ // for...in 會把繼承的屬性一起遍歷 for(let key in obj){ // 判斷是不是自有屬性,而不是繼承屬性 if(obj.hasOwnProperty(key)){ //判斷ojb子元素是否為對象或數組,如果是,遞歸復制 if(obj[key]&&typeof obj[key] ==="object"){ objClone[key] = this.deepClone(obj[key]); }else{ //如果不是,簡單復制 objClone[key] = obj[key]; } } } } return objClone;}
參考:http://www.49028c.com/article/99013.htm
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答