隨處可見的JavaScript學(xué)習(xí)筆記-基礎(chǔ)入門篇

.....我不過略有一些討人喜歡的地方而已,怎會有什么迷人的魔力?

題外話,昨天我試了下發(fā)現(xiàn)簡書的編輯器實在好用,于是就把之前寫的東西搬運過來,之后可以在這做筆記了。先搬運幾篇。
美中不足是似乎不支持HTML標(biāo)簽,只支持原始的MakeDown語法不是那么的靈活。
題圖--引自網(wǎng)絡(luò),侵刪,請聯(lián)系我

引言

歷史上恐不會有第二個編程語言走JavaScript這種路數(shù),聽說它的誕生只用了十天。
而現(xiàn)如今幾乎不會有哪個有交互效果的網(wǎng)頁能離開它。
然而,這款語言雖然簡單,卻談不上易用,由于設(shè)計之初的種種問題,它總是能有很多稀奇古怪的坑以及特性。
此處應(yīng)該插一張JavaScript真值表
然而,由于應(yīng)用場景的需要,它還是不可避免的迅速占領(lǐng)了市場份額讓大家都離不開它。
而作為我個人第二個系統(tǒng)學(xué)習(xí)的,勉強算是正真的編程語言且應(yīng)用于實踐的語言,
我個人是很喜歡用它的,雖然有很多搞不懂的地方,但并不影響我的使用。
雖然它的作者曾這么評價:"它的優(yōu)秀之處并非原創(chuàng),它的原創(chuàng)之處并不優(yōu)秀"。
閑言少敘,這將會是一篇覆蓋面有所偏頗的JS基礎(chǔ)復(fù)習(xí)匯總筆記,寫作初衷也不是什么學(xué)習(xí)總結(jié),更偏向于復(fù)習(xí)回想。
畢竟在實踐中可能很多知識用不到,并不是說它們不重要,而只是你還沒到用到的時候,然而當(dāng)用到了,卻意識不到那未免有些悲哀。
固作此,大體上會是我想到哪復(fù)習(xí)到哪,將來或許想找某個知識點時我會回來看這篇文章而不是去搜索引擎中去撈。
附帶,雖然8012年了,但這篇文章依舊是以ES5為基礎(chǔ)。

基礎(chǔ)概念

說到基礎(chǔ)概念,有很多,比如區(qū)分大小寫,保留字,標(biāo)識符等等等..但既然文章開頭說了是有偏頗那自然這就不會通篇介紹
這些東西隨著使用,自然會融入到日常操作中,縱使如此,沒有基礎(chǔ)概念的入門筆記也是有問題的,所以
首先讓我們來認(rèn)識下JavaScript的數(shù)據(jù)類型吧,這同時也是很多中小企業(yè)沒事干會拿來面試的問題。
以下左邊是名稱,'-' 后面是示例。

  • Number:數(shù)字類型-1,2,3,4
  • String:字符串-"果我們的鐵騎繼續(xù)前進"
  • Bollean:布爾值-"假(false)作真(true)來,真亦假"
  • undefined:未定義-"XXX?不存在的"
  • null:空值-"存在,但是不存在,我,即是虛空"
  • Object:對象-"萬物起源"

ES5的數(shù)據(jù)類型就是如上幾種了,前三個是原始類型。中間兩個是常見的坑的出處。
最后的是JavaScript中所有的起源,在JavaScript中無論是數(shù)字還是字符或是什么雜七雜八的別的都是對象,
而JavaScript沒有Class的概念,一切都是克隆自最原始的一個對象。
排除這點,對象還可以細(xì)分為函數(shù),數(shù)組,Date和單純的對象。這幾種也被稱為引用類型。
至于怎么用.....

var a = 1 //你獲得了一個數(shù)字類型
var a = '1' //你獲得了一個字符串
var a = true //你獲得了一個布爾值
//值得一提的是
console.log(1==true) //true
console.log(1===true) //false
var a={} //你獲得了一個空對象
a.b  //你獲得了undefined
a.b=null //取得了null
var a = [] //你獲得了數(shù)組
var function a (){} //你獲得了函數(shù)
//再值得一提的是數(shù)組和對象可以通過new Array 和new Object來獲得

