【javascript基礎】1、基本概念

前言

最近迷茫了一段時間，不知道應該從何處開始學習前端知識，好像這種狀態已經持續了一年了，天天也在看前端的東西，但是記住的多少或者說在腦中一團糟，沒有什么清晰的概念。最近加入了jQuery源碼交流群( 239147101)，雖然有時候在群里不說話，或者在里面扯扯淡，在里面學到了不少知識，群主Aaron是個好人，葉小釵是個牛人，告訴我要堅持寫博客，謝謝群里的哥們們。感覺剛開始寫無從下手，希望以后越來越好，大家盡量給我提意見哈。

PS：239147101群里的學習氛圍特別濃，無論是技術還是人生，吐槽人生，吐槽公司，吐槽12306。最近群里興起了一股學習英語風，拜Aaron所賜，群主天天學英語，如果想提高技術的同時學習英語，那么歡迎大家加入。請大家注意一下，群里的人都是用工作的人，天天都是很忙的，有些簡單的知識自己去網上找找，想要實現的小功能什么的自己多琢磨一下，不要什么問題都在群里問，大家都很忙的，當然一些實在不懂的地方可以請教大家。提問題要理性，大家都是為了進步，記住，提出你無論怎么都搞不定的問題。

基本概念

語法

其實對於學過C語言的同學來說，學習其他語言還是比較容易的，因為C是經典的編程語言，許多后來的語言都是借鑒了C語言的寫法，Javascript同樣也是如此。

區分大小寫

這個很好理解，javascript中一切都是區分大小寫，包括變量，函數名，操作符。例：var a=0和var A=1不是同一個變量。

標識符

標識符就是變量、函數、屬性的名字，這個也和其它的語言差不多。

• 第一個字符必須是字母、數字和下划線或者一個$
• 其它隨便了，數字、字母、下划線、$都行

注釋

同樣是C語言的風格，單行注釋和塊級注釋。

• // 單行注釋以兩個斜杠開頭
• /*
   *塊級注釋一個斜杠和一個星號開頭，一個星號和一個斜杠結尾
   */

語句

ECMAScript的語句是以一個分號結尾的，不寫分號的話，解析器會確定結尾，在這里我們記住必須每一個語句必須以分號結尾就好了，如果想javascript語句具有較好的可讀性的話就用C語言那一套就好了。例如，條件控制語句if，即使后面只有一條語句也要使用花括號。

//不推薦使用
if(b_var)
    console.log(b_var);
//推薦
if(b_var){
    console.log(b_var);
    }

關鍵字和保留字

關鍵字和保留字就是系統自己使用的或者以后可能會使用的有特殊用途的字符，我們不能自己聲明和使用這些標識符了。

關鍵字

保留字

上述的關鍵字和保留字可能不是很全，其實我們也不必記住這些東西，大概知道就行。假如我們真的忘記了這些特殊的標識符，在應用中使用它聲明了變量什么的，記住報什么錯誤，找到它改了就ok了，如果把關鍵字用作變量名或函數名，可能得到諸如 "Identifier Expected"（應該有標識符、期望標識符）這樣的錯誤消息。

例子：chrome   IE  

嚴格模式

除了正常運行模式，ECMAscript 5添加了第二種運行模式：嚴格模式（strict mode），使得Javascript在更嚴格的條件下運行。由於javascript是松散型語言，有些地方肯定沒有嚴格的限制，引入這種模式就是為了使javascript更加的嚴格，規范，安全。使用嚴格模式有兩種方式：

• 要想在整個腳本中啟用嚴格模式，則需要在頂部加上代碼
  

  "use strict";

   

• 要想一個函數在嚴格模式下執行則需在函數內部的頂部加上代碼

  function useStrict(){
    "use strict";
    //函數內容    
  }

   

嚴格模式模式的詳細信息，請看http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

變量

