拿捏javascript對象增刪改查應(yīng)用及示例
什么是對象？
嘿！這還用問嗎？對象不就是“你的女朋友” 嘛！，或許你以為我在胡說，但事實上確實就是。
看完下面這個定義，你就知道我說的對不對了…
現(xiàn)實生活中：萬物皆對象，對象是一個具體的事物，看得見摸得著的實物。如，一本書、一輛汽車、一個人都可以是"對象”，一個數(shù)據(jù)庫、一張網(wǎng)頁、一個與遠程服務(wù)器的連接也可以是“對象”。
在 JavaScript 中，對象是一組無序的相關(guān)屬性和方法的集合，所有的事物都是對象，例如字符串、數(shù)值、數(shù)組、函數(shù)等。
對象是由屬性和方法組成的。
- 屬性：事物的特征，在對象中用屬性來表示（常用名詞）
- 方法：事物的行為，在對象中用方法來表示（常用動詞）
為什么需要對象？
為什么需要“對象”？是為了化解你的孤獨與寂寞嘛，拜托老兄，不要那么膚淺好嘛！
找對象其他的不說，但她一定有一個作用：她能使你更加完整！
不信你看：
保存一個值時，可以使用變量，保存多個值（一組值）時，可以使用數(shù)組(對比python中的列表）。如果要保存一個人的完整信息呢？
例如，將“張三”的個人的信息保存在數(shù)組中的方式為：
var arr= [‘張三’，‘男’,168,154];
這樣確實存儲了數(shù)據(jù)，但你是不是感覺他還不太完整！你知道168,154分別是什么嗎？這時候?qū)ο蟮淖饔镁腕w現(xiàn)出來了。
js 中的對象用{ }表示（對比python中的字典），表達結(jié)構(gòu)更清晰，更強大。
var obj = {
name:'張三',
sex:'男',
height:168,
weight:154,
fun:function(){
console.log("我是張三！");
}
}
- 里面的屬性或者方法我們采取鍵值對的形式鍵屬性名：值屬性值
- 多個屬性或者方法中間用逗號隔開的。
- 方法冒號后面跟的是一個匿名函數(shù)。
創(chuàng)建對象的三種方式
利用對象字面量創(chuàng)建對象
**對象字面量：**就是花括號{}，里面包含了表達這個具體事務(wù)（對象）的屬性和方法。
var obj_1 = {}; //創(chuàng)建了一個空的對象
利用 new 關(guān)鍵字創(chuàng)建對象
var obj_2 = new Object(); //創(chuàng)建了一個空的對象
利用構(gòu)造函數(shù)創(chuàng)建對象
為什么需要構(gòu)造函數(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ù)的方法，重復(fù)這些相同的代碼，我們把這個函數(shù)就叫做構(gòu)造函數(shù)。
構(gòu)造函數(shù)：是一種特殊的函數(shù)，主要用來初始化 對象，即為對象成員變量賦初始值，它總與 new 運算符一起使用。我們可以把對象中一些公共的屬性和方法油取出來，然封裝到這個函數(shù)里面。
通俗的說：構(gòu)造函數(shù)就是把我們對象里面的一些相同的屬性和方法抽象出來封裝到函數(shù)里面。
//構(gòu)造函數(shù)的語法格式
function 構(gòu)造函數(shù)名（）{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
this.屬性 = 值；
this.方法 = function () { }
}
new 構(gòu)造函數(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．構(gòu)造函數(shù)名字首字母要大寫。
- 2．我們構(gòu)造函數(shù)不需要 return 就可以返回結(jié)果。
- 3．我們調(diào)用構(gòu)造函數(shù)必須使用new 。
- 4．我們只要 new Star (）調(diào)用函數(shù)就創(chuàng)建一個對象。
new關(guān)鍵字的執(zhí)行過程
new 在執(zhí)行時會做四件事情：
- 1．在內(nèi)存中創(chuàng)建一個新的空對象。
- 2．讓 this 指向這個新的對象。
- 3．執(zhí)行構(gòu)造函數(shù)里面的代碼，給這個新對象添加屬性和方法。
- 4．返回這個新對象（所以構(gòu)造函數(shù)里面不需要 return )。
對象屬性的增刪改查(和py的字典類似)
增
var obj_1 = {} //創(chuàng)建了一個空的對象
//添加屬性及值
obj_1.name = 'aniu';
obj_1.sex = '男';
console.log(obj_1);
刪
用關(guān)鍵字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] 輸出得到的是屬性值
}
結(jié)語
對我而言，學(xué)過py, 5分鐘就掌握了，你學(xué)廢了嗎？
以上就是javascript對象的應(yīng)用示例拿捏的詳細內(nèi)容，更多關(guān)于javascript對象應(yīng)用的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文通過實例代碼給大家介紹了使用微信小程序開發(fā)彈出框功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
今天小編就為大家分享一篇layer.open 按鈕的點擊事件關(guān)閉方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS異步加載進度條 的相關(guān)資料,需要的朋友可以參考下2016-05-05
JS讀秒，在某些情況下還是比較實用的，下面有個簡單的示例，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家介紹了Leaflet 基礎(chǔ)入門教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
圖形顯示特效鼠標驅(qū)動圖片變化隨機顯示banner圖片隨意移動圖片定期消失字符連續(xù)消隱文字不停變色JavaScript容錯...圖片循環(huán)顯現(xiàn)QQ菜單生成器圖形顯示特效連續(xù)滾動的圖片圖片水中倒影純JavaScript時鐘圖片翻滾導(dǎo)航星星滿天閃爍左側(cè)的極酷...2008-04-04
接上一文，我們已經(jīng)實現(xiàn)了圖片的自動淡入淡出播放。接下來需要加入控制器。2010-10-10
代碼塊高亮可復(fù)制顯示js插件highlight.js+clipboard.js整合
最近有個需求是將jsp頁面上的某一段代碼塊格式化成類似CSDN的代碼塊的樣式，而且很多平臺都使用了這樣的功能，下面就為大家簡單分享一下2021-02-02
柱形圖是圖表中常見的一種，這篇文章主要介紹了d3繪制基本的柱形圖的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了JS實現(xiàn)淡藍色簡潔豎向Tab點擊切換效果,通過JavaScript相應(yīng)鼠標事件實現(xiàn)非常簡單的css樣式切換,簡單實用,需要的朋友可以參考下2015-10-10