亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

淺談js中對象的使用

 更新時間:2016年08月11日 09:13:30   投稿:jingxian  
下面小編就為大家?guī)硪黄獪\談js中對象的使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

簡單記錄javascript中對象的使用

一、創(chuàng)建對象

//創(chuàng)建一個空對象
  var o={};
  //創(chuàng)建一個含有兩個屬性的對象,x、y
  var o2={x:12,y:'12',name:'JS'};
  //此對象中的author屬性的值還是一個對象
  var o3={x:12,author:{name:'JS',age:23,address:'china'}};
  //創(chuàng)建一個空對象和{}一樣
  var o4=new Object();
  //給對象增加name屬性
  o4.name='JS'

上面使用了兩種方式創(chuàng)建對象,一種是字面量的方式,另一種是使用new創(chuàng)建對象,new后面的Object叫做構(gòu)造函數(shù)。

二、對象的訪問

從上面我們可以看到我們給對向o4增加了一個屬性name,使用的是點號的方式,即對象名.屬性名,這就是其中的一種訪問方式。訪問對象中的屬性值有兩種方式,第一種是使用點號(.),第二種是使用數(shù)組的方式(對象名[屬性名])。

//創(chuàng)建一個空對象
  var o={};
  //創(chuàng)建一個含有兩個屬性的對象,x、y
  var o2={x:12,y:'12',name:'JS'};
  //此對象中的author屬性的值還是一個對象
  var o3={x:12,author:{name:'JS',age:23,address:'china'}};
  //創(chuàng)建一個空對象和{}一樣
  var o4=new Object();
  //給對象增加name屬性
  o4.name='JS'
  /**訪問對象的屬性值
  */
  //1、使用點號的方式
  var x=o2.x;//12
  var authorOfName=o3.author.name;//JS
  var name=o4.name;//JS
  
  //2、使用數(shù)組的方式
  var x2=o2['x'];//12
  var authorOfName2=o3['author']['name'];//JS
  var name2=o4['name'];//JS

使用點號的方式來訪問對象中的屬性值比較好理解,但是使用數(shù)組的方式,不是太好理解,在javascript中,所有的對象都是關(guān)聯(lián)數(shù)組,所謂關(guān)聯(lián)數(shù)據(jù)就是這種方式看起來像是數(shù)組的訪問方式,只不過這種方式不是使用的索引而是字符串索引,為此叫做關(guān)聯(lián)數(shù)組。

上面訪問對象屬性值都是在知道對象屬性名的情況,如果不知道對象的屬性值呢?可以使用for/in循環(huán)遍歷對象中的值,

//創(chuàng)建一個含有兩個屬性的對象,x、y、name
  var o2={x:12,y:'12',name:'JS'};
  for(p in o2) {
    var property=p;
    var value=o2[p];
    console.log(property);
    console.log(value);
  }

打印結(jié)果為:

x
12
y
12
name
JS

可以看出一共有三個屬性,且都打印了其值。

假如對象比較復(fù)雜可以加入一些判斷,判斷是否存在一個屬性,那么如何判斷一個對象是否包含了某個屬性呢,由于對象都繼承了Object,在Object中有hasOwnProperty()方法,用來判斷對象中是否存在一個屬性,返回值是布爾類型(boolean),注意此方法只會判斷是否存在對象自己的屬性,不會判斷對象繼承的屬性。

//創(chuàng)建一個含有兩個屬性的對象,x、y、name
  var o2={x:12,y:'12',name:'JS'};
  var b=o2.hasOwnProperty('name')//true
  var b2=o2.hasOwnProperty('age')//false

三、新增、刪除屬性

在最開始我們給對象o4新增了一個name屬性,新增的方式其實和給屬性賦值是一樣的,還可以使用關(guān)聯(lián)數(shù)組的方式給對象增加屬性,

//創(chuàng)建一個含有兩個屬性的對象,x、y、name
  var o2={x:12,y:'12',name:'JS'};
  //刪除name屬性
  delete o2.name;
  var b=o2.hasOwnProperty('name')//false
  //新增name屬性
  o2['name']='javascript';
  //由于已經(jīng)存在了name屬性,這里是給name重新賦值
  o2.name='js';
  var b3=o2.hasOwnProperty('name');//true

上面,刪除了對象o2的name屬性,然后又使用關(guān)聯(lián)數(shù)組的方式新增了name屬性,接著使用點號的方式給name屬性重新賦值。

四、對象和字符串之間的轉(zhuǎn)化

在ECMAScript5中內(nèi)置了對象和字符串之間的相互轉(zhuǎn)化,現(xiàn)在大多數(shù)主流瀏覽器都支持ECMAScript5,如果不支持可以從網(wǎng)上下載json2.js類庫,把此類庫引入到文件中便可以使用。

