JavaScript初學者應該瞭解的一些事

時間  2019-12-05
標籤 javascript 初學者 應該 瞭解 一些 欄目 JavaScript 简体版
原文   原文鏈接
做爲javascript初學者，你應該瞭解這些 (如下js表示javascript的簡稱)   你們都知道在開發服務器端程序或者桌面版程序中，你能夠選擇你喜歡的開發語言以及開發框架。而後在基於瀏覽器的客戶端開發中，你不得不使用使人惱火的javascript。好消息是若是你實在不喜歡javascript的話，你可使用其餘語言開發後編譯成javascript，好比   Script#,   WebSharper,   Dart,   CoffeeScript,   ClojureScript,   Opa等等。但不管如何，javascript依然是web開發的通用語言工具，也就意味着，若是你想作一個基於web的應用，那麼你不得不或多或少去學學javascript。

  這篇文章中，我將介紹一下javascript最重要的一些關鍵點。固然你學習的前提你本身還必須是一個有經驗的程序員以及一點點去學習js的意願，並且雖然這篇文章主要是針對C#以及JAVA開發者來教學的，但若是你習慣了你同樣會學到不少有用的東西。

Javascript的語言家族
  顧名思義，javascript這個名稱表示它是基於java的,和java差很少的類C語言,然而，javascrip並不屬於類C語言家族，它其實是Java,Scheme,Perl以及它本身的混合衍生物。

  膚淺的去看，你應該能立刻習慣javascript，由於它的語法與java很相像，也有分支結構括號，分號以及if-for-while-do-switch-throw-catch-finally關鍵字，我想已經適應了C#/Java的你確定會喜歡。

動態類型
  與C#/Java的靜態類型語言不一樣，JS是動態類型的，也就是說JS變量可以任意改變它的類型，並且你也沒法爲方法去定義明確的返回類型，以下面的代碼段這是典型的靜態類型語言
1 intx = 5;
2 x ="hello";

若是咱們立刻編譯代碼的話，顯然會拋出一個TypeError的異常。但JS卻不會，哪怕變量的類型都改變了。
1 varx = 5;
2 x ="hello";

由於在JS中，變量的類型自己就是能夠改變的，編譯器根本不知道這些變量將表明什麼，因此你也別對JS的編譯器抱太多指望，由於編譯時檢錯有點垃圾以致於你必須更多地在程序運行時進行更多的測試來找出潛在的BUG。

弱類型
JS也是弱類型語言，意味着JS能夠爲變量作任何的隱形類型轉換，這樣你們可要當心了。在強類型語言中，編譯器會進行檢錯看可否進行轉換。好比代碼2+"3"將會提示錯誤。然而在JS將會直接將數字轉換成字符串，或者bool變量，空數組轉換成數字，甚至其餘什麼東西轉換成bool變量。。。這一切都是你沒法預見的。

  雖然弱類型會產生不少你沒法預料的結果。但依然有兩個很是重要的關鍵點咱們必須去記住：
  第一，JS有 == 操做符，你也許會覺得這個與其餘語言的 == 操做符一個意思，但很不幸的是它不是，若是兩個不一樣類型的變量進行 == 操做符比較的話，JS將會嘗試轉換它們的類型爲一致，而後才進行等值判斷。因此請注意下面的代碼，這些代碼在JS中是確定返回true的。
1 123 =="123"
2 true== 1
3 false=="0"
4 [] ==""
5 {} =="[object Object]"

不過，幸運的是，JS仍是有嚴格的等值判斷操做符的 === 與 !==，若是兩個變量類型不一致的話，=== 是確定會返回false的，因此你如今應該知道在關鍵場合你應該使用什麼等值判斷操做符了吧！

  第二，JS將老是將 if 語句的表達式轉換成bool值，如下這些代碼在if判斷語句中將會被認爲是false。
1 false
2 null
3 undefined
4 0
5 ""
6 NaN

請記住除此之外，任何其餘類型的表達式在JS中都被認爲是true。

數據類型
  請牢記，JS只包含一種數據類型，這種數據類型與你熟悉語言的double幾乎是同樣的，由於整數若是進行除法運算的話，可能運算結果會與你的預期有出入。同時也請牢記在JS中的數據位移以及位運算比較都是很消耗資源的運算，由於運算前必須先將double轉換成整數，運算後再將整數從新轉換爲double

數組
  在JS中只存在於一種數組，咱們稱爲arrays，當你想使用相似其餘語言的lists,arrays,vectors,sets或者tuples時，arrays是你惟一的選擇，注意array的容量大小是可動態改變的，並且數組的每個元素也能夠是不一樣的類型。
  你能夠像這樣聲明一個數組：
1 vararray1 = [];//empty array
2 vararray2 = [1,"hello",null, ["bye", 0]];//array with stuff in it

