拿捏javascript對象增刪改查應用及示例
什么是對象？
嘿！這還用問嗎？對象不就是“你的女朋友” 嘛！，或許你以為我在胡說，但事實上確實就是。
看完下面這個定義，你就知道我說的對不對了…
現(xiàn)實生活中：萬物皆對象，對象是一個具體的事物，看得見摸得著的實物。如，一本書、一輛汽車、一個人都可以是"對象”，一個數(shù)據(jù)庫、一張網(wǎng)頁、一個與遠程服務器的連接也可以是“對象”。
在 JavaScript 中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如字符串、數(shù)值、數(shù)組、函數(shù)等。
對象是由屬性和方法組成的。
- 屬性：事物的特征，在對象中用屬性來表示（常用名詞）
- 方法：事物的行為，在對象中用方法來表示（常用動詞）
為什么需要對象？
為什么需要“對象”？是為了化解你的孤獨與寂寞嘛，拜托老兄，不要那么膚淺好嘛！
找對象其他的不說，但她一定有一個作用：她能使你更加完整！
不信你看：
保存一個值時，可以使用變量，保存多個值（一組值）時，可以使用數(shù)組(對比python中的列表）。如果要保存一個人的完整信息呢？
例如，將“張三”的個人的信息保存在數(shù)組中的方式為：
var arr= [‘張三’，‘男’,168,154];
這樣確實存儲了數(shù)據(jù)，但你是不是感覺他還不太完整！你知道168,154分別是什么嗎？這時候對象的作用就體現(xiàn)出來了。
js 中的對象用{ }表示（對比python中的字典），表達結構更清晰，更強大。
var obj = {
name:'張三',
sex:'男',
height:168,
weight:154,
fun:function(){
console.log("我是張三！");
}
}
- 里面的屬性或者方法我們采取鍵值對的形式鍵屬性名：值屬性值
- 多個屬性或者方法中間用逗號隔開的。
- 方法冒號后面跟的是一個匿名函數(shù)。
創(chuàng)建對象的三種方式
利用對象字面量創(chuàng)建對象
**對象字面量：**就是花括號{}，里面包含了表達這個具體事務（對象）的屬性和方法。
var obj_1 = {}; //創(chuàng)建了一個空的對象
利用 new 關鍵字創(chuàng)建對象
var obj_2 = new Object(); //創(chuàng)建了一個空的對象
利用構造函數(shù)創(chuàng)建對象
為什么需要構造函數(shù)呢？
var zhang = {
name:'張三',
sex:'男',
height:168,
weight:154,
fun:function(){
console.log("我是張三！");
}
}
console.log(zhang);
var li = {
name:'李四',
sex:'男',
height:176,
weight:154,
fun:function(){
console.log("我是李四！");
}
}
console.log(li);
可以看到，我們用前面兩種創(chuàng)建方法對象，如果需要多一點且屬性和方法大都相同的對象時，這樣一個一個創(chuàng)建就顯得十分麻煩。
因此，我們可以利用函數(shù)的方法，重復這些相同的代碼，我們把這個函數(shù)就叫做構造函數(shù)。
構造函數(shù)：是一種特殊的函數(shù)，主要用來初始化 對象，即為對象成員變量賦初始值，它總與 new 運算符一起使用。我們可以把對象中一些公共的屬性和方法油取出來，然封裝到這個函數(shù)里面。
通俗的說：構造函數(shù)就是把我們對象里面的一些相同的屬性和方法抽象出來封裝到函數(shù)里面。
//構造函數(shù)的語法格式
function 構造函數(shù)名（）{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
this.屬性 = 值；
this.方法 = function () { }
}
new 構造函數(shù)名 ();function Star(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
var hg = new Star('胡歌',35,'男'); //調(diào)用函數(shù)返回的是一個對象
console.log(hg);
var ldh = new Star('劉德華',50,'男');
這樣創(chuàng)建對象就方便多了。
注：
- 1．構造函數(shù)名字首字母要大寫。
- 2．我們構造函數(shù)不需要 return 就可以返回結果。
- 3．我們調(diào)用構造函數(shù)必須使用new 。
- 4．我們只要 new Star (）調(diào)用函數(shù)就創(chuàng)建一個對象。
new關鍵字的執(zhí)行過程
new 在執(zhí)行時會做四件事情：
- 1．在內(nèi)存中創(chuàng)建一個新的空對象。
- 2．讓 this 指向這個新的對象。
- 3．執(zhí)行構造函數(shù)里面的代碼，給這個新對象添加屬性和方法。
- 4．返回這個新對象（所以構造函數(shù)里面不需要 return )。
對象屬性的增刪改查(和py的字典類似)
增
var obj_1 = {} //創(chuàng)建了一個空的對象
//添加屬性及值
obj_1.name = 'aniu';
obj_1.sex = '男';
console.log(obj_1);
刪
用關鍵字delete
var zhang = {
name:'張三',
sex:'男',
height:168,
weight:154,
fun:function(){
console.log("我是張三！");
}
}
delete zhang.weight; // 刪除對象的體重
console.log(zhang);
改
直接對屬性賦新值就可以
var li = {
name:'李四',
sex:'男',
height:176,
weight:154,
fun:function(){
console.log("我是李四！");
}
}
li.sex = '女'; // 修改對象的性別
console.log(li);
查
屬性：
console.log(li.name); //法一
console.log(li[‘sex’]); //法二
調(diào)用方法:
li.fun()
var li = {
name:'李四',
sex:'男',
height:176,
weight:154,
fun:function(){
console.log("我是李四！");
}
}
console.log(li.name); //法一
console.log(li['sex']); //法二
li.fun(); //調(diào)用方法
function Star(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.work = function(work){
console.log(work);
}
}
var hg = new Star('胡歌',35,'男'); //調(diào)用函數(shù)返回的是一個對象
hg.work("仙劍"); //調(diào)用方法
總之，這些crud操作和python中的字典十分的相似，很容易上手。
遍歷對象
var li = {
name:'李四',
sex:'男',
height:176,
weight:154,
}
console.log(li.name);
console.log(li.sex);
console.log(li.height);
console.log(li.weight);
像這樣輸出對象的屬性值很麻煩，因此可以用遍歷。
for … in 語句用于對數(shù)組或者對象的屬性進行循環(huán)操作
var li = {
name:'李四',
sex:'男',
height:176,
weight:154,
}
for (var k in li){
console.log(k); //k 變量 輸出得到的是屬性名
console.log(li[k]); // obj[k] 輸出得到的是屬性值
}
結語
對我而言，學過py, 5分鐘就掌握了，你學廢了嗎？
以上就是javascript對象的應用示例拿捏的詳細內(nèi)容，更多關于javascript對象應用的資料請關注腳本之家其它相關文章！
相關文章
xml轉json的js代碼，需要的朋友可以參考下2012-08-08
這篇文章主要介紹了在遇到數(shù)據(jù)或邏輯未成功更新問題時,如何通過刷新頁面、設置、清除緩存等方法進行解決,文中通過圖文將各種情況下清空緩存的方案介紹的非常詳細,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了有關js對字符串數(shù)組進行拼接的性能問題，字符串連接一直是js中性能最低的操作之一，應該如何解決呢？請參看本文的介紹2014-10-10
js 動態(tài)添加標簽（新增一行，其實很簡單，就是幾個函數(shù)的應用）
把所有代碼拷下另存為一個html文件，在瀏覽器中打開，點擊“新增一行”按鈕就可以,以下是對js函數(shù)的解釋2009-03-03
這篇文章主要介紹了在JS中刪除對象的某個屬性的幾種方案,分別是使用delete操作符、解構賦值、Object.fromEntries()、Reflect.deleteProperty()以及如何在集合對象中應用這些方法,需要的朋友可以參考下2025-03-03
JavaScript遍歷實現(xiàn)DFS算法和BFS算法
DFS(Depth?first?search)稱作「深度優(yōu)先遍歷」，BFS(Breadth?first?search)稱作「廣度優(yōu)先遍歷」。本文將通過JavaScript遍歷實現(xiàn)這兩種算法，需要的可以參考一下2023-01-01
TypeScript 安裝使用及基本數(shù)據(jù)類型
這篇文章主要介紹了TypeScript 安裝使用及基本數(shù)據(jù)類型,本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
能通過Array.prototype.slice轉換為真正的數(shù)組的帶有l(wèi)ength屬性的對象。2010-10-10
這篇文章主要介紹了JS全局變量和局部變量最新解析的相關知識，本文給給大家補充js刪除局部變量的代碼，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
這篇文章主要介紹了JSX在render函數(shù)中的應用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09