JavaScript怎么定義對象和數(shù)組

這篇文章主要介紹“JavaScript怎么定義對象和數(shù)組”，在日常操作中，相信很多人在JavaScript怎么定義對象和數(shù)組問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript怎么定義對象和數(shù)組”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

　　一、簡化代碼

　　JavaScript定義對象和數(shù)組非常簡單，我們想要創(chuàng)建一個對象，一般是這樣寫的：？ ?

　　var car = new Object（）;

　　car.colour = 'red';

　　car.wheels = 4;

　　car.hubcaps = 'spinning';

　　car.age = 4;

　　下面的寫法可以達(dá)到同樣的效果：

　　var car = {

　　colour:'red',

　　wheels:4,

　　hubcaps:'spinning',

　　age:4

　　}

　　后面的寫法要短得多，而且你不需要重復(fù)寫對象名稱。

　　另外對于數(shù)組同樣有簡潔的寫法，過去我們聲明數(shù)組是這樣寫的：

　　var moviesThatNeedBetterWriters = new Array（

　　'Transformers','Transformers2','Avatar','Indiana Jones 4'

　?。?

　　更簡潔的寫法是：

　　var moviesThatNeedBetterWriters = [

　　'Transformers','Transformers2','Avatar','Indiana Jones 4'

　　];

　　對于數(shù)組，還有關(guān)聯(lián)數(shù)組這樣一個特別的東西。 你會發(fā)現(xiàn)很多代碼是這樣定義對象的：

　　var car = new Array（）;

　　car['colour'] = 'red';

　　car['wheels'] = 4;

　　car['hubcaps'] = 'spinning';

　　car['age'] = 4;

　　這太瘋狂了，不要覺得困惑，“關(guān)聯(lián)數(shù)組”只是對象的一個別名而已。

　　另外一個簡化代碼的方法是使用三元運算符，舉個例子：

　　var direction;

　　if（x < 200）{

　　direction = 1;

　　} else {

　　direction = -1;

　　}

　　我們可以使用如下的代碼替換這種寫法：

　　var direction = x < 200 ? 1 : -1;

　　二、使用JSON作為數(shù)據(jù)格式

　　偉大的Douglas Crockford發(fā)明了JSON數(shù)據(jù)格式來存儲數(shù)據(jù)，你可以使用原生的javascript方法來存儲復(fù)雜的數(shù)據(jù)而不需要進(jìn)行任何額外的轉(zhuǎn)換，例如：

　　var band = {

　　"name":"The Red Hot Chili Peppers",

　　"members":[

　　{

　　"name":"Anthony Kiedis",

　　"role":"lead vocals"

　　},

　　{

　　"name":"Michael 'Flea' Balzary",

　　"role":"bass guitar, trumpet, backing vocals"

　　},

　　{

　　"name":"Chad Smith",

　　"role":"drums,percussion"

　　},

　　{

　　"name":"John Frusciante",

　　"role":"Lead Guitar"

　　}

　　],

　　"year":"2009"

　　}

　　你可以使用在JavaScript中直接使用JSON，甚至作為API返回的一種格式，在許多的API中被應(yīng)用，例如：

　　<div id="delicious"></div><script>

　　function delicious（o）{

　　var out = '<ul>';

　　for（var i=0;i<o.length;i++）{

　　out += '<li><a href="' + o[i].u + '">' +

　　o[i].d + '</a></li>';

　　}

　　out += '</ul>';

　　document.getElementById（'delicious'）。innerHTML = out;

　　}

　　</script>

　　<script src=" callback=delicious"></script>

　　這里調(diào)用delicious 的Web服務(wù)獲取最新書簽，以JSON格式返回，然后將它們顯示成無序列表的形式。

　　從本質(zhì)上講，JSON是用于描述復(fù)雜的數(shù)據(jù)最輕量級的方式，而且直接它運行在瀏覽器中。 你甚至可以在PHP中調(diào)用 json_decode（）函數(shù)來使用它。

　　三、盡量使用JavaScript原生函數(shù)

　　要找一組數(shù)字中的最大數(shù)，我們可能會寫一個循環(huán)，例如：

　　var numbers = [3,342,23,22,124];

　　var max = 0;

　　for（var i=0;i<numbers.length;i++）{

　　if（numbers[i] > max）{

　　max = numbers[i];

　　}

　　}

　　alert（max）;

　　其實，不用循環(huán)可以實現(xiàn)同樣的功能：

　　var numbers = [3,342,23,22,124];

　　numbers.sort（function（a,b）{return b - a}）;

　　alert（numbers[0]）;

　　而最簡潔的寫法是：

　　Math.max（12,123,3,2,433,4）; // returns 433

　　你甚至可以使用Math.max來檢測瀏覽器支持哪個屬性：

　　var scrollTop= Math.max（

　　doc.documentElement.scrollTop,

　　doc.body.scrollTop

　?。?

