作為一名 JavaScript 開(kāi)發(fā)人員，您可能意識(shí)到我們無(wú)法在不處理對(duì)象的情況下構(gòu)建任何大型應(yīng)用程序。
在 JavaScript 中，一切都是對(duì)象。
讓我們深入了解 JavaScript 對(duì)象。
對(duì)象：JavaScript 中的對(duì)象只不過(guò)是一種非原始類型的數(shù)據(jù)結(jié)構(gòu)。 我們可以使用花括號(hào)定義一個(gè)對(duì)象，并在其中放置用逗號(hào)分隔的鍵值對(duì)。
例如：
const user = { name:”Hemendra”, nickname:”Hemu”, email:”[email protected]”, city:”bhilwara”}
對(duì)對(duì)象的 CRUD 操作
創(chuàng)造
let student = {}; // an empty arraystudent.name = “Hemendra Khatik”; //important -> student[“name”]=”Hemendra Khatik” is also validstudent.branch = “CSE”;student.age = 25;console.log(student); // will print the below structure/*{ name:”Hemendra Khatik”, branch:”CSE”, age:25}*/
或一次所有鍵值
let user = { name:”Hemendra”, nickname:”Hemu”, email:”[email protected]”, city:”bhilwara”}
讀
我們用 。 運(yùn)算符來(lái)訪問(wèn)對(duì)象的值。
user.name; // to access the “Hemendra”.user.city; // to access the “bhilwara”.user.username; // will be undefined because it is not present in the user object.
我們還可以使用方括號(hào)訪問(wèn)對(duì)象的屬性。
user[“name”]; // to access the “Hemendra”.user[“city”]; // to access the “bhilwara”.
更新
更新一個(gè)對(duì)象。
student.age = 21; // now age is changed from 25 to 21
刪除
從對(duì)象中刪除鍵。
delete student.name; // to delete the name key from student object
其他有用的方法
僅從對(duì)象打印鍵。
const user = { username:”aamchora”, email:”[email protected]”,};Object.keys(user);/* Above expression returns an array containing keys only from an object [“username”, “email”]*/
僅從對(duì)象打印值。
const user = { username:”aamchora”, email:”[email protected]”,};Object.values(user);/* Above expression returns an array containing values only from an object [“aamchora”, “[email protected]”]*/
克隆對(duì)象
您不能像復(fù)制原始類型數(shù)據(jù)結(jié)構(gòu)一樣復(fù)制非原始類型數(shù)據(jù)結(jié)構(gòu)。
例如：非原始類型數(shù)據(jù)結(jié)構(gòu)。
let a = 10;let b = a;b= b + 1;console.log(a) // 10console.log(b) // 11
例如：原始類型數(shù)據(jù)結(jié)構(gòu)。
let obj = { a:10;};let obj2 = obj;obj2.a = 12;if(obj === obj2){ console.log(“obj and obj2 are same”);};// above condition will be true console.log(obj) // {a:12}console.log(obj2) // {a:12}
我們可以使用 Object.assign(targetObject, sourceObject) 來(lái)克隆一個(gè)對(duì)象。
const obj = { a: 1 };const obj2 = Object.assign({}, obj);obj2.a = 2;if(obj === obj2){ console.log(“obj and obj2 are same”);}else{ console.log(“obj and obj2 are different”);};// above condition will be false here console.log(obj); // { a: 1 }console.log(obj2); // { a: 2 }
淺拷貝
對(duì)象的淺拷貝是一種拷貝，其屬性與創(chuàng)建拷貝的源對(duì)象共享相同的引用（指向相同的底層值）。
注意：對(duì)于淺拷貝，我們使用 Object.assign(targetObject, sourceObject)。
看下面的例子來(lái)理解淺拷貝。
const obj = { a:1}const obj2 = { b:2, c:obj // here c’s value is a reference to the other object called obj}const copy = Object.assign({},obj2); // here obj2 is a source object // changing the copied object’s value copy.c.a = 1111;if(copy.c.a === obj.a){ console.log(“obj and obj2 are same”);}// above condition will be true
深拷貝
對(duì)象的深層副本是一個(gè)副本，其屬性不共享與創(chuàng)建副本的源對(duì)象相同的引用（指向相同的基礎(chǔ)值）。
注意：對(duì)于深拷貝，我們使用 JSON.parse(JSON.stringify(sourceObject))。
看下面的例子來(lái)理解深拷貝。
const obj = { a:1}const obj2 = { b:2, c:obj // here c’s value is a reference to the other object called obj}const copy = JSON.parse(JSON.stringify(obj2)) // here obj2 is a source object // changing the copied object’s value copy.c.a = 1111;if(copy.c.a === obj.a){ console.log(“obj and obj2 are same”);}else{ console.log(“obj and obj2 are not same”);}// above condition will be false
關(guān)注我以獲取更多此類博客文章。
關(guān)注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！
