深切JavaScript中深拷貝和淺拷貝

深拷貝和淺拷貝題目的實質照樣差別數據範例的存儲體式格局差別，尤其是援用數據範例的特別。

現分別對賦值、淺拷貝、深拷貝做深入研究：

1.賦值

道理：直接將對象指針直接賦值給另一個變量

代碼：

let developer = {
title: 'Frontend',
basic: {
html: '5',
css: '3',
js: 'es6'
},
frameworks: ['React', 'Vue', 'AngularJS'],
summary: function(){
console.log('I am FE developer');
}
};
let newDeveloper = developer;
console.log(newDeveloper);
//基礎範例：轉變原對象
newDeveloper.title = 'Frontend Leader';
console.log(developer.title); // Frontend Leader
//對象：轉變原對象
newDeveloper.basic.http = '2.0';
console.log(developer.basic.http); // 2.0
newDeveloper.basic.js = 'es5';
console.log(developer.basic.js); // es5
//數組：轉變原對象
newDeveloper.frameworks.push('Angular');
console.log(developer.frameworks); // [ 'React', 'Vue', 'AngularJS', 'Angular' ]
//函數：轉變原對象
newDeveloper.summary = function () {
console.log('I like FE development');
};
developer.summary(); // I like FE development


2.淺拷貝

道理：遍歷對象的每一個屬性舉行逐一拷貝

完成體式格局：

• 體式格局1:遍歷並複製
• 體式格局2:Object.assign()

代碼：

let developer = {
title: 'Frontend',
basic: {
html: '5',
css: '3',
js: 'es6'
},
frameworks: ['React', 'Vue', 'AngularJS'],
summary: function(){
console.log('I am FE developer');
}
};
/*
* 體式格局1：逐一複製
*
* */
function cloneInShallow(source) {
let target = {};
for (prop in source){
target[prop] = source[prop];
}
return target
}
let newDeveloper = cloneInShallow(developer);
/*
* 體式格局2：Object.assign()
*
* */
// let newDeveloper = Object.assign({}, developer);
console.log(newDeveloper);
//基礎範例：不轉變原對象
newDeveloper.title = 'Frontend Leader';
console.log(developer.title); // Frontend
// 對象：轉變原對象
newDeveloper.basic.http = '2.0';
console.log(developer.basic.http); // 2.0
newDeveloper.basic.js = 'es5';
console.log(developer.basic.js); // es5
//數組：轉變原對象
newDeveloper.frameworks.push('Angular');
console.log(developer.frameworks); // [ 'React', 'Vue', 'AngularJS', 'Angular' ]
//函數：不轉變原對象
newDeveloper.summary = function () {
console.log('I like FE development');
};
developer.summary(); // I am FE developer

3.深拷貝

道理：運用遞歸，遍歷每一個對象屬性舉行拷貝

完成體式格局：

• 體式格局1: 純手工打造回調函數
• 體式格局2: JSON.parse(JSON.stringify(obj))
• 體式格局3: 藉助jQuery
• 體式格局4: 藉助lodash

代碼：

let developer = {
title: 'Frontend',
basic: {
html: '5',
css: '3',
js: 'es6'
},
frameworks: ['React', 'Vue', 'AngularJS', {node: 'express'}],
summary: function(){
console.log('I am FE developer');
}
};
/*
* 體式格局1: 純手工打造
* */
function cloneInDeep(source) {
if(source && typeof source === 'object'){
let target = {};
for (let prop in source){
let value = source[prop];
if(Array.isArray(value)){
let newArray = [];
value.forEach(function (item, index) {
if(Array.isArray(item) || Object.getPrototypeOf(item) === Object.prototype){
newArray.push(cloneInDeep(item))
}else{
newArray.push(item)
}
});
target[prop] = newArray;
}else if(Object.getPrototypeOf(value) === Object.prototype){
target[prop] = cloneInDeep(value);
}else{
target[prop] = value;
}
}
return target
}else{
throw new Error('source is not object!')
}
}
let newDeveloper = cloneInDeep(developer);
/*
* 體式格局2: JSON.parse(JSON.stringify(obj))
* 弊病：會揚棄對象的constructor
* 實用：可以被json直接示意的數據結構，對象中只包括number、string、boolean、array、扁平對象
* 不實用：含有function、regexp
* */
// let newDeveloper = JSON.parse(JSON.stringify(developer));
/*
* 體式格局3: jQuery
* */
let $ = require('jquery');
// let newDeveloper = $.extend({}, developer);
/*
* 體式格局4: lodash
* */
let _ = require('lodash');
// let newDeveloper = _.cloneDeep(developer);
console.log(newDeveloper);
//基礎範例：不轉變原對象
newDeveloper.title = 'Frontend Leader';
console.log(developer.title); // Frontend
// 對象：不轉變原對象
newDeveloper.basic.http = '2.0';
console.log(developer.basic.http); // undefined
newDeveloper.basic.js = 'es5';
console.log(developer.basic.js); // es6
//數組：不轉變原對象
newDeveloper.frameworks.push('Angular');
console.log(developer.frameworks); // [ 'React', 'Vue', 'AngularJS' , { node: 'express' } ]
newDeveloper.frameworks[3].node = 'koa';
console.log(developer.frameworks); // [ 'React', 'Vue', 'AngularJS' , { node: 'express' } ]
//函數：不轉變原對象
newDeveloper.summary = function () {
console.log('I like FE development');
};
developer.summary(); // I am FE developer

觸及的知識點：

• 數據範例及存儲機制
• for&＃8230;in&＃8230;遍歷，羅列屬性
• 遞歸
• 對象和數組的推斷