第十六次課程小結(jié)

一、數(shù)據(jù)類型轉(zhuǎn)換

在js讀取文本框或者其它表單數(shù)據(jù)的時(shí)候獲得的值是字符串類型的,例如兩個(gè)文本框a和b,如果獲得a的value值為11,b的value值為9
方法主要有三種:轉(zhuǎn)換函數(shù)、強(qiáng)制類型轉(zhuǎn)換、利用js變量弱類型轉(zhuǎn)換。

1. 轉(zhuǎn)換函數(shù):

js提供了parseInt()和parseFloat()兩個(gè)轉(zhuǎn)換函數(shù)。前者把值轉(zhuǎn)換成整數(shù),后者把值轉(zhuǎn)換成浮點(diǎn)數(shù)。只有對(duì)String類型調(diào)用這些方法,這兩個(gè)函數(shù)才能正確運(yùn)行;對(duì)其他類型返回的都是NaN(Not a Number)。

一些示例如下:

parseInt(“1234blue”); //returns 1234

parseInt(“0xA”); //returns 10

parseInt(“22.5”); //returns 22

parseInt(“blue”); //returns NaN

parseInt()方法還有基模式,可以把二進(jìn)制、八進(jìn)制、十六進(jìn)制或其他任何進(jìn)制的字符串轉(zhuǎn)換成整數(shù)?;怯蓀arseInt()方法的第二個(gè)參數(shù)指定的,示例如下:

parseInt(“AF”, 16); //returns 175

parseInt(“10”, 2); //returns 2

parseInt(“10”, 8); //returns 8

parseInt(“10”, 10); //returns 10

如果十進(jìn)制數(shù)包含前導(dǎo)0,那么最好采用基數(shù)10,這樣才不會(huì)意外地得到八進(jìn)制的值。例如:


parseInt(“010”); //returns 8

parseInt(“010”, 8); //returns 8

parseInt(“010”, 10); //returns 10

parseFloat()方法與parseInt()方法的處理方式相似。

使用parseFloat()方法的另一不同之處在于,字符串必須以十進(jìn)制形式表示浮點(diǎn)數(shù),parseFloat()沒有基模式。

下面是使用parseFloat()方法的示例:


parseFloat(“1234blue”); //returns 1234.0

parseFloat(“0xA”); //returns NaN

parseFloat(“22.5”); //returns 22.5

parseFloat(“22.34.5”); //returns 22.34

parseFloat(“0908”); //returns 908

parseFloat(“blue”); //returns NaN

2. 強(qiáng)制類型轉(zhuǎn)換

還可使用強(qiáng)制類型轉(zhuǎn)換(type casTIng)處理轉(zhuǎn)換值的類型。使用強(qiáng)制類型轉(zhuǎn)換可以訪問特定的值,即使它是另一種類型的。

ECMAScript中可用的3種強(qiáng)制類型轉(zhuǎn)換如下:

Boolean(value)——把給定的值轉(zhuǎn)換成Boolean型;

Number(value)——把給定的值轉(zhuǎn)換成數(shù)字(可以是整數(shù)或浮點(diǎn)數(shù));

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

用這三個(gè)函數(shù)之一轉(zhuǎn)換值,將創(chuàng)建一個(gè)新值,存放由原始值直接轉(zhuǎn)換成的值。這會(huì)造成意想不到的后果。

當(dāng)要轉(zhuǎn)換的值是至少有一個(gè)字符的字符串、非0數(shù)字或?qū)ο螅ㄏ乱还?jié)將討論這一點(diǎn))時(shí),Boolean()函數(shù)將返回true。如果該值是空字符串、數(shù)字0、undefined或null,它將返回false。

可以用下面的代碼段測(cè)試Boolean型的強(qiáng)制類型轉(zhuǎn)換。


Boolean(“”); //false – empty string

Boolean(“hi”); //true – non-empty string

Boolean(100); //true – non-zero number

Boolean(null); //false - null

Boolean(0); //false - zero

Boolean(new Object()); //true – object

Number()的強(qiáng)制類型轉(zhuǎn)換與parseInt()和parseFloat()方法的處理方式相似,只是它轉(zhuǎn)換的是整個(gè)值,而不是部分值。示例如下:


  用法結(jié)果

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(new Object()) NaN

Number(100) 100

3. 利用js變量弱類型轉(zhuǎn)換

