JS使用技巧專題

1開發技巧

1.1函數使用

1.1.1函數聲明方式

JS函數的寫法總結

http://blog.csdn.net/firesnake666/article/details/5855128

js函數的幾種寫法

http://blog.csdn.net/gufeng672/article/details/9961221

JS中聲明函數大體上有三種方法：

1.常規方法

JScript codefunction funcName(var1,var2....){ //add you code here }

2.匿名函數引用法（找不到具體的稱呼，暫且先這么叫）

JScript code varfuncName=function(var1,var2...){ //add you code here }

3.構造函數法

JScript code varfuncName=new Function("x","y","alert(x+y);");

3中方法對函數的執行沒有區別只是語法上和函數初始化的時候有些區別,通過如下實驗

可以看出他們的區別

JScript codealert(fn1); alert(fn2); alert(fn3); function fn1(){ alert("fn1"); }var fn2=function(){ alert("fn2"); } var fn3=new Function("alert('fn3');");fn1(); fn2(); fn3();

可以看到只有fn1被輸出了函數體代碼，其他兩個都是undefined。因為JS的執行分為兩個階段

預處理階段和執行階段,預處理階段會對代碼進行掃描分析并初始化變量表。通過第一種方法

聲明的函數在預處理階段就會被初始化,而其他兩種只有在執行階段執行到相應行是才會被初始化.

1.2對象使用

1.2.1定義對象（對象創建）

JavaScript中沒有類的概念，只有對象。在JavaScript中定義對象可以采用以下幾種方式：

1.基于已有對象擴充其屬性和方法

2.工廠方式

3.構造函數方式

4.原型(“prototype”)方式

5.動態原型方式

1.2.1.1 一.基于已有對象擴充其屬性和方法

varobject =newObject();

object.name = "zhangsan";

object.sayName =function(name)

{

? ? this.name = name;

? ? alert(this.name);

}

object.sayName("lisi");

? ? 這種方式的弊端：這種對象的可復用性不強，如果需要使用多個對象，還需要重新擴展其屬性和方法。

1.2.1.2?二.工廠方法方式

functioncreateObject()

{

? ? varobject =newObject();

? ? object.username = "zhangsan";

? ? object.password = "123";

? ? object.get =function()

? ? {

? ? ? ? alert(this.username + ", " +this.password);

? ? }

? ? return object;

}

varobject1 = createObject();

varobject2 = createObject();

object1.get();

改進一：采用帶參數的構造方法：

functioncreateObject(username, password)

{

? ? varobject =newObject();

? ? object.username = username;

? ? object.password = password;

? ? object.get =function()

? ? {

? ? ? ? alert(this.username + ", " +this.password);

? ? }

? ? return object;

}

var object1 = createObject("zhangsan","123");

object1.get();

改進二：讓多個對象共享函數對象

這樣，不用每個對象都生成一個函數對象。

functionget()

{

? ? alert(this.username + ", " +this.password);

}

//函數對象只有一份

functioncreateObject(username, password)

{

? ? varobject =newObject();

? ? object.username = username;

? ? object.password = password;

? ? object.get =get;//每一個對象的函數對象都指向同一個函數對象

? ? return object;

}

var object = createObject("zhangsan","123");

var object2 = createObject("lisi","456");

object.get();

object2.get();

優點：讓一個函數對象被多個對象所共享，而不是每一個對象擁有一個函數對象。

缺點：對象和它的方法定義分開了，可能會造成誤解和誤用。

1.2.1.3?三.構造函數方式

構造函數的定義方法其實和普通的自定義函數相同。

functionPerson()

{

? ? //在執行第一行代碼前，js引擎會為我們生成一個對象

? ? this.username = "zhangsan";

? ? this.password = "123";

? ? this.getInfo =function()

? ? {

? ? ? ? alert(this.username + ", " +this.password);

? ? }

? ? //此處有一個隱藏的return語句，用于將之前生成的對象返回

? ? //只有在后面用new的情況下，才會出現注釋所述的這兩點情況

}

//生成對象

varperson =newPerson();//用了new

person.getInfo();

改進版：加上參數：

functionPerson(username, password)

{

? ? this.username = username;

? ? this.password = password;

? ? this.getInfo =function()

? ? {

? ? ? ? alert(this.username + ", " +this.password);

? ? }

}

varperson =newPerson("zhangsan", "123");

person.getInfo();

1.2.1.4 四.原型(“prototype”)方式

例子：

functionPerson()

{

}

Person.prototype.username = "zhangsan";

Person.prototype.password = "123";

Person.prototype.getInfo =function()

{

? ? alert(this.username + ", " +this.password);

}

varperson =newPerson();

varperson2 =newPerson();

person.username = "lisi";

person.getInfo();

person2.getInfo();

使用原型存在的缺點：

1.不能傳參數；

2.有可能會導致程序錯誤。

如果使用原型方式來定義對象，那么生成的所有對象會共享原型中的屬性，這樣一個對象改變了該屬性也會反映到其他對象當中。

單純使用原型方式定義對象無法在構造函數中為屬性賦初值，只能在對象生成后再去改變屬性值。

比如，username改為數組后：

functionPerson()

{

}

Person.prototype.username =newArray();

Person.prototype.password = "123";

Person.prototype.getInfo =function()

{

? ? alert(this.username + ", " +this.password);

}

varperson =newPerson();

varperson2 =newPerson();

person.username.push("zhangsan");

person.username.push("lisi");

person.password = "456";

person.getInfo();//輸出：zhangsan,lisi, 456

person2.getInfo();//輸出：zhangsan,lisi, 123

//雖然沒有對person2對象進行修改，但是它的name和person是一樣的，即為zhangsan,lisi

這是因為使用原型方式，person和person2指向的是同一個原型，即對應了同樣的屬性對象。

對于引用類型(比如數組)，兩個對象指向了同一個引用，所以對一個所做的更改會影響另一個。

而對于字符串(字面常量值)，重新賦值之后就指向了另一個引用，所以二者的修改互不影響。

對原型方式的改進：

使用原型+構造函數方式來定義對象，對象之間的屬性互不干擾，各個對象間共享同一個方法。

//使用原型+構造函數方式來定義對象

functionPerson()

{

? ? this.username =newArray();

? ? this.password = "123";

}

Person.prototype.getInfo =function()

{

? ? alert(this.username + ", " +this.password);

}

varp =newPerson();

varp2 =newPerson();

p.username.push("zhangsan");

p2.username.push("lisi");

p.getInfo();

p2.getInfo();

五.動態原型方式

在構造函數中通過標志量讓所有對象共享一個方法，而每個對象擁有自己的屬性。

functionPerson()

{

? ? this.username = "zhangsan";

? ? this.password = "123";

? ? if(typeofPerson.flag== "undefined")

? ? {

? ? ? ? //此塊代碼應該只在第一次調用的時候執行

? ? ? ? alert("invoked");

? ? ? ? Person.prototype.getInfo =function()

? ? ? ? {

? ? ? ? ? ? //這個方法定義在原型中，會被每一個對象所共同擁有?

? ? ? ? ? ? alert(this.username + ", " +this.password);

? ? ? ? }

? ? ? ? Person.flag =true;//第一次定義完之后，之后的對象就不需要再進來這塊代碼了

? ? }

}

varp =newPerson();

varp2 =newPerson();

p.getInfo();

p2.getInfo();

1.2.2對象方法定義

var HJSmart = HJSmart || {};

(function(HJSmart) {

? ? HJSmart.EA= HJSmart.EA || {};

? ? HJSmart.EA.DeviceStatusData= function() {

? ? ? ? //類成員，私有變量

? ? ? ?var _body =undefined;

? ? ? ? var _devStatusEntity = {

? ? ? ? ? ? cmdCode :0x0000,//"命令碼"

? ? ? ? ? ? workingStage:0x00,//工作階段

? ? ? ? };

? ? ? ? //類屬性，公有屬性

? ? ? ? HJSmart.EA.DeviceStatusData.cmdOperateData= {

? ? ? ? ? ? cmdID : {},

? ? ? ? ? ? cmdCode:{}

? ? ? ? };

? ? ? ? //實例方法，私有方法

? ? ? ? function_updateStatusDataWithMessage(pReceiveMessage){

? ? ? ? ? ? var messageType = HJSmart.message.getByte(pReceiveMessage, 9);

? ? ? ? ? ? return _updateStatusDataWithMessageBody(pReceiveMessage);

? ? ? ? }

? ? ? ? //類方法，公有方法

? ? ? ? HJSmart.EA.DeviceStatusData.createDeviceStatusDataWithMessageBody=? ? ? ? function(messageBody)

? ? ? ? {

? ? ? ? vardevStatusData = new HJSmart.EA.DeviceStatusData();

? ? ? ? devStatusData.updateStatusDataWithMessageBody(messageBody);

? ? ? ? return devStatusData;

? ? };

? ? return {

? ? ? ? //實例方法，公有成員方法?

? ? ? ? getDeviceStatusData: function(){ ?

? ? ? ? ? ? if(_devStatusEntity != null)

? ? ? ? ? ? ? ? return _devStatusEntity;

? ? ? ? ? ? else if(_devStatusEntity == null && _body != null)

? ? ? ? ? ? ? ? return _updateStatusDataWithMessage(_body);

? ? ? ? ? ? else return null;

? ? ? ? }

? ? };

};

})(HJSmart);

1.2.3類繼承的實現方式

functionBaseFunc(){

? ? //私有成員變量

? ? var varParivateAttr="Hello?Parivate Attr";

? ? //私有實例方法

? ? var varParivateFunc=function(){

? ? ? ? alert("varParivateFunc");

? ? };

? ? //公有成員

? ? this.varPublicAttr="Hello?Public Param";

? ? //公有實例方法

? ? this.varPublicFunc=function(){

? ? ? ? alert("varPublicFunc");

? ? }

}

function?SubFunc(){

? ? //定義子類擴展實例方法

? ? this.varPublicSubFunc=function(){

? ? ? ? alert("varPublicSubFunc");

? ? };

? ? //模擬繼承基類核心代碼

? ? BaseFunc.apply(this,arguments);

}

//類方法(靜態方法)聲明

SubFunc.staticFunc1=function(){

? ? alert("SubFunc.staticFunc1");

};

1.2.4命名空間的生成

/**

*生成類

**/

class:function(newClass,parent){

? ? //靜態方法

? ? newClass.static=function(funcObj){

? ? ? ? cnGame.core.extend(newClass,funcObj);

? ? ? ? return?newClass;

? ? };

? ? //實例方法

? ? newClass.methods=function(funcObj){

? ? ? ? cnGame.core.extend(newClass.prototype,funcObj);

? ? ? ? return?newClass;

? ? };

? ? //類繼承

? ? if(this.core.isFunction(parent)){

? ? ? ? var?func=function() {};

? ? ? ? func.prototype= parent.prototype;

? ? ? ? newClass.prototype=newfunc();

? ? ? ? newClass.prototype.constructor= newClass;

? ? ? ? newClass.parent= parent;

? ? }

? ? return?newClass;

},

/**

*生成命名空間,并執行相應操作

**/

register:function(nameSpace, func) {

? ? var?nsArr= nameSpace.split(".");

? ? var?parent= win;

? ? for(vari=0,len=nsArr.length;i< len; i++) {

? ? ? if((typeof ?parent[nsArr[i]] =='undefined') && (parent[nsArr[i]] = {}))

? ? ? ? parent=parent[nsArr[i]];

? ? }

? ? if(func) {

? ? ? ? func.call(parent,this);

? ? }

? ? return?parent;

},

1.3jQuery綁定事件

1.3.1通過#查詢指定id的控件來綁定事件

示例js代碼

//顯示細節控制面板

$('#js_detailedSettingLip').on('click', function(){

? ? uiFactory.showDetailedSetting();

});

$('#js_comfirmSettingBtn').on('click', function(){

? ? uiFactory.closeDetailedSetting();

? ? uiFactory.settingLip($('#js_settingRiceSize').find('option:selected').text(),

? ? $('#js_settingRiceSolidity').find('option:selected').text());

});

1.3.2通過.查詢指定樣式的一類控件數組來綁定事件

示例js代碼

$('.js_settingSelect').on('change', function(){

? ? var textVal =$(this).find('option:selected').text();

? ? $(this).parents('.js_settingItem').find('.js_SettingValue').text(textVal);

? ? uiFactory.settingLip($('#js_settingRiceSize').find('option:selected').text(),$('#js_settingRiceSolidity').find('option:selected').text());

});

1.3.3通過事件名綁定

$(document).bind("recieveMessage",{},_receiveReportMessageFunction);

1.4事件觸發

1.4.1trigger觸發

1.4.1.1js原生觸發

自定義事件到激發這個事件，需要document.createEvent()，event.initEvent()，element.dispatchEvent()這三部，分別是創建事件對象，初始化事件對象，觸發事件。先給個簡單的例子。

function foo1(){

? ? console.log("foo1is execute");

}

functionfoo2(){

? ? console.log("foo2is execute");

}

varev=document.createEvent('HTMLEvents');

ev.initEvent('fakeEvent',false,false);

document.addEventListener("fakeEvent",foo1,false);

document.addEventListener("fakeEvent",foo2,false);

document.dispatchEvent(ev)

event is the created Eventobject.

type is a string that representsthe type of event to be created. Possible event types include “UIEvents”,“MouseEvents”, “MutationEvents”, and “HTMLEvents”. See Notes section fordetails.

javascript自定義事件(event)

http://blog.allenm.me/2010/02/javascript自定義事件event/

1.4.1.2jQuery觸發

$(document).bind('recieveReportMessageData', {},function(event, cookInfoEntity) {

? ? initPageUi(cookInfoEntity);

});

$.event.trigger("recieveReportMessageData",devData.getCookInfoEntity());

1.5Window對象使用

1.5.1JS跳轉頁面

第一種：

window.location.href="login.jsp?backurl="+window.location.href;

第二種：

alert("返回");

window.history.back(-1);

第三種：

window.navigate("top.jsp");

第四種：

self.location=’top.htm’;

第五種：

alert("非法訪問！");

top.location=’xx.jsp’;

1.5.2頁面回退函數

history.back(-1):直接返回當前頁的上一頁，數據全部消息，是個新頁面

history.go(-1):也是返回當前頁的上一頁，不過表單里的數據全部還在

history.back(0)刷新history.back(1)前進history.back(-1)后退

window.location.reload();//刷新

window.history.go(1);//前進

window.history.go(-1);//返回

window.history.forward();//前進

window.history.back();//返回

1.6onbeforeunload事件

用js判斷頁面刷新或關閉的方法(onbeforeunload與onunload事件)

http://www.jb51.net/article/30640.htm

2api

2.1Date對象

js獲取當前日期時間及其它操作匯總

varmyDate =newDate();

myDate.getYear();//獲取當前年份(2位)

myDate.getFullYear();//獲取完整的年份(4位,1970-????)

myDate.getMonth();//獲取當前月份(0-11,0代表1月)

myDate.getDate();//獲取當前日(1-31)

myDate.getDay();//獲取當前星期X(0-6,0代表星期天)

myDate.getTime();//獲取當前時間(從1970.1.1開始的毫秒數)

myDate.getHours();//獲取當前小時數(0-23)

myDate.getMinutes();//獲取當前分鐘數(0-59)

myDate.getSeconds();//獲取當前秒數(0-59)

myDate.getMilliseconds();//獲取當前毫秒數(0-999)

myDate.toLocaleDateString();//獲取當前日期

varmytime=myDate.toLocaleTimeString();?? //獲取當前時間

myDate.toLocaleString( );//獲取日期與時間

日期時間腳本庫方法列表

Date.prototype.isLeapYear判斷閏年

Date.prototype.Format日期格式化

Date.prototype.DateAdd日期計算

Date.prototype.DateDiff比較日期差

Date.prototype.toString日期轉字符串

Date.prototype.toArray日期分割為數組

Date.prototype.DatePart取日期的部分信息

Date.prototype.MaxDayOfDate取日期所在月的最大天數

Date.prototype.WeekNumOfYear判斷日期所在年的第幾周

StringToDate字符串轉日期型

IsValidDate驗證日期有效性

CheckDateTime完整日期時間檢查

daysBetween日期天數差

2.2對象類型轉換

2.2.1JSON對象與字符串轉換

一、JSON字符串轉換為JSON對象

要運用上面的str1，必須運用下面的要領先轉化為JSON對象：

//由JSON字符串轉換為JSON對象

var obj =eval_r('(' + str 1+ ')');

或者

var obj = str.parseJSON(); //由JSON字符串轉換為JSON對象

或者

var obj = JSON.parse(str); //由JSON字符串轉換為JSON對象

然后，就可以這樣讀取：

Alert(obj.name);

Alert(obj.sex);

特別留心：如果obj本來就是一個JSON對象，那么運用eval（）函數轉換后（哪怕是多次轉換）還是JSON對象，但是運用parseJSON（）函數處理后會有疑問（拋出語法異常）。

二、可以運用toJSONString()或者全局要領JSON.stringify()將JSON對象轉化為JSON字符串。

例如：

var last=obj.toJSONString(); //將JSON對象轉化為JSON字符

或者

var last=JSON.stringify(obj); //將JSON對象轉化為JSON字符

alert(last);

留心：

上面的多個要領中，除了eval_r()函數是js自帶的之外，其他的多個要領都來自json.js包。新版本的JSON修改了API，將JSON.stringify()和JSON.parse()兩個要領都注入到了Javascript的內建對象里面，前者變成了Object.toJSONString()，而后者變成了String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要領，則說明您的json包版本太低

JS解析Json方法

http://blog.sina.com.cn/s/blog_49d274100101dl1e.html

Json字符串轉換為JS對象的高效方法實例

http://www.jb51.net/article/36261.htm

JS對象與JSON格式數據相互轉換

http://www.jb51.net/article/29729.htm

JS操作JSON總結

http://www.cnblogs.com/worfdream/articles/1956449.html

js怎么解析json格式字符串

http://blog.csdn.net/love__coder/article/details/6617539

2.2.2字符串與數字相互轉換

js字符串轉換成數字，數字轉換成字符串

http://blog.sina.com.cn/s/blog_5fe072b00100deb6.html

2.2.2.1js字符串轉換成數字

將字符串轉換成數字，得用到parseInt函數。JS中基本類型數據只有整型，浮點型，字符型和布爾型。

將字符串轉化成整型，只能用parseInt(str)把字符串解析成整數,默認按照十進制,但若是0開頭則按八進制，若是0x開頭則按十六進制；或者parseInt(str,radix)按指定進制,把字符串解析成整數,即把str當成radix進制翻譯成十進制parseInt(string)：函數從string的開始解析，返回一個整數。

舉例：parseInt('123') :返回123（int）；

parseInt('1234xxx') :返回1234（int）；

如果解析不到數字，則將返回一個NaN的值，可以用isNaN()函數來檢測；

舉例：

var i = parseInt('abc');

if (isNaN(i))

{

? ? alert('NaN value');

}

同樣的parseFloat函數是將字符串轉換成浮點數。

舉例：parseFloat('31.24abc') :返回31.24；

2.2.2.2js數字轉換成字符串

將字符串轉換成數字，得用到String類的toString方法

舉例：

var?i = 10;

var?s = i.toString();

alert(typeof s);

//將輸出String

2.2.2.3js數字與字符串的區別

js的數字的加法與字符串的連接都是+符號，所以究竟是加還是字符串的連接就取決與變量的類型。

舉例：

var a = 'abc' + 'xyz';

//a的值為：abcxyz,字符串與字符串是連接

var a = 10 + 5;?????????? //a的值為：15，數字是加

var a = 'abc' + 10;?????? //a的值為：abc10，字符串與數字，自動將10轉換成字符串了

var a = 'abc' + 10 + 20 + 'cd';

//a的值為:abc1020cd

var a = 10 + 20 + 'abc' + 'cd';

//a的值為:30abccd，可以數字加的先數字加，然后再連接

如果從html頁面元素得到的值，想按數字加，就需要先轉換為數字，因為從頁面得到的值默認是字符串。

2.2.3字符串轉布爾類型

javascript字符串數字相互轉換，布爾類型轉換

http://blog.163.com/www_jiangtao/blog/static/2491527320114332720780/

2.強制類型轉換

還可使用強制類型轉換（type casting）處理轉換值的類型。使用強制類型轉換可以訪問特定的值，即使它是另一種類型的。

ECMAScript中可用的3種強制類型轉換如下：

Boolean(value)——把給定的值轉換成Boolean型；

Number(value)——把給定的值轉換成數字（可以是整數或浮點數）；

String(value)——把給定的值轉換成字符串。

用這三個函數之一轉換值，將創建一個新值，存放由原始值直接轉換成的值。這會造成意想不到的后果。

當要轉換的值是至少有一個字符的字符串、非0數字或對象（下一節將討論這一點）時，Boolean()函數將返回true。如果該值是空字符串、數字0、undefined或null，它將返回false。

可以用下面的代碼段測試Boolean型的強制類型轉換。

Boolean("");//false–emptystring

Boolean("hi");//true–non-emptystring

Boolean(100);//true–non-zeronumber

Boolean(null);//false-null

Boolean(0);//false-zero

Boolean(newObject());//true–object

Number()的強制類型轉換與parseInt()和parseFloat()方法的處理方式相似，只是它轉換的是整個值，而不是部分值。

還記 得嗎，parseInt()和parseFloat()方法只轉換第一個無效字符之前的字符串，因此"4.5.6 "將被轉換為"4.5 "。

用Number()進行強制類型轉換，"4.5.6"將返回NaN，因為整個字符串值不能轉換成數字。

如果字符串值能被完整地轉換，Number()將判斷是調用parseInt()方法還是調用parseFloat()方法。

下表說明了對不同的值調用Number()方法會發生的情況：

Number(false)0

Number(true)1

Number(undefined)NaN

Number(null)0

Number("5.5")5.5

Number("56")56

Number("5.6.7")NaN

Number(newObject())NaN

Number(100)100

最后一種強制類型轉換方法String()是最簡單的，因為它可把任何值轉換成字符串。

要執行這種強制類型轉換，只需要調用作為參數傳遞進來的值的toString()方法，即把1轉換成"1 "，把true轉換成"true "，把false轉換成"false "，依此類推。

強制轉換成字符串和調用toString()方法的唯一不同之處在于，對null或undefined值強制類型轉換可以生成字符串而不引 發錯誤：

vars1=String(null);//"null"

varoNull=null;

vars2=oNull.toString();//won’twork,causesanerror

3.利用js變量弱類型轉換

舉個小例子，一看，就會明白了。

varstr='012.345';

varx=str-0;

x=x*1;

上例利用了js的弱類型的特點，只進行了算術運算，實現了字符串到數字的類型轉換，不過這個方法還是不推薦的。

2.3數組操作

2.3.1 1、數組的創建

vararrayObj =newArray();//創建一個數組

vararrayObj =newArray([size]);//創建一個數組并指定長度，注意不是上限，是長度

vararrayObj =newArray([element0[,? element1[, ...[, elementN]]]]);//創建一個數組并賦值

要說明的是，雖然第二種方法創建數組指定了長度，但實際上所有情況下數組都是變長的，也就是說即使指定了長度為5，仍然可以將元素存儲在規定長度以外的，注意：這時長度會隨之改變。

2.3.2?2、數組的元素的訪問

vartestGetArrValue=arrayObj[1];//獲取數組的元素值

arrayObj[1]="這是新值";//給數組元素賦予新的值

2.3.3 3、數組元素的添加

arrayObj. push([item1? [item2 [. . . [itemN ]]]]);//將一個或多個新元素添加到數組結尾，并返回數組新長度

arrayObj.unshift([item1? [item2 [. . . [itemN ]]]]);//將一個或多個新元素添加到數組開始，數組中的元素自動后移，返回數組新長度

arrayObj.splice(insertPos,0,[item1[,? item2[, . . . [,itemN]]]]);//將一個或多個新元素插入到數組的指定位置，插入位置的元素自動后移，返回""。

2.3.4?4、數組元素的刪除

arrayObj.pop();//移除最后一個元素并返回該元素值

arrayObj.shift();//移除最前一個元素并返回該元素值，數組中元素自動前移

arrayObj.splice(deletePos,deleteCount);//刪除從指定位置deletePos開始的指定數量deleteCount的元素，數組形式返回所移除的元素

2.3.5 5、數組的截取和合并

arrayObj.slice(start,? [end]);//以數組的形式返回數組的一部分，注意不包括end對應的元素，如果省略end將復制start之后的所有元素

arrayObj.concat([item1[,? item2[, . . . [,itemN]]]]);//將多個數組（也可以是字符串，或者是數組和字符串的混合）連接為一個數組，返回連接好的新的數組

2.3.6 6、數組的拷貝

arrayObj.slice(0);//返回數組的拷貝數組，注意是一個新的數組，不是指向

arrayObj.concat();//返回數組的拷貝數組，注意是一個新的數組，不是指向

2.3.7 7、數組元素的排序

arrayObj.reverse();//反轉元素（最前的排到最后、最后的排到最前），返回數組地址

arrayObj.sort();//對數組元素排序，返回數組地址

2.3.8?8、數組元素的字符串化

arrayObj.join(separator);//返回字符串，這個字符串將數組的每一個元素值連接在一起，中間用separator隔開。

toLocaleString、toString、valueOf：可以看作是join的特殊用法，不常用

2.3.9二、數組對象的3個屬性

1、length屬性

Length屬性表示數組的長度，即其中元素的個數。因為數組的索引總是由0開始，所以一個數組的上下限分別是：0和length-1。和其他大多數語言不同的是，JavaScript數組的length屬性是可變的，這一點需要特別注意。當length屬性被設置得更大時，整個數組的狀態事實上不會發生變化，僅僅是length屬性變大；當length屬性被設置得比原來小時，則原先數組中索引大于或等于length的元素的值全部被丟失。下面是演示改變length屬性的例子：

var?arr=[12,23,5,3,25,98,76,54,56,76];

//定義了一個包含10個數字的數組

alert(arr.length);//顯示數組的長度10

arr.length=12;//增大數組的長度

alert(arr.length);//顯示數組的長度已經變為12

alert(arr[8]);//顯示第9個元素的值，為56

arr.length=5;//將數組的長度減少到5，索引等于或超過5的元素被丟棄

alert(arr[8]);//顯示第9個元素已經變為"undefined"

arr.length=10;//將數組長度恢復為10

alert(arr[8]);//雖然長度被恢復為10，但第9個元素卻無法收回，顯示"undefined"

由上面的代碼我們可以清楚的看到length屬性的性質。但length對象不僅可以顯式的設置，它也有可能被隱式修改。JavaScript中可以使用一個未聲明過的變量，同樣，也可以使用一個未定義的數組元素（指索引超過或等于length的元素），這時，length屬性的值將被設置為所使用元素索引的值加1。例如下面的代碼：

var?arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);

arr[15]=34;

alert(arr.length);

代碼中同樣是先定義了一個包含10個數字的數組，通過alert語句可以看出其長度為10。隨后使用了索引為15的元素，將其賦值為15，即arr[15]=34，這時再用alert語句輸出數組的長度，得到的是16。無論如何，對于習慣于強類型編程的開發人員來說，這是一個很令人驚訝的特性。事實上，使用new Array()形式創建的數組，其初始長度就是為0，正是對其中未定義元素的操作，才使數組的長度發生變化。

由上面的介紹可以看到，length屬性是如此的神奇，利用它可以方便的增加或者減少數組的容量。因此對length屬性的深入了解，有助于在開發過程中靈活運用。

2、prototype屬性

返回對象類型原型的引用。prototype屬性是object共有的。

objectName.prototype

objectName參數是object對象的名稱。

說明：用prototype屬性提供對象的類的一組基本功能。 對象的新實例“繼承”賦予該對象原型的操作。

對于數組對象，以以下例子說明prototype屬性的用途。

給數組對象添加返回數組中最大元素值的方法。要完成這一點，聲明一個函數，將它加入Array.prototype， 并使用它。

function?array_max()

{

? ? var?i, max =this[0];

? ? for(i = 1; i <this.length; i++)

? ? {

? ? ? ? if(max <this[i])

? ? ? ? ? ? max =this[i];

? ? }

? ? return?max;

}

Array.prototype.max =? array_max;

var?x =newArray(1,? 2, 3, 4, 5, 6);

var?y = x.max();

該代碼執行后，y保存數組x中的最大值，或說6。

3、constructor屬性

表示創建對象的函數。

object.constructor //object是對象或函數的名稱。

說明：constructor屬性是所有具有prototype的對象的成員。它們包括除Global和Math對象以外的所有JScript固有對象。constructor屬性保存了對構造特定對象實例的函數的引用。

例如：

x =newString("Hi");

if(x.constructor == String)//進行處理（條件為真）。

或

function?MyFunc {

? ? //函數體。

}

y =newMyFunc;

if(y.constructor == MyFunc)//進行處理（條件為真）。

對于數組來說：

y =newArray();

js數組的操作

http://blog.csdn.net/xcxinghai/article/details/13502583

2.3.10Javascript數組循環遍歷之forEach

http://blog.csdn.net/oscar999/article/details/8671546

2.4本地緩存localStorage與SessionStorage

2.4.1localStorage

2.4.1.1存儲

HJSmart.EA.Utl.saveCookInfoEntiyToLocalStorage= function(userApplianceInfo,cookEntityData)

{

? ? if(window.localStorage &&userApplianceInfo) {

? ? ? ? var storage = window.localStorage;

? ? ? ? var appIDStr =userApplianceInfo.applianceId.toString();

? ? ? ? //storage.setItem(userApplianceInfo.applianceId.toString(),JSON.stringify(cookEntityData));

? ? ? ? storage.setItem(appIDStr +"_cook_mode",cookEntityData.mode);

? ? ? ? storage.setItem(appIDStr +"_cook_content",cookEntityData.content);

? ? ? ? storage.setItem(appIDStr +"_cook_num",cookEntityData.num.toString());

? ? ? ? storage.setItem(appIDStr +"_cook_timer",cookEntityData.timer.toString());

? ? ? ? storage.setItem(appIDStr +"_cook_workTime",cookEntityData.workTime.toString());

? ? ? ? storage.setItem(appIDStr +"_cook_solidity",cookEntityData.solidity.toString());

? ? ? ? storage.setItem(appIDStr +"_cook_riceType",cookEntityData.riceType.toString());

? ? ? ? storage.setItem(appIDStr +"_cook_hasFaults",cookEntityData.hasFaults.toString());

? ? ? ? if(cookEntityData.hasFaults)

? ? ? ? {

? ? ? ? ? ? ? storage.setItem(appIDStr + "_cook_errorCode",cookEntityData.devError.errorCode); ?

? ? ? ? ? ? ? storage.setItem(appIDStr +"_cook_errorTitle",cookEntityData.devError.errorTitle);

? ? ? ? ? ? storage.setItem(appIDStr +"_cook_errorDesc",cookEntityData.devError.errorDesc);

? ? ? ? }

? ? }

}

2.4.1.2讀取

HJSmart.EA.Utl.getCookInfoEntiyFromLocalStorageWithDevInfo =function(userApplianceInfo)

{

? ? if(window.localStorage &&userApplianceInfo) {

? ? ? ? var storage = window.localStorage;

? ? ? ? var cookData = newmdSmart.EA.cookInfoEntity();

? ? ? ? var appIDStr =userApplianceInfo.applianceId.toString();

? ? ? ? cookData.mode =parseInt(storage.getItem(appIDStr + "_cook_mode")) ;

? ? ? ? cookData.content =parseInt(storage.getItem(appIDStr + "_cook_content"));

? ? ? ? cookData.num =parseInt(storage.getItem(appIDStr + "_cook_num"));

? ? ? ? cookData.timer =parseInt(storage.getItem(appIDStr + "_cook_timer")); ?

? ? ? ? cookData.workTime =parseInt(storage.getItem(appIDStr + "_cook_workTime"));

? ? ? ? cookData.solidity =parseInt(storage.getItem(appIDStr + "_cook_solidity"));

? ? ? ? cookData.riceType =parseInt(storage.getItem(appIDStr + "_cook_riceType"));

? ? ? ? var faultsStr =storage.getItem(appIDStr + "_cook_hasFaults");

? ? ? ? if(faultsStr == "true")

? ? ? ? ? ? cookData.hasFaults = true;

? ? ? ? else

? ? ? ? ? ? cookData.hasFaults = false;

? ? ? ? //var localJSONData=storage.getItem(userApplianceInfo.applianceId.toString());

? ? ? ? //varlocalData = eval("("+localJSONData+")");

? ? ? ? //cookData.mode =localData["mode"];

? ? ? ? //cookData.content =localData["content"];

? ? ? ? //cookData.num =localData["num"];

? ? ? ? //cookData.timer =localData["timer"];?

? ? ? ? //cookData.workTime =localData["workTime"];

? ? ? ? //cookData.solidity =localData["solidity"];

? ? ? ? //cookData.riceType =localData["riceType"];

? ? ? ? //cookData.hasFaults =localData["hasFaults"];

? ? ? ? if(cookData.hasFaults != false)

? ? ? ? {

? ? ? ? ? ? cookData.devError= newmdSmart.EA.Error();

? ? ? ? ? ? cookData.devError.errorCode =parseInt(storage.getItem(appIDStr + "_cook_errorCode"));

? ? ? ? ? ? cookData.devError.errorTitle =storage.getItem(appIDStr + "_cook_errorTitle");

? ? ? ? ? ? cookData.devError.errorDesc =storage.getItem(appIDStr + "_cook_errorDesc");

? ? ? ? }

? ? ? ? return cookData;

? ? }

? ? return null;

}

3調試問題定位

3.1交互問題

3.1.1用戶界面事件失效

可能原因：

1、js文件中有語法錯誤，導致js未加載完成，無法執行邏輯；

3.1.2事件觸發的方法只能用實例方法，不能用類方法

此方法綁定不到事件方法

$(document).bind("recieveMessage",{},HJSmart.EA.Utl._receiveReportMessageFunction);

HJSmart.EA.Utl._receiveReportMessageFunction =function(event,message)

{

? ? console.log('ReportMessage');

}

必須用如下方法：

$(document).bind("recieveMessage",{}, _receiveReportMessageFunction);

function _receiveReportMessageFunction(event,message)

{

? ? console.log('ReportMessage');

}

3.1.3頁面啟動時停在了彈出浮層頁面

? ? 調試過程中，頁面啟動后沒有正常加載，而停在了彈出浮層，一般都是有js邏輯錯誤，導致后續js邏輯沒有走通，例如遇到未定義變量，js邏輯會直接停住，不報異常。

3.1.4頁面跳轉后無法回退

? ? ? ? 通過href跳轉的，目前無法回退