javascript的變量是松散類型的，也就是說一個變量可以存任何類型的數據，這在C語言中是不允許的，《javascript高級程序設計》中說每個變量只是存儲一個值的占位符而已。定義一個變量使用關鍵字var。

//定義變量
var test;
//賦值
test = 1;
//改變test的值
test = 2;
//改變test的類型和值
test = "string";

定義一個變量之后可以隨便更改它的類型和值，但是不推薦這種做法。另外，使用var定義的變量是在所在作用域的局部變量。

//全局變量，全局使用
var global = 1;//等於gloabal = 1，但是不推薦
function test(){
  //局部變量，只能在函數內部使用  
  var inner = 2;  
  //函數內部使用var關鍵字定義變量相當於定義一個局部變量，嚴格模式下會報錯
  outer = 3;
}
test();//函數必須執行，執行之后內部的變量才能被定義
alert(inner);//報錯
alert(outer);//正常

也可以一次定義多個變量，和C語言一樣

var name = "allenxing",
      age = 25,
      sex = "male";

 附加一點前幾天看到的，變量聲明的提前

var y= 1;//定義變量
function test(){
  console.log(y);//訪問局部變量
  var y = 2; //定義一個和全局變量同名的局部變量   
}
test();//輸入undefined

在函數的內定義的變量會提升位置，var y = 2等價於var y; y = 2;定義一個變量無論在什么位置會提升到該變量所在作用域的頂部，而賦值保留在原位置，即 

var y= 1;//定義變量
 function test(){
    var y;//提升位置，此時y為undefined
    console.log(y);//訪問全局變量
    y = 2; //定義一個和全局變量同名的局部變量
    console.log(y);
}
test();//輸出undefined和2

數據類型

javascript中有五種簡單數據類型和一種復雜數據類型Object，這五種簡單類型分別為Undefined，Boolean，Number，String，Null。Array不屬於基本數據類型，Array是這幾種數據類型組合而成的。

typeof

typeof操作符就是檢驗數據類型的，它的返回值是一個字符串，可能為："undefined"，"number"，"boolean"，"string"，"object"，"function"。

var n = 1;
console.log(typeof n);//"number"
var s = "string";
console.log(typeof s);//"string"
var b = true;
console.log(typeof b);//"boolen"
var u = undefined;//或var u;
console.log(typeof u);//"undefined"
var nu = null;//注意
console.log(typeof nu);//"object"
var o = {};
console.log(typeof o);//"object"
function test(){};
console.log(typeof test);//"function"
var nn = new number(1);//new 出來的為object
console.log(typeof nn);//"object"

Undefined

undefined類型比較簡單，一個變量聲明但是未定義時就為undefined，或者顯示的聲明變量的值為undefined。注意，對未聲明的變量執行typeof操作同樣會得到undefined，而對未定義的變量執行除typeof以外的操作會報錯。

var u = undefined;
console.log(u == undefined);//true
var uu;
console.log(uu == undefined);//true
console.log(typeof un);//undefined;
alert(un);//報錯

Null

null是表示一個空對象指針，所以typeof會返回"object"。注意看下面

//undefined派生自null
console.log(undefined == null);//true
//值相等類型不同
console.log(undefined === null);//false

Boolean

Boolean類型主要用在控制語句中，Boolean類型有兩個值true和false，雖然只有兩個值但是其他類型可以轉化為Boolean類型，要通過Boolean()函數進行轉化。

Boolean	true	false
String	非空	""
Number	非零	0   NaN
Undefined	不適用	undefined
Object	非空對象	null

 

Number

Number類型也和C語言中的類型聲明差不多，可以八進制和十六進制的，主要是總結一下數值轉換。

//十進制
var sn = 10;
//八進制
var en = 010;
//十六進制
var sen = 0x10;

注意：不要檢測一個特定的浮點數值，由於浮點數值的存在精度因素。例子：0.2 +0.1等於0.30000000000000004而不是0.3。