舉個(gè)小例子,一看,就會(huì)明白了。

var add1 = document.getElementById("add1").value;

var add2 = document.getElementById("add2").value;

document.getElementById("sum").value = add1*1 + add2*1

三種方法:

  document.getElementById("add-btn").onclick=function(){

      document.getElementById("result").innerHTML =

         parseFloat(document.getElementById('first-number').value) +

         parseFloat(document.getElementById('second-number').value);//第一種

 
       document.getElementById("result").innerHTML =

        document.getElementById('first-number').value*1 +

        document.getElementById('second-number').value*1;//第二種


         document.getElementById("result").innerHTML =

          Number(document.getElementById('first-number').value) +

          Number(document.getElementById('second-number').value);//第三種

      }

二、簡單語法匯總

簡單指令
alert(""); 提示框;
confirm(""); 確認(rèn)框,點(diǎn)擊后會(huì)響應(yīng)返回true或false;
prompt(); 彈出一個(gè)輸入框;
document.write("");
console.log(""); 在控制臺(tái)打印相應(yīng)的信息;
console.dir(""); 在控制臺(tái)打印出該對(duì)象的所有信息;

數(shù)組Array

(1)、定義法
構(gòu)造函數(shù):
var arr = new Array("123","abc","xxx");
字面量:
var arr = ["123","646","abc"];
數(shù)組長度:
var arr = new Array(6);(數(shù)組長度為6);
(2)、賦值
arr[0]=1;

匿名函數(shù)
匿名函數(shù)的name屬性值為anonymous;
函數(shù)僅用一次的情況,即用即廢;
eg:
setTimeout(function(){
console.log(this.name);
},1000);
tips:在1秒后在控制臺(tái)打印出本函數(shù)的名稱;
回調(diào)函數(shù)
在一個(gè)函數(shù)當(dāng)中,另一個(gè)函數(shù)作為參數(shù)傳入該函數(shù)中,另一個(gè)的這個(gè)函數(shù)即為回調(diào)函數(shù);
eg:
function atack(callback){
return callback;
}
tips:在調(diào)用該函數(shù)時(shí),指定callback是哪個(gè)函數(shù);
atack(func);

自執(zhí)行函數(shù)
(function func2(){
})()
tips:在函數(shù)定義的結(jié)束最后寫入一個(gè)(),該函數(shù)定義完成后直接被調(diào)用執(zhí)行;
遞歸
在函數(shù)執(zhí)行的最后再一次的調(diào)用自身;
tips:遞歸是一種非常耗資源的做法,通常為了簡化運(yùn)算,還會(huì)結(jié)合緩存進(jìn)行;
并且注意,遞歸必須要有結(jié)束判斷條件(if),否則該函數(shù)被調(diào)用后就是死循環(huán)
(Array)數(shù)組對(duì)象

(1)、arr1.concat(arr2);
數(shù)組拼接,結(jié)果為將arr2拼接到arr1的最后;

(2)、arr.join();
數(shù)組字符串輸出,括號(hào)內(nèi)可以指定元素連接的符號(hào);
eg:
arr=["a","b","c","d"];
console.log(arr.join("|")); (結(jié)果為"a|b|c|d")

(3)、arr.pop();
切除數(shù)組的最后一個(gè)元素,返回值為該元素;

(4)、arr.slice(start,end)
獲取,獲取數(shù)組的指定片段,start必須有,如果參數(shù)為負(fù)數(shù)則從末尾開始選取;
返回值為該片段組成的,一個(gè)新的數(shù)組;

(5)、arr.push
添加,用于向數(shù)組的末尾添加新的元素,參數(shù)可以是多個(gè);
返回值為數(shù)組的新長度;

(6)、arr.splice
1、用于向數(shù)組中指定的索引添加元素;
arr.splice(2, 0, "William","asdfasdf");
在第2個(gè)元素開始,刪除的元素個(gè)數(shù)(可以為0,為0到結(jié)尾),
加入元素為"William"、"asdfasdf";

替換數(shù)組中的元素
arr.splice(2,1,"William");

用于刪除數(shù)組中的元素
arr.splice(2,2);

(7)、arr.indexOf(element);
查找,在數(shù)組中查找element,返回值為索引,如果沒有該元素返回-1;