　　如果你想給一個元素增加class樣式，可能原始的寫法是這樣的：

　　function addclass（elm,newclass）{

　　var c = elm.className;

　　elm.className = （c === ''） ? newclass : c+' '+newclass;

　　而更優(yōu)雅的寫法是：

　　function addclass（elm,newclass）{

　　var classes = elm.className.split（' '）;

　　classes.push（newclass）;

　　elm.className = classes.join（' '）;

　　}

　　四、事件委托

　　事件是JavaScript非常重要的一部分。我們想給一個列表中的鏈接綁定點擊事件，一般的做法是寫一個循環(huán)，給每個鏈接對象綁定事件，HTML代碼如下：

　　<h3>Great Web resources</h3>

　　<ul id="resources">

　　<li><a href="">Opera Web Standards Curriculum</a></li>

　　<li><a href="">Sitepoint</a></li>

　　<li><a href="">A List Apart</a></li>

　　<li><a href="">YUI Blog</a></li>

　　<li><a href="">Blame it on the voices</a></li>

　　<li><a href="">Oddly specific</a></li>

　　</ul>

　　腳本如下：

　　// Classic event handling example

　?。╢unction（）{

　　var resources = document.getElementById（'resources'）;

　　var links = resources.getElementsByTagName（'a'）;

　　var all = links.length;

　　for（var i=0;i<all;i++）{

　　// Attach a listener to each link

　　links[i].addEventListener（'click',handler,false）;

　　};

　　function handler（e）{

　　var x = e.target; // Get the link that was clicked

　　alert（x）;

　　e.preventDefault（）;

　　};

　　}）（）;

　　更合理的寫法是只給列表的父對象綁定事件，代碼如下：

　?。╢unction（）{

　　var resources = document.getElementById（'resources'）;

　　resources.addEventListener（'click',handler,false）;

　　function handler（e）{

　　var x = e.target; // get the link tha

　　if（x.nodeName.toLowerCase（） === 'a'）{

　　alert（'Event delegation:' + x）;

　　e.preventDefault（）;

　　}

　　};

　　}）（）;

　　五、匿名函數(shù)

　　關(guān)于JavaScript的最頭疼的事情之一是，它的變量沒有特定的作用范圍。 一般情況下，任何變量，函數(shù)，數(shù)組或?qū)ο蠖际侨中?，這意味著在同一頁上的其他腳本可以訪問并覆蓋它們。解決方法是把變量封裝在一個匿名函數(shù)中。 例如，下面的定義將產(chǎn)生三個全局變量和和兩個全局函數(shù)：

　　var name = 'Chris';

　　var age = '34';

　　var status = 'single';

　　function createMember（）{

　　// [&hellip;]

　　}

　　function getMemberDetails（）{

　　// [&hellip;]

　　}

　　封裝后如下：

　　var myApplication = function（）{

　　var name = 'Chris';

　　var age = '34';

　　var status = 'single';

　　return{

　　createMember:function（）{

　　// [&hellip;]

　　},

　　getMemberDetails:function（）{

　　// [&hellip;]

　　}

　　}

　　}（）;

　　// myApplication.createMember（） and

　　// myApplication.getMemberDetails（） now works.

　　這被稱為單體模式，是JavaScript設(shè)計模式的一種，這種模式在YUI中用得非常多，改進(jìn)的寫法是： ?

　　var myApplication = function（）{

　　var name = 'Chris';

　　var age = '34';

　　var status = 'single';

　　function createMember（）{

　　// [&hellip;]

　　}

　　function getMemberDetails（）{

　　// [&hellip;]

　　}

　　return{

　　create:createMember,

　　get:getMemberDetails

　　}

　　}（）;

　　//myApplication.get（） and myApplication.create（） now work.

　　六、代碼可配置

　　你寫的代碼如果想讓別人更容易進(jìn)行使用或者修改，則需要可配置，解決方案是在你寫的腳本中增加一個配置對象。要點如下：

　　1、在你的腳本中新增一個叫configuration的對象。

　　2、在配置對象中存放所有其它人可能想要去改變的東西，例如CSS的ID、class名稱、語言等等。

　　3、返回這個對象，作為公共屬性以便其它人可以進(jìn)行重寫。

　　七、代碼兼容性

　　兼容性是初學(xué)者容易忽略的部分，通常學(xué)習(xí)Javascript的時候都是在某 個固定的瀏覽器中進(jìn)行測試，而這個瀏覽器很有可能就是IE，這是非常致命的，因為目前幾大主流瀏覽器中偏偏I(xiàn)E對標(biāo)準(zhǔn)的支持是最差的。最終用戶看到的結(jié)果 也許就是，你寫的代碼在某個瀏覽器無法正確運行。你應(yīng)該把你的代碼在主流的瀏覽器中都測試一下，這也許很費時間，但是應(yīng)該這樣做。

到此，關(guān)于“JavaScript怎么定義對象和數(shù)組”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>