作為一名 JavaScript 開發(fā)人員，您可能意識到我們無法在不處理對象的情況下構(gòu)建任何大型應(yīng)用程序。
在 JavaScript 中，一切都是對象。
讓我們深入了解 JavaScript 對象。
對象：JavaScript 中的對象只不過是一種非原始類型的數(shù)據(jù)結(jié)構(gòu)。 我們可以使用花括號定義一個對象，并在其中放置用逗號分隔的鍵值對。
例如：
const user = { name:”Hemendra”, nickname:”Hemu”, email:”hi@aamchora.space”, city:”bhilwara”}
對對象的 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:”hi@aamchora.space”, city:”bhilwara”}
讀
我們用 。 運算符來訪問對象的值。
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.
user[“name”]; // to access the “Hemendra”.user[“city”]; // to access the “bhilwara”.
更新
更新一個對象。
student.age = 21; // now age is changed from 25 to 21
刪除
從對象中刪除鍵。
delete student.name; // to delete the name key from student object
其他有用的方法
僅從對象打印鍵。
const user = { username:”aamchora”, email:”hi@aamchora.space”,};Object.keys(user);/* Above expression returns an array containing keys only from an object [“username”, “email”]*/
僅從對象打印值。
const user = { username:”aamchora”, email:”hi@aamchora.space”,};Object.values(user);/* Above expression returns an array containing values only from an object [“aamchora”, “hi@aamchora.space”]*/
克隆對象
您不能像復(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) 來克隆一個對象。
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 }
淺拷貝
對象的淺拷貝是一種拷貝，其屬性與創(chuàng)建拷貝的源對象共享相同的引用（指向相同的底層值）。
注意：對于淺拷貝，我們使用 Object.assign(targetObject, sourceObject)。
看下面的例子來理解淺拷貝。
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
深拷貝
對象的深層副本是一個副本，其屬性不共享與創(chuàng)建副本的源對象相同的引用（指向相同的基礎(chǔ)值）。
注意：對于深拷貝，我們使用 JSON.parse(JSON.stringify(sourceObject))。
看下面的例子來理解深拷貝。
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)站源碼資源！