到這里為止估計不會有幾個人有疑問吧,單純的概念簡單直接。硬要說的話,上面涉及了一些隱式轉(zhuǎn)換,等于和全等一類的問題。
簡單介紹隱式轉(zhuǎn)換:
JavaScript沒有顯示的數(shù)據(jù)類型申明,全看你賦值的是什么,它就是什么類型的數(shù)據(jù),這很便利,同時帶來的同樣多的坑
因為這需要你在實際運行以后才能發(fā)現(xiàn)有問題,且不易排查。
最常發(fā)生隱式轉(zhuǎn)換的為數(shù)字和字符比如:

var a = 1 //數(shù)字類型
var b ='2' //字符類型
a=a+b  //a='12' 字符類型
b=b*a // b=2 數(shù)字類型(這種做法極不靠譜不推薦)

基本就是這個調(diào)調(diào),其它有很多很多,比如數(shù)組和對象以及什么別的東西只要它有toString(),就能轉(zhuǎn)換成字符串。
這里往往會埋藏很多坑,所以當(dāng)程序出現(xiàn)一些匪夷所思不符合預(yù)期的地方,可以先檢查下數(shù)據(jù)類型。
等于與全等:
等于是==,全等則為===,區(qū)別僅僅在于前者會發(fā)生隱式轉(zhuǎn)換,而后者不會,能使用全等的地方就不要使用等于,畢竟
全等少個隱式轉(zhuǎn)換效率也會高不少,同時有助于控制數(shù)據(jù)類型。


基礎(chǔ)概念的應(yīng)用-->類型判斷
類型判斷是最為常見的場景之一,剛開始寫程序的時候這里有時我也需要去問搜索引擎,在此稍微總結(jié)一番。

//最常用的類型判斷typeof 
var a = 1,
var b = '2'
var c= [1,2,3,4]
var d = {1:2,3:4}
var e=function(){}
console.log(typeof a) //'number'
console.log(typeof b) //'string'
console.log(typeof c) //'object'
console.log(typeof d)//'object'
console.log(typeof e) //'function'

typeof通常只能用于區(qū)分字符串和數(shù)字,或者判斷下是不是函數(shù),對于對象,null,數(shù)組則是無力的,
因為它們都是Object,值得一提的是,它認(rèn)識undefined,所以用來判斷是否可執(zhí)行和是否不存在倒是不錯。

// 我從來沒用過的類型判斷..instanceof
console.log(a instanceof Number) //true
console.log(b instanceof String) //true
console.log(c instanceof Array) //true
console.log(c instanceof Object) //true

知道是什么類型的前提下可以判斷真假,不能判斷null和undefinde,能區(qū)分Array和Object但是很麻煩,我反正沒用過。

//基于原型的通用判斷,最繁瑣,但是萬能且穩(wěn)定
console.log(Object.prototype.toString.call(a) === ‘[object String]’) // true;
console.log(Object.prototype.toString.call(b) === ‘[object Number]’) // true;
console.log(Object.prototype.toString.call(c) === ‘[object Array]’) // true;
console.log(Object.prototype.toString.call(d) === ‘[object Object]’) // true;
console.log(Object.prototype.toString.call(e) === ‘[object Function]’) // true;

寫法繁瑣但是什么都能判斷,甚至能識別Date類型,不過實際應(yīng)用中最好是封裝一下。
需要注意的是判斷 null 和 undefined 時首字母得大寫。

基礎(chǔ)概念中其實還有諸如:JavaScript中函數(shù)是一等公民,只要你想可以玩出花來,非常適合函數(shù)式編程。
作用域鏈和變量提升,原型鏈和原型繼承。
在此略過不表,入門的,基礎(chǔ)的開發(fā)基本不會涉及到這些知識的實用部分。
舉例來說假如貴公司是個自詡原生開發(fā)的從來沒有過前端的創(chuàng)業(yè)公司突然招了個前端。
那么通常這個前端會面對修改

//這里是一個表單 里面每一個input上有一個Id
//下面是Js
var a = document.getElementById('XXX').text;
var b = document.getElementById('XXX').text;
var c = document.getElementById('XXX').text;
var d = document.getElementById('XXX').text;
....//這中間可以有很多個
var z = document.getElementById('XXX').text;
//也不一定是取值,也許是賦值,也許是清空,也是是什么別的操作,很久沒寫過原生的了,上面如果有拼寫錯誤..還望海涵