對象和字符串之間的轉(zhuǎn)化叫做對象序列化,即將對象的狀態(tài)轉(zhuǎn)化為字符串或者將字符串轉(zhuǎn)化為對象,這些轉(zhuǎn)化都使用JSON作為數(shù)據(jù)交換格式,JSON的全稱是JavaScript Object Notation。

把對象轉(zhuǎn)化為字符串使用JSON.stringify();把字符串轉(zhuǎn)化為對象使用JSON.parse(),

//定義一個對象
  var o={name:'JavaScript',age:24};
  //此種方式在轉(zhuǎn)化為對象是報錯,必須使用下面的方式
  //var str="{name:'JavaScript',age:24}";
  //正確的定義對象字符串
  var str='{"name":"JavaScript","age":24}';
  //把對象轉(zhuǎn)化為字符串
  var str2=JSON.stringify(o);
  console.log('str2:'+str2+',類型:'+(typeof str2));//str2:{"name":"JavaScript","age":24},類型:string
  //把字符串轉(zhuǎn)化為對象
  var o2=JSON.parse(str);
  console.log('o2:'+o2+',類型:'+(typeof o2));//o2:[object Object],類型:object

上面實現(xiàn)了對象和字符串之間的相互轉(zhuǎn)化。

以上這篇淺談js中對象的使用就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • ECharts柱狀圖過多添加滾動條的步驟(親測可用)

    ECharts柱狀圖過多添加滾動條的步驟(親測可用)

    這篇文章主要介紹了ECharts柱狀圖過多添加滾動條的步驟(親測可用),添加echarts柱狀圖滾動條,首先添加js用來判斷當(dāng)前視圖要顯示幾個及是否顯示滾動條,本文結(jié)合實例代碼介紹的非常詳細(xì),需要的朋友參考下吧
    2024-01-01
  • 微信小程序--獲取用戶地理位置名稱(無須用戶授權(quán))的方法

    微信小程序--獲取用戶地理位置名稱(無須用戶授權(quán))的方法

    這篇文章主要介紹了微信小程序-獲取用戶地理位置名稱(無須用戶授權(quán))的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • JavaScript關(guān)聯(lián)數(shù)組用法分析【概念、定義、遍歷】

    JavaScript關(guān)聯(lián)數(shù)組用法分析【概念、定義、遍歷】

    這篇文章主要介紹了JavaScript關(guān)聯(lián)數(shù)組用法,結(jié)合實例形式分析了關(guān)聯(lián)數(shù)組的概念、定義與遍歷操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2017-03-03
  • Object.defineproperty方法示例詳解

    Object.defineproperty方法示例詳解

    Object.defineproperty?的作用就是直接在一個對象上定義一個新屬性,或者修改一個已經(jīng)存在的屬性,這篇文章主要介紹了Object.defineproperty方法,需要的朋友可以參考下
    2022-12-12
  • 微信小程序自定義tabbar欄實現(xiàn)過程講解

    微信小程序自定義tabbar欄實現(xiàn)過程講解

    tabBar相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • Java 正則表達(dá)式學(xué)習(xí)總結(jié)和一些小例子

    Java 正則表達(dá)式學(xué)習(xí)總結(jié)和一些小例子

    字符串處理是許多程序中非常重要的一部分,它們可以用于文本顯示,數(shù)據(jù)表示,查找鍵和很多目的.在Unix下,用戶可以使用正則表達(dá)式的強(qiáng)健功能實現(xiàn)這些 目的
    2012-09-09
  • JavaScript實現(xiàn)離開頁面前提示功能【附j(luò)Query實現(xiàn)方法】

    JavaScript實現(xiàn)離開頁面前提示功能【附j(luò)Query實現(xiàn)方法】

    這篇文章主要介紹了JavaScript實現(xiàn)離開頁面前提示功能,結(jié)合具體實例形式分析了javascript實現(xiàn)針對關(guān)閉頁面的事件響應(yīng)原理與操作技巧,并附帶jQuery的相應(yīng)實現(xiàn)方法,需要的朋友可以參考下
    2017-09-09
  • 原生JS實現(xiàn)螢火蟲效果

    原生JS實現(xiàn)螢火蟲效果

    這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)螢火蟲效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • Bootstrap~多級導(dǎo)航(級聯(lián)導(dǎo)航)的實現(xiàn)效果【附代碼】

    Bootstrap~多級導(dǎo)航(級聯(lián)導(dǎo)航)的實現(xiàn)效果【附代碼】

    下面小編就為大家分享一篇Bootstrap~多級導(dǎo)航(級聯(lián)導(dǎo)航)的實現(xiàn)效果【附代碼】。小編覺得挺不錯。希望對大家有所幫助。一起跟隨小編過來看看吧
    2016-03-03
  • JS監(jiān)聽變量改變的實現(xiàn)

    JS監(jiān)聽變量改變的實現(xiàn)

    本文主要介紹了JS監(jiān)聽變量改變的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04

最新評論