首頁 > 開發者 > JavaScript
標籤：更改 編程 對象 isnan 步驟 number 技術 它的 錯誤提示
作為一個前端開發人員，JS是我們行走江湖吃飯的傢伙。基本上一個前端人員能值多少大洋，就看JS了。雖然各種架構層出不窮，但是歸根結底學好原生JS才是硬道理。
學習任何新東西其實都遵循 10000 小時成才定律，只要付出時間，就會有收穫。人與人的不同只是收穫的多少不同。關於天賦問題，我們確實要承認某些人在某些領域確實比其他人厲害。但大部分人其實都是普通人，不需要天賦，只需要通過時間的簡單堆積就可以混口飯吃。
彈鋼琴能到郎朗那個層級的人是少數了，多數藝術生都普普通通，畢業出來混個鋼琴老師噹噹，辦個培訓學校賺點錢娶媳婦兒生孩子，最多寫本書什麼的。只有投入足夠多的時間，你發現某些人確實比你厲害，這個時候才適合討論天賦問題。所以，不要自我否定，才是真正的成長的開始。
咱們言歸正傳吧。
一，JavaScript的組成
JavaScript主要由以下3部分組成：
ECMAScript：解譯器、翻譯
DOM：Document Object Model(文件物件模型)
BOM：Browser Object Model(瀏覽器物件模型)
ECMAScript類似於翻譯的角色，將編寫好的可讀性高的代碼翻譯成電腦可以識別的二進位代碼，並將電腦反饋回來的資訊翻譯給我們。ECMAScript是JS的核心，通常稱為:解譯器。
ECMAScript為JS提供了最基本的功能，但這些功能是十分有限的，如何能讓JS具有編寫網頁代碼的能力呢?此時我們就要用到DOM了。DOM中的Document(文檔)其實就是HTML文檔，並且DOM還賦予了JS操作HTML的能力。在JS裡DOM是以document的形式展現的。
BOM使得JS擁有了操作瀏覽器的能力，在JavaScript當中BOM以window的形式存在，有了BOM，JS就擁有了類似彈窗，關閉視窗，複製內容到剪貼簿等與瀏覽器相關的功能。
從相容性的角度來看的話，ES(ECMAScript)基本上不存在相容性問題，DOM有一些操作上的不相容，而BOM完全不相容，所以儘可能避免使用BOM，這樣可以省去很多的麻煩。
二，變數類型
首先說變數，從字面上理解就是可以變化的量，放到程式設計語言裡面，就是可以被賦值改變的量。和變數對應的就是常量，我們經常遇到的比如，10,20這樣的不能改變的數字，就是常量，一個確定的值。不能被賦值也不能被改變。
在JS中我們把變數分為了多種類型。
var a = 1024; alert(typeof a); var a = ‘cos‘; alert(typeof a); var a = true; alert(typeof a); var a = function (){ alert(‘cos‘); } alert(typeof a); var a = document; alert(typeof a);
typeof 是一個一元運算，放在一個運算數之前，運算數可以是任意類型。它傳回值是一個字串，該字串說明運算數的類型。
我們可以通過typeof返回變數類型，那麼上面的例子的輸出結果，依次為：number(數值)，string(字串)，boolean(布爾)，function(函數)，object(對象)。在這5中基礎資料類型之外，JS還存在一種叫undefined的類型，一般存在於如下兩種情況：
alert(typeof b);
變數b沒有進行過定義，所以JS返回的數實值型別為undefined(未定義的)。
var b;
alert(typeof b);
這時，雖然我們定義了變數b，但在JS裡，變數的類型只取決於變數記憶體的值，而變數b內沒有值，因此它的資料類型依然是undefined。
JS沒有限制變數的資料類型，顯得更加靈活，但如果一個變數不停地更改類型，會顯得非常的混亂。所以同一個變數，最好只存放一種類型的資料。
三，變數類型的轉換
變數不僅有類型，而且可以進行類型之間的轉換。如果某個資料的類型不符合我們的需求，那麼就需要用到資料類型的轉換。我們一起舉個‘栗子’：
在網頁中添加兩個文字框和一個按鈕，並希望點擊按鈕後文字框中的數字可以相加。這個功能看起來很簡單，如果直接寫的話，因為textbox中value的屬性是以字串形式返回給JS的，這就導致輸入的兩個數字最後會被當做字串相加而不是數值。這時候，我們就需要將字串轉換為數字。
將字串轉化為數位方法為parseInt()。
這是關於parseInt()的一個例子：
var a = ‘1024‘; alert(parseInt(a)+1);
這裡我們將a定義為了字串，但是通過parseInt轉化後得到了數實值型別的資料，所以輸出結果為1025。需要注意的是，parseInt是從左至右依次掃描字串，一旦發現不是數位字元，就立即停止工作，並將前面的字元通過數實值型別返回，所以下面三種情況的返回結果依次為1024，1024，NaN：
var a = ‘1024px‘;var b = ‘1024px24‘;var c = ‘abc‘;alert(parseInt(a));alert(parseInt(b));alert(parseInt(c));
這裡的 NaN 是Not a Number的簡寫，簡言之就是JS解析不出數字時會返回這個結果。
所以，我們這個案例可以通過如下程式碼完成：
<script> window.onload=function () { var oTxt1=document.getElementById(‘txt1‘); var oTxt2=document.getElementById(‘txt2‘); var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function () { alert(parseInt(oTxt1.value)+parseInt(oTxt2.value)); }; }; </script> <body> <input id="txt1" type="text" /> <input id="txt2" type="text" /> <input id="btn1" type="button" value="求和" /> </body>
運行結果：
這裡有一個問題，我們並沒有對文字框進行任何限制，當使用者向文字框輸入的是字母而不是數位時候，程式是不能正常執行的。所以，這時候需要判斷一下對文字框輸入值通過 parseInt 方法轉換出來的結果是不是 NaN，如果是NaN，就說明使用者輸入某個值或者這兩個值不是數字，此時需要返回給使用者一個提示。
那麼問題來了，在JS裡，NaN十分的奇葩：
var a=parseInt(‘abc‘);
var b=parseInt(‘def‘);
alert(a==b);
此時，a和b的值都是NaN，但這個程式的執行結果居然是false，這告訴我們在JS裡NaN和NaN是不相等的。換言之，判斷結果是不是NaN，不能通過==進行比較。好在天無絕人之路，JS提供了一個函數：isNaN()，用於檢測一個變數是否為NaN。
現在我們來看：
輸入字母的時候效果如下：
通過 if 進行判斷，如果使用者有輸入的不是數字，則彈出與之對應的錯誤提示框;如果輸入的兩個值都沒有錯誤，將會彈出正確答案。
那麼使用parseInt轉換小數，會怎麼樣呢?
var a=‘3.5‘;
alert(parseInt(a));
輸出結果為3。對於parseInt而言，轉換出來的數字如果是小數，就會捨去小數部分，只保留整數部分。
如果我們需要用到小數的話，請使用parseInt的兄弟——parseFloat，這兩者在使用方法上沒有任何區別，你照貓畫虎的試試看。當你不知道轉換出來的數值是整數還是小數的時候，請優先選擇使用parseFloat，此時即便轉換前的變數為整數也不會出現數值缺損。
在我們剛才所講的類型轉換中，明確地告知了電腦我們想要對資料類型進行轉換，我們將這種方法稱為顯式類型轉換(也可以理解為：強制轉換)。同樣，還有一種轉換類型的方式被我們稱為隱式類型轉換。隱式類型轉換最簡單的例子如下：
var a=5;
var b=‘5‘;
alert(a==b);
理論上來講的話，二者資料類型不相同，輸出結果應該為flase。但是瀏覽器給出的答案是true。請和下面的例子做一個對比：
var a=5;
var b=‘5‘;
alert(a===b);
此時，返回的答案變成了false。那麼問題來了，==和===二者之間存在什麼區別呢?
對於==運算子來說，它在比較之前會先把二者的資料類型轉換為一致;而 === 運算子(全等運算子)不轉換類型，直接比較。在不轉換類型的情況下，a和b肯定是不相等。由此可知，在比較a==b時，並沒有明確告知電腦我們想要對a或b的類型進行轉換，但是電腦自己卻偷偷進行了轉換，這就是我們所講的隱式類型轉換。除開該例子之外，還存在另一種隱式轉換的情況：
var a=‘12‘;
var b=‘5‘;
alert(a-b);
如果這裡是a+b，電腦就會預設是字串相加(拼接)而彈出125。但是如果是a-b的話，電腦會在做減法之前進行隱式轉換成數實值型別，我們就得到答案7。
為什麼加法不會進行隱式轉換而減法會?因為在JS中+運算子本身具備字串拼接和數字相加這兩個功能，如果+識別為字串拼接，一步即可完成計算，直接拼接即可;但是如果識別為數字相加，就需要兩步才可以完成計算，即：先轉換類型，再相加。對於電腦而言，一定會選擇步驟更少的路徑，所以說加法不會進行隱式轉換。而在JS中，-運算子只有數字相減的功能，此時JS不得不進行隱式轉換。
四，變數範圍
變數範圍指的是變數可以起作用的範圍。
function aaa(){ var a=12; } function bbb(){ alert(a); } aaa(); bbb();
運行這個程式，在bbb函數內會出現變數a沒有被定義的報錯。事實上，a確實沒有被定義，因為在aaa中定義的a是局部變數，而局部變數，只能在定義它的函數裡面使用。和局部變數相對的一個概念是全域變數。
var a;
function aaa(){
a=12;
}
function bbb(){
alert(a);
}
aaa();
bbb();
這個例題當中的a被聲明在所有函數的外面，這樣的變數是全域變數，可以在任何地方使用，所以能夠正常彈出12。
五，閉包
關於閉包的概念，我建議你現階段先不用深究，如果高度興趣的話可以Google一下。咱們說過，局部變數只能在定義它的函數內使用。那麼，有一種情況例外：
function aaa(){
var a=12;
function bbb()
{
alert(a);
}
bbb();
}
aaa();
當函數bbb被包含在函數aaa內時，程式可以成功運行。此種寫法就被稱為閉包。閉包有很多進階的應用，當然這些都是後話，我們慢慢學習。在閉包結構中，aaa稱為父函數，bbb稱為子函數。對於閉包而言，子函數可以使用父函數的局部變數。事實上，剛剛我們已經使用過閉包了，例如上面的求和函數。
六，命名規範
命名規範，即怎樣給函數以及變數取名字。
給函數和變數取名字和給你孩子取名字差不多，理論而言是可以隨便取的，但實際應用中又不能顯得太俗太low，否則可能會引起隔壁老王的不滿。
關於命名規範：
可讀性——容易看懂
規範性——合乎規則
可讀性代表取名儘可能讓人能看懂。要是代碼通篇都是aaa，bbb，ccc這樣的取名，又正好碰到程式比較龐大，此時閱讀將是一件非常痛苦的事情。
規範性表示JS有一個較為約定俗稱的命名規則，大部分情況下採用匈牙利命名法或者類似方法，其原則為：
類型首碼
首字母大寫
JS中常見類型首碼：
類型首碼一般表明了變數儲存的類型，使我們一眼就能辨識變數當中存的是什麼，其他人拿到代碼的時候就不會胡亂更改資料類型，這樣保證了代碼的規範和更好的可讀性。一般而言只有變數遵循首碼的規範，而函數則沒有這個必要。
當一個變數或者函數名由多個英文單片語成的時候，我們通常使用駝峰法命名，每個單詞的首字母使用大寫，例如oBtnUserLogin，這種命名方式可以更清晰地判斷變數的含義。
【JavaScript從入門到放棄】JS基礎-01
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