看上去確實很簡單，但我仍是要建議你參考   array functions in Javascript 去了解更多關於JS中的數組用法。

對象
  由於對象的多變性，對象在JS中能夠說是最有特性的元素了，JS裏的對象相似一個關聯的字典集合，在左邊你能看到字典的關鍵詞，與之對應在右邊你能看到該關鍵詞對應的值，這個值甚至是其餘對象或者一個方法。

  在JAVA/C#中，你確定要使用大量的類，但在JS中，你能夠更簡潔地使用對象完成一樣的目的。

  好比這是一個Person類
1 classPerson
2 {
3     publicstringname ="John";
4     publicintage = 25;
5     publicstringoccupation ="programmer";
6 }

在JS中，你可使用對象完成一樣的任務
1 varperson = {
2   name:"John",
3   age: 25,
4   occupation:"programmer"
5 };

但若是你要實現更加複雜的類呢？好比有構造方法，私有字段以及方法的時候你該怎麼作呢？
01 classPerson
02 {
03     privatestringname;
04     privateintage;
05     privatestringoccupation;
06  
07     publicPerson(stringname,intage,stringoccupation)
08     {
09         this.name = name;
10         this.age = age;
11         this.occupation = occupation;
12     }
13  
14     publicstringGetDescription()
15     {
16         returnname +" is a "+ age +" year old person that earns money as a "+ occupation +".";
17     }
18 }
好比如今你能夠實例化一個Person而後獲取他的描述
1 Person John =newPerson("John", 25,"programmer");
2 stringbiographyOfJohn = John.GetDescription();

在JS中沒有類而只有簡潔的對象。咱們這裏看看如何使用對象來完成上面的功能：
01 functionPerson(name, age, occupation) {
02     return{
03       name: name,
04       age: age,
05       occupation: occupation,
06       getDescription:function() {
07         returnname +" is a "+ age +" year old person that earns money as a "+ occupation +".";
08       }
09     };
10 }

如今，你也能夠經過下面的代碼來初始化一個Person而後也獲取他的描述了
1 varJohn = Person("John", 25,"programmer");
2 varbiographyOfJohn = John.getDescription();

方法
JS的方法與C#/JAVA是不同的，C#/JAVA的方法是直接屬於類的，你能夠爲某個方法分配變量，傳遞參數，獲取方法的返回值或者之際將方法做爲數組的元素以及對象的某個值。

  在JS中，有兩種定義方法的標準語法：
1 functionname(arguments) {
2   //function body
3   returnreturnValue;
4 }
或  
1 varname =function(arguments) {
2   //function body
3   returnreturnValue;
4 }
這兩個不一樣語法的惟一區別就是第一個將自動將本身置於程序的全局，這樣你可以在定義方法的代碼前就能直接調用該方法 (   Read more about hoisting in Javascript) 而若是你使用第二個語法規格的話，你必須在調用方法前事先定義方法。

範圍
JS只針對方法纔有可以使用的範圍限制，顯然這與C#/JAVA的塊區域是不同的，因此若是你寫下以下代碼你可能會碰到一些問題
1 varx = 45;
2 if(condition) {
3   varx = 35;
4 }

經過使用塊，你指望x只是這個塊的局部變量而不會影響到外面的同名變量x。可是在JS中，內部的x是會改變外部的同名變量x的。
  不過不用擔憂，代碼質量檢測工具(   JSHint)可以找出這些問題並提醒你。

全局變量
  請儘可能確保你使用'var'關鍵字來定義變量，若是不這麼作的話，JS將自動認定這些變量就是全局變量。而這將會致使不少很難檢測出來的BUG。
1 varglobalVar ="global variable";
2 otherGlobalVar ="other global variable";
3   
4 functiondoStuff() {
5   alsoGlobal ="unfortunately, this is also a global variable";
6 }
上面示例中，全部變量都是定義爲全局變量的，globalVar正常， otherGlobalVar就是一個很差定義方式的典型，而 alsoGlobal這種定義方式顯然是一個更糟糕的方式，這將致使出沒法預測的BUG。
  再囉嗦一句，請確保使用   JSHint，能夠爲你省很多事！

  文檔對象模型
DOM(文檔對象模型)不算是JS獨有的東西，但對於JS與網頁通訊是很是重要的，但悲劇的是爲了在不一樣的瀏覽器下正常工做，你可能要作很是煩人的工做，通常狀況下我就直接建議你使用DOM抽象框架   jQuery.

總結：
  我能確信你確定在開發過程當中會碰到更多的JS各個方面的問題，但我但願這篇文章能儘可能的講述到其中大量的典型問題，若是你打算好好研究JS的話，這裏有幾個很是好的站點值得你去取經：
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程