關於js基礎知識的一些整理 陣列拷貝

2022-06-27 06:51:13 字數 2372 閱讀 3917

一.陣列淺拷貝(2023年8月10號)

方法一:

array.prototype.slice()               array.prototype.concat()

這兩種方法都可以返回乙個新的陣列

let user  = [,   ];

let user1 = [,];

let user2 =user.concat(user1);

user1[0]["age"] = 25;

console.log(user);

//[,]

console.log(user1); //

[,]console.log(user2); //

[,,,]

view code

方法二:拓展運算子(...)

語法:var cloneobj = ;擴充套件運算子也是淺拷貝,對於值是物件的屬性無法完全拷貝成2個不同物件,但是如果屬性都是基本型別的值的話,使用擴充套件運算子也是優勢方便的地方

let user = };

let leo =;

leo.name = "leo1";

leo.skill.css = 90;

console.log(leo.name);

//"leo1" ⚠️ 差異!

console.log(user.name); //

"leo" ⚠️ 差異!

console.log(leo.skill.css); //

90console.log(user.skill.css);//

90

上面注意差異存在的地方

手寫淺拷貝

實現原理:新的物件複製已有物件中非物件屬性的值和物件屬性的「引用」,也就是說物件屬性並不複製到記憶體。

function

cloneshallow(source) ;

for (let key in

source)

}return

target;

}

for...in語句以任意順序遍歷乙個物件自有的、繼承的、可列舉的、非symbol的屬性。對於每個不同的屬性,語句都會被執行。

該函式返回值為布林值,所有繼承了 object 的物件都會繼承到hasownproperty方法,和in運算子不同,該函式會忽略掉那些從原型鏈上繼承到的屬性和自身屬性。語法:obj.hasownproperty(prop)prop是要檢測的屬性「字串名稱」或者symbol

1. json.parse(json.stringify())

其原理是把乙個物件序列化成為乙個json字串,將物件的內容轉換成字串的形式再儲存在磁碟上,再用json.parse()反序列化將json字串變成乙個新的物件。

2.手寫深拷貝

核心思想是「遞迴」,遍歷物件、陣列直到裡邊都是基本資料型別,然後再去複製,就是深度拷貝。實現**:

const isobject = obj => typeof obj === 'object' && obj != null

;function

clonedeep(source) ;

for(var key in

source) else}}

return

target;

}

簡潔版本

function

copy (obj)

for (let i in

obj)

} else

return

newobj

}

總結:「淺拷貝」:將物件的每個屬性進行依次複製,但是當物件的屬性值是引用型別時,實質複製的是其引用,當引用指向的值改變時也會跟著變化。

「深拷貝」:複製變數值,對於引用資料,則遞迴至基本型別後,再複製。深拷貝後的物件「與原來的物件完全隔離」,互不影響,對乙個物件的修改並不會影響另乙個物件。

「深拷貝和淺拷貝是針對複雜資料型別來說的,淺拷貝只拷貝一層,而深拷貝是層層拷貝。」

更多詳細內容  檢視文章:前端自測清單

js 一些基礎知識

資料型別 作用域 每個函式都有自己的執行環境,執行環境定義了變數有權訪問的其他資料,決定了他們各自的行為。每個執行環境都有乙個與之關聯的變數物件 variable object 環境中定義的所有變數或函式都儲存在這個物件中。當 在乙個環境中執行時,會建立變數物件的作用域鏈 js沒有塊級作用域 函式宣...

CSS一些基礎知識整理

一 關於權值 標籤選擇器 1 類選擇器 10 id選擇器 100 繼承的權值 0.1 文字樣式若被多次設定,則顯示權值最高的設定樣式 例子 p 權值為1 p span 權值為1 1 2 warning 權值為10 p span.warning 權值為1 1 10 12 footer note p 權...

關於js的一些基礎知識點

1.js的資料型別 number,string,boolean,null,undefine,object.3.js的彈框有3種 alert msg 只能作為資訊的提示框表現 confirm msg 資訊提示再做操作,確認or取消 prompt msg,text 顯示可以提示使用者進行輸入的對話方塊。...