JavaScript 複製陣列和複製物件 以及對 深拷貝探討
前言
1. 引入
深度拷貝,大部分情況出在處理物件的情況中。
例如
因為直接賦值,是指標傳遞,這樣的話,使得兩個物件變數是相繫結的,修改其中一個,另外一個也跟著修改,大部分情況,我們只需要obj物件的值,而不需要傳遞obj物件給obj2,使得obj2是獨立的。
2. 概念
在js中,陣列和物件的複製如果使用=號來進行復制,那只是淺拷貝。如下圖演示:
1. 陣列的深拷貝
1.1. for 迴圈實現陣列的深拷貝
var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)
function copyArr(arr) {
let res = []
for (let i = 0; i < arr.length; i++) {
res.push(arr[i])
}
return res
}
1.2. slice 方法實現陣列的深拷貝
1.3. concat 方法實現陣列的深拷貝
1.4. ES6擴充套件運算子實現陣列的深拷貝
測試如下:
var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)
執行結果如下:
2. 物件的深拷貝
2.1. for迴圈實現物件的深拷貝
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
let res = {}
for (var key in obj) {
res[key] = obj[key]
}
return res
}
2.2. 轉換成json再轉換成物件實現物件的深拷貝
var obj = {
id: '1',
name: 'dai',
age: '18'
}
var obj2 = JSON.parse(JSON .stringify(obj))
執行結果如下:
2.3. ES6擴充套件運算子實現物件的深拷貝
var obj = {
id: '1',
name: 'dai',
age: '18'
}
var { ...obj2 } = obj
執行結果如下:
3. 結言
更多的陣列以及物件的操作方法,可以參考lodash的原始碼,檢視它的原始碼可以讓你的js基礎變得非常牢固。
使用es6提供的擴充套件運算子的方法實現深拷貝,簡單,高效。並且,物件的深拷貝不會像使用 JSON 方法深拷貝一樣,丟失函式等資訊,只能用來深拷貝 JSON 資料格式的物件。推薦大家使用。
相關推薦
JavaScript 複製陣列和複製物件 以及對 深拷貝探討
前言 1. 引入 深度拷貝,大部分情況出在處理物件的情況中。 例如 因為直接賦值,是指標傳遞,這樣的話,使得兩個物件變數是相繫結的,修改其中一個,另外一個也跟著修改,大部分情況,我們只需要obj物件的值,而不需要傳遞obj物件給obj2,使得ob
javascript之陣列和物件的資料結構轉換
最近學到物件和陣列的相關知識,將遇到的兩道較複雜的練習題貼出來 var scoreObject = { "Tony": { "Math": 95, "English": 79, "Music": 68 }, "S
JavaScript基礎函式和詞法分析以及常用的內建物件和使用方法(4)
day52 參考:https://www.cnblogs.com/liwenzhou/p/8004649.html 函式 函式定義 JavaScript中的函式和Python中的非常類似,只是定義方式有點區別。 function foo(a, b) { console.log("a:"
JAVA複製陣列和重置陣列大小
翻看印象筆記發現自己整理過arraycopy()這樣一個方法,碼字放到這裡: System.arraycopy()是一個靜態方法,用來實現重置陣列操作 陣列複製方法呼叫和引數列表: Syst
JavaScript中陣列和字串的方法以及互相轉換
陣列和字串之間相互轉換:Array和String之間轉換 字串轉陣列: var s=’nihao’;//s是一個字串 var ss = s.split(”);//ss是一個數組 陣列轉字串: var s = ss.join(”); var s = ss.toS
JavaScript 判斷陣列和物件
有時候,我們需要識別一個變數是陣列還是物件,例如進行深拷貝時。 這裡提供三種方法識別陣列還是物件。 1. Array.isArray() Array.isArray() 用於確定傳遞的值是否是一個Array。 2. constructor 陣列的建構函式是Arr
JavaScript的陣列和迴圈
1. 陣列: a) 宣告陣列:var 陣列名 = new Array(陣列大小); Var emp=new Array(“AA”,“BB”,“CC”); b) &
element vue Array陣列和Map物件的新增與刪除
使用場景: 一個後臺系統中, 管理員要配置自定義欄位後臺要生成id和title,其他角色要使用自定義欄位的表單, 新增資料, 但是每個要填寫的物件的id 和title都是無法固定的,因此頁面顯示的title 和id都需要自定義數字和map物件來實現,vue 的數值動態新增內容需要特定的方式: 1.定義一個
docker 複製映象和複製容器
複製映象和複製容器都是通過儲存為新映象而進行的。 具體為: 儲存映象 docker save ID > xxx.tar docker load < xxx.tar 儲存容器 docker export ID >xxx.tar docker import xxx.tar cont
深入javascript——建構函式和原型物件
常用的幾種物件建立模式 使用new關鍵字建立 最基礎的物件建立方式,無非就是和其他多數語言一樣說的一樣:沒物件,你new一個呀! var gf = new Object(); gf.name = "ta
DOM物件和js物件以及jQuery物件的區別
一、DOM物件 文件物件模型簡稱DOM,是W3C組織推薦的處理可擴充套件置標語言的標準程式設計介面。 DOM實際上是以面向物件方式描述的文件模型。DOM定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。 通過DOM,可以訪問所有的
Mybatis中#{}和${}的區別以及對sql注入、預編譯、jdbcType的說明
#{}和${}都可以獲取map中的值或者pojo物件屬性的值; sql語句示例: select * from tbl_employee where id=${id} and last_name=#{lastName} Preparing: select * from tbl_employee
javascript 整數型陣列和字元型陣列相互轉換
需求背景: 需要將 a = [1,2,3,4,5] 轉換成 a = ['1','2','3','4','5'](整數型陣列轉換成字元型沒找到直接的方法,思路就是先將陣列轉換成字串,然後再將字串轉換成陣列) 然後有的需求是需要將 ['1','2','3','4','5'] 轉換成
後臺接收Json請求引數相容陣列和單個物件
蘇格團隊 作者:宇你平安 背景 場景一:前後端對接介面,增刪改查,一開始請求的引數,基本是單條資料,json格式基本是{"key":"value"},產品後續擴充套件,傳參變成批量操作json格式為[xxx,xxx]或者[{"key":"value"}],此時後端修改
資料結構作業10—陣列和廣義表以及樹的基本概念(選擇題)
2-1已知廣義表L=((x,y,z),a,(u,t,w)),從L表中取出原子項t的運算是()。 (2分) A.head(tail(head(tail(tail(L))))) B.head(tail(head(tail(L)))) C.tail(head(head
html javascript全域性函式和Number物件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head
javascript中陣列和字串的方法比較
前面的話 字串和陣列有很多的相同之處,它們的方法眾多,且相似度很高;但它們又有不同之處,字串是不可變值,於是可以把其看作只讀的陣列。本文將對字串和陣列的類似方法進行比較 可索引 ECMAScript5定義了一種訪問字元的方法,使用方括號加數字索引來訪問字串中的特定字元 可索引的字串的最
OpenGL ES 3.0程式設計指南學習筆記 第6章 頂點屬性、頂點陣列和緩衝區物件
1)vec2等為float型,也就是著色語言預設為float操作。float,vec2,vec3,vec4 2)矩陣以列優先順序儲存,也就是說矩陣可以看做是由幾個列向量組成,例如;mat3 myMat3 = mat3(1.0, 0.0, 0.0,//First column
Java中的陣列和List集合以及型別強轉
在java中,集合操作有兩種方式——容器、陣列; 容器相比較於陣列,多了可擴充套件性,這裡僅以容器的代表List,來對比和陣列的關係。 都知道在java引入的泛型和自動拆裝箱等語法糖後,集合操作也變得簡單安全。 也都知道其實泛型在到位元組碼層面
JSON陣列和JSON物件在vue中的獲取
這兩天在學習vue,主要是為了實現前後端的分離,因此資料的傳輸是必不可少的一個環節。 為了快速入門,參考了vue官網的視訊,這個過程由於引入vue.js的問題走了一些彎路,這個我們以後再來探討,因為現在主要講的是JSON陣列和JSON物件。 在這個截圖中(截了好幾次才完美