數值裝換的規則其實也不用我們死記硬背，其實很多都符合我們的常規想法。空就是0，true就是1，false就是0，null是0，undefined未定義就是NaN，字符串的裝換也很簡單，從左往右依次查找可以轉化的數值，盡可能多的查找，從頭找起就是有多少找多少，如果這個字符串是以非數字的字符串開頭的就為NaN。簡單的說就是：如果第一個是數字字符，則解析第二個，直到遇到一個非數字字符。但是現在不能解析八進制的字符串，會忽視前導零的存在。主要函數是Number()和parseInt()，這兩個函數的作用是一樣的，但是parseInt更合理一些，parse只解析字符串，parseInt會忽略字符串前面的空格，直到第一個非空格字符，這樣parseInt轉換空字符為NaN。

parseInt("123asf");//123
parseInt("");//NaN
parseInt("0xA");//10(十六進制)
parseInt(22.6);//22
parseInt("070");//70
parseInt(true);//NaN
Number(true);//1
Number("");//0

對象轉換數值，則會調用對象的valueOf()方法，轉換該方法的返回值，《javascript高級程序設計》說如果為NaN，則再調用toString()方法，在轉化它的返回值，但是我chrome下測試顯示，如果轉化valudeOf()的返回值為NaN結果就為NaN，沒有重寫valueOf()時，轉換的是toString()的返回值。求大神指導。。。。。。。。

//現在只需直到是個對象，以后會說對象的使用
var obj = {
  val : 1,
  valueOf :function(){
     return this.val;      
  }    
}
console.log(Number(obj));//1

var o = {
  val : "abc",
  valueOf :function(){
     return this.val;      
  },
  toString :function(){
     return  "1"
  }        
}
console.log(Number(o));//NaN

//缺少valueOf()
var ob = {
  val : "abc",
  toString :function(){
     return  "1"
  }        
}
console.log(Number(ob));//1

String

String類型可以用單引號或雙引號表示，沒啥區別。var str = "string",它有一個屬性length，返回字符串的長度,str.length等於6。

String創立之后，字符串的值是不可改變的。要改變必須銷毀原來的字符串，再用新的字符串賦值給這個變量。例如：

var h = "hai";//定義一個字符串
h = h+"nan";
//創建一個“nan”，再創建一個新的字符串容納“hai“和”nan”，這個新的字符串賦值給h，銷毀“hai”和“nan”。

其他變量轉為String類型，每一個類型會有一個toString()方法，除了Null和Undefined。toString()大多數不帶參數，Number類型轉換字符串的時候可以帶參數，表示轉換多少進制。例子：var n = 10;alert(n.toString(2));返回“1010”。

還有一個轉換字符串的String()方法，在不知道是不是Null和Undefined類型的情況下，使用String()方法，變量有toString()方法就調用它。

String(true);//"true"
String(false);//"false"
String(null);//"null"
String(undefined);"undefined"

Object

object是所有對象的基礎，創建一個對象和其他語言差不多，var obj = new Object();每一個object對象實例都會有一些屬性和方法。

• constructor 保存創建當前對象的函數，new 后面的函數
• hasOwnProperty(proname) 檢測當前的實例中是否有proname這個屬性
• isPrototypeOf(obj)  檢測當前對象是否是傳入對象的原型
• toLocalString() 返回當前執行環境對應的字符串
• toString() 返回字符串
• valueOf() 返回對象的字符串，數值或布爾值，通常與toSting()返回值一樣
• propertyIsEnumerable(proname) 檢測proname屬性是否可以被枚舉 

小結

第一次寫這么長的博客，寫的很慢，但是自己在寫的同時真的會很認真的找資料做實驗來得出一些結論，雖然這篇很基礎，但是我對這部分的印象更加的深刻了。路不是一天走出來的，我的博客之旅還很長，希望以后會一點點變好。javascript的基礎我會多寫幾篇博客，給像我一樣的小白一點幫助，大神們就請給我一些指導提出一些意見吧。