>[danger] 數組/對象 -> 深拷貝/淺拷貝
*****
參考:
1. 淺拷貝, 例如:
```
var arr = [1, 2, 3, 4];
var brr = arr;
brr.push(5);
console.log(arr); // 結果: [1, 2, 3, 4, 5]
// 思考: 為什么往brr數組末尾插入元素5, arr數組也跟著改變了呢?
```
> 總結: 淺拷貝: 無論arr還是brr操作數組, 都會對, 對方產生影響
淺拷貝->影子.互相影響

2. 深拷貝, 例如:
```
var arr = [1, 2, 3, 4];
var brr = new Array();
arr.map(item => {
brr.push(item);
})
brr.push(5);
console.log(arr); // 結果: [1, 2, 3, 4]
// 思考: 為什么這次brr沒有影響arr呢?
```
> 總結:, 因為brr逐級拷貝, arr的值到自己的內存中, 擺脫原來數組/對象帶來的影響
深拷貝->克隆人關系, 互不影響

*****
擴展: 項目中數組/對象常用深克隆方式
```
function deepClone(obj){
// 判斷參數是數組還是對象, 準備一個空的
let objClone = Array.isArray(obj) ? [] : {};
// 非空, 并且是對象 (array或者object的typeof都是object)
if(obj && typeof obj === "object"){
// 遍歷數組/對象
for(key in obj){
// 判斷是否是當前對象的屬性(防止復制原型鏈上的對象)
if(obj.hasOwnProperty(key)){
//判斷obj子元素是否為對象,如果是,遞歸復制
if(obj[key] && typeof obj[key] === "object"){
objClone[key] = deepClone(obj[key]);
} else {
//如果不是,簡單復制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
```
*****
思考: 當數組里保存的是對象, 改變對象的值, 會不會影響數組里的對象, 舉例:
```
var arr = [
{
"name": "李東旭",
"age": 20
}
];
for (var i = 0; i < arr.length; i++){
arr[i]['name'] = "程序員";
}
console.log(arr); // 結果 里面的對象的name變成了"程序員"
```
*****
答案: 這里是淺復制, 可以影響arr數組里的對象
- web前端
- CSS問題
- 布局
- 雙飛翼布局_flex方式
- 雙飛翼布局_margin方式
- 圣杯布局_flex方式
- 圣杯布局_margin方式
- 子元素居中問題
- 彈性布局
- 概念_
- 標準模式與混雜模式
- 各種FC
- line-height
- vertical-align
- CSS3新特性
- 效果
- div添加箭頭
- CSS繪制三角形
- JavaScript
- 兼容
- 事件相關
- 原理
- Ajax原理
- 繼承原理
- 原型鏈繼承
- 組合繼承
- 寄生組合繼承
- 數據綁定
- 1單向數據綁定m到c到v
- 2偽雙向數據綁定
- 3雙向數據綁定
- socket.io
- 運行時
- this指向
- 0.1+0.2問題
- 對象/數組-深拷貝&淺拷貝
- 事件循環
- typeof
- instanceof
- 概念
- 閉包
- 回調函數
- Promise
- 原生對象
- Attribute和property區別
- 防抖函數
- 節流函數
- 語言類型
- Vue
- Vue優缺點
- 仿Vue源碼
- 1數據綁定_Observe
- 2數據綁定_訂閱者&觀察者定義
- 3數據綁定_Vue類實現
- 4數據綁定_Vue訪問data更改
- 5DOM編譯_Compile_雙大括號模板講解
- 6DOM編譯_v-model講解
- 7DOM編譯_v-on:事件綁定講解
- 項目總結
- 使用Svg圖標
- vueCli環境_真機測試
- vueCli集成環信SDK
- 父子組件雙向綁定
- React
- React優缺點
- 我的組件庫
- Vue的組件庫
- 環信_聊天組件
- 面試題
- HTML_分類
- CSS_分類
- JavaScript_分類
- VueJS_分類
- ReactJS_分類
- AngularJS_分類
- 瀏覽器端
- 筆試題
- CSS
- 特殊布局
- JavaScript_
- 經典_宏任務_微任務
- 瀏覽器問題
- CORS
- web服務器
- Apache
- 開啟跨域
- Nginx
- 常用命令
- 正向代理
- 反向代理
- 負載均衡
- mac安裝Nginx
- 配置80端口
- 算法
- 冒泡排序
- 選擇排序
- 合并對象_排序
- 楊輝三角
- 紅黑樹
- 計算機基礎
- 網絡相關
- OSI七層模型
- http協議
- http工作原理
- https協議
- GET和POST區別
- hosts文件
- php相關
- session機制
- Linux
- 阿里云服務器
- linux使用Mysql
- 安裝mysql
- 導入.sql文件
- 遠程連接mysql
- linux使用xampp
- 安裝Xampp
- 配置web訪問
- 域名綁定服務器
- linux搭建git服務器_apache下
- 代碼管理
- 什么是git
- 命令行_使用git
- .gitignore文件講解
- 軟件
- VSCode的安裝
- 理財
- 基金
- 攝影