(8)、arr.sort(function);
排序,function為一個(gè)函數(shù);
eg:
function sortNumber(a,b){
return a-b;
}
arr.sort(sortNumber);(從小到大排序)
tips:如果a-b改成b-a,那么執(zhí)行的操作為從大到??;
tips:字符串對(duì)象(String)的方法與Array的方法類似;

(Date)日期對(duì)象
date.getTime()
date.getMilliseconds()
date.getSeconds()
date.getMinutes()
date.getHours()
date.getDay()
date.getDate()
date.getMonth()
date.getFullYear()

substring(start,end) 截取從start開始,end結(jié)束的字符,
返回一個(gè)新的字符串,若start為負(fù)數(shù),那么從最后一個(gè)字符開始;
substr(start,length) 截取從start開始,length長度的字符,得到一個(gè)新的的字符串
indexOf(char) 獲取指定字符第一次在字符串中的位置
lastIndexOf(char) 獲取指定字符最后一次出現(xiàn)在字符串中的位置
trim() 去除字符串前后的空白
toUpperCase()
toLocaleUpperCase() 轉(zhuǎn)換為大寫
toLowerCase()
toLocaleLowerCawse() 轉(zhuǎn)換為小寫
replace() 替換字符
split() 分割字符串為數(shù)組

自定義對(duì)象
對(duì)象:無序?qū)傩缘募希?br> 特征:屬性(key);
行為:方法(value);
js是基于對(duì)象的弱類型語言;
繼承:基于類,子類可以從父類得到的特征;

工廠模式:定義一個(gè)function構(gòu)造函數(shù),作為對(duì)象,要?jiǎng)?chuàng)建對(duì)象直接調(diào)用該構(gòu)造函數(shù),加new關(guān)鍵字;
構(gòu)造函數(shù):定義對(duì)象的函數(shù),里面存有該對(duì)象擁有的基本屬性和方法;
命名首字母大寫,this會(huì)自動(dòng)指代當(dāng)前對(duì)象;
訪問對(duì)象屬性:
obj[key];
obj.key;
遍歷對(duì)象:
for(key in obj){
key 為屬性名;
obj[key] 為屬性值(value);
}
JSON
{
"name" : "李狗蛋",
"age" : 18,
"color" : "yellow"
}
1、 所有的屬性名,必須使用雙引號(hào)包起來;
2、 字面量側(cè)重的描述對(duì)象,JSON側(cè)重于數(shù)據(jù)傳輸;
3、 JSON不支持undefined;
4、 JSON不是對(duì)象,從服務(wù)器發(fā)來的json一般是字符串,
通過JSON.parse(jsonDate.json)可以將其轉(zhuǎn)換成js對(duì)象;

JS解析
(1)、作用域
全局作用域:整個(gè)代碼所有地方都可以調(diào)用;
局部作用域:在函數(shù)內(nèi)部聲明的變量,只可以在函數(shù)內(nèi)部使用;
(2)、變量提升和函數(shù)提升
預(yù)解析:在解析的時(shí)候,var和function都會(huì)被提升到代碼的最頂端;
但是賦值操作不會(huì)被提升,定義和函數(shù)才會(huì)被提升;
if里面的變量定義也會(huì)被提升,但是賦值操作不會(huì);

其他細(xì)節(jié)(tips)
(1)、元素由對(duì)象組成的數(shù)組進(jìn)行排序
eg:
var data = [
{title: "老司機(jī)", count: 20},
{title: "詩人", count: 5},
{title: "歌手", count: 10},
{title: "隔壁老王", count: 30},
{title: "水手", count: 7},
{title: "葫蘆娃", count: 6},
];
//該數(shù)組的元素都為對(duì)象。我們需求為根據(jù)count的值給數(shù)組重新排序。
//解決方案:使用sort方法,對(duì)傳入的函數(shù)做手腳。

 function sortArr(a,b){
       return a.count > b.count;   
   }
   data.sort(sortArr);

原本的a和b的比較方法變成a.count和b.count;
至此,data將以count值從小到大排列。

tips:Array對(duì)象的sort方法傳入的為比較函數(shù),比較函數(shù)里return排序比較的方法;
原始的sort方法傳入的函數(shù)內(nèi)部return的值為a>b,
通過修改sort傳入的函數(shù),可以實(shí)現(xiàn)對(duì)元素為對(duì)象的數(shù)組的排序!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容