總之就是這么個意思,這一點都不有趣,純粹的堆疊起來的一大坨..
要問我何以斷言,因為我從工作開始到現(xiàn)在修改過很多這種項目...區(qū)別在于有些可能是用Jq這么寫的...

基礎(chǔ)語法

所謂基礎(chǔ)語法,在我看來無非就是流程控制,比如If else,do while,for循環(huán)一類,絕大多數(shù)編程語言都有,基本不需要特別記憶
雖然不同語言之間會有細(xì)微的區(qū)別和特性,那就需要在實際的生產(chǎn)生活中再做區(qū)分。
在這里我也不會寫怎么寫一個循環(huán)...這簡直是刻在靈魂里的方法,沒必要再提。

//在這部分我覺得有必要提出來的,多層if 和 swich
if(1){

}else if(2){

}else if(3){

}else{

}
//不得不說這種寫法很常見,但更推薦swich,據(jù)說前者會全部判斷一遍,而后者是通過Hash表,效率會高一些
swich(num){
case 1:

break;
case 2:

break;
case 3:

break;
default;


}
//上兩種是等價的

基礎(chǔ)部分..恩,+,-,*,/ ==,>= ,<=, 不提不提,復(fù)雜的數(shù)學(xué)運算可以單獨開一個了,拿Js作科學(xué)計算似乎也不是很有意義

//我們來談?wù)勅≌?//floor向下取整:

Math.floor(0.20); // 0
Math.floor(0.90); // 0
Math.floor(-0.90); // -1
Math.floor(-0.20); // -1
//round四舍五入

Math.round(0.2) // 0
Math.round(0.9) // 1
Math.round(-0.9) // -1
Math.round(-0.2) // 0
//ceil向上取整

Math.ceil(0.2) // 1
Math.ceil(0.9) // 1
Math.ceil(-0.9) // 0
Math.ceil(-0.2) // 0
//js有很經(jīng)典的減不凈問題,比如
3.29-3.28 //你以為結(jié)果是0.1?你大可去試試..
//輸出:0.010000000000000231

兩位小數(shù)大都有這個問題,這是個刻在靈魂中不可修復(fù)的BUG..聽說很多編程語言都有,而兩位小數(shù)的加減簡直是購物車標(biāo)準(zhǔn)應(yīng)用
所以,取整很基礎(chǔ),也很重要。

//&&,||, ! 與或非

var a = b || 3 //當(dāng)b不存在,a被賦值為3
a=3&&b=0 //a=3 b被賦值為0 
//這兩個也常用于判斷條件
!true //false 可以當(dāng)取反..通常應(yīng)用于判斷條件
var a = b=0? 3:5 //賦值a通過判斷b是否等于0,等0則是3不等于則是5

與或非有時可以用于替換if else 寫出簡潔而難懂的業(yè)務(wù)邏輯 。
我曾經(jīng)沉迷于此,最后發(fā)現(xiàn)還是單純的拿來作賦值和判斷條件才是它的正確用法。

結(jié)語

至此,我所認(rèn)為的JavaScript基礎(chǔ)部分就已經(jīng)告一段落了,雖然這遠遠不夠。
俗話說萬丈高樓平地起,以地基為例這可能只是挖了一半的基坑,注意,只挖了一半。
用來蓋個新農(nóng)村風(fēng)三層小樓是足夠了,但是你要想蓋迪拜塔趁著還沒蓋起來趕緊跑路吧還是。
之后我還會把各種比如字符串操作,數(shù)組操作,這一類的API單獨列一篇,順便回想下用法。
至于原型鏈,和作用域鏈.. 我個人雖然理解了,或者說以為理解了,但從來沒有在實踐中應(yīng)用過,雖然這也從屬于Js基礎(chǔ)領(lǐng)域,興許在將來的某一天我會再撿起來吧。
最后,昨天本是想回顧CSS+HTML這種更為基礎(chǔ)的部分,
奈何這兩點,一來我不是特別喜歡寫,二來基礎(chǔ)部分不是太有意思,三來工作時間大都在倒騰JS
就不誤人子弟,繼續(xù)把復(fù)習(xí)任務(wù)留給將來的某一天吧。

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

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

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