前端開發JS——快速入門

1、JS的核心標准ECMAScript

       組成

     ECMAScript------>核心語法標准

     DOM------------->對文檔節點的操作

     BOM------------->對瀏覽器的操作

 

2、JS的注釋：

         單行注釋

               //注釋內容

          多行注釋

               /*

                    注釋內容

               */

 

3、JS的保留字和關鍵字

　　關鍵字：有特殊功能的單詞如：

break	do	try	typeof	case	else
new	var	catch	finally	return	void
continue	for	switch	while	debugger	this
function	with	default	if	throw	instanceof
delete	in

         

　　保留字：將來有可能成為關鍵字的單詞如：

 

abstract	enum	int	short	boolean	export
interface	static	byte	extends	long	super
char	final	native	synchronized	class	float
package	throws	const	goto	private	transient
debugger	double	implements	protected	volatile	import
public

 

4、JS的變量

         聲明：用var聲明變量（變量都是弱類型的）

          var a;

　　　var a = 12；

　　　var a=1, b=2, c=3;　

          變量命名規則：

          1、字母、數字、下划線、$組成

          2、數字、下划線不能開頭（下划線可以開頭，盡量不要使用）

          3、盡量采用駝峰式命名法

          4、不能使用關鍵字和保留字

　　注意：盡量寫完一段語句，在其后面添加分號“ ; "

 

5、數據類型：

　  檢查數據類型的關鍵字：typeof   例如：console.log(typeof a);    //檢查變量a的類型

　  檢查變量是否屬於某一個數據類型：instanceof   例如：console.log(a instanceof object);
     基本數據類型5種
          undefined類型 只有一個值就是undefined值，undefined繼承null
               1）聲明但沒有初始化的變量
                    var a；//a的值是undefined
               2）顯示將undefined值賦值給一個變量
                    var a =undefined；

          null類型 空，一般用來存放一個空對象的指針，就只有一個值null      null==undefined;    //true
               var a = null；

          boolean類型
               有兩個值：true、false
               var a = true；
               var a = false;

          number類型

               var a = 12；

               number類型還有一個值NaN， NaN不能用雙等去判斷，因為任何值與NaN都不會相等，console.log(typeof 1/"str");   //NaN　　

               判斷一個值是不是NaN用isNaN（變量名或者值）方法判斷，他判斷的是不是 不是一個數值
               number類型還有兩個值：Infinity和-Infinity值，判斷數值是否在數值類型范圍內：isFinite()

          string類型(javascript中沒有字符類型的概念）
               var a = "true";

               var a = 'false';

　　　　//打印字符串的長度

　　　　console.log(a.length);   //5

                注：和上面boolean的值和類型都是不相等的

 

     引用類型3種
          object類型   對象
               var a = {}；
               var a = {'name': 'zhangsan'}；

　　　　 console.log(a["name"])
               注：上述的name屬性可以不打引號；類似於python的字典，任意數據都能存儲，訪問方式也類似於python
          array類型    數組    打印的時候會是一個object對象類型
               var arr = [1,2,3,4,5];
               注：類似於python的列表，任意數據都能存儲
          function類型   函數
               function test（）{}

               var test = function（）{}

 

          如果函數（）；在函數定義之前，瀏覽器會自動將函數提升到執行函數的前面

     注：使用沒有聲明過的變量，編輯器會報錯；如果在之后聲明或者賦值只會打印undefined值，就不會報錯如：

            1）console.log(c);    //這里就會報錯；

            2）console.log(c);   //這里就不會報錯，並且打印undefined

                 var c;      

            3）console.log(c);   //這里就會先打印undefined值

                 var c = 1;

                 console.log(c);  //之后再打印1值

                 在JS中變量聲明會提升

6、運算符：

         ==就是判斷值是否相等

         ===就是判斷“值是否相等”和“類型是否相等”

7、JS特點
     1）瀏覽器端執行，node環境執行
     2）解釋性語言
     3）弱類型語言

     4）自上而下執行

 

8、運算符

     1） 操作運算符   +、-、*、/、%，和Java、python等高級語言的使用相同

 

     2） 一元運算符   ++、--，也是和Java語言的使用相同，包含前自增/減（先做運算再使用）、后自增/減（先使用再做運算）
     +/-，可以將其他類型轉換成number類型

     console.log(+'123');            //輸出123      -'123'輸出-123, -'-123'輸出123

     console.log(+true);             //輸出1

     console.log(+false);            //輸出0

     console.log(+null);             //輸出0           -null輸出-0

     console.log(+undefined);   //輸出NaN

     console.log(+'');                 //輸出0

     console.log(+' ');                //輸出0

 

     3） 賦值運算符   =、+=、-=、*=、/=、%=
          var a = 2;
          var a += 2;   //a=a+2
         其他運算符和這個很類似

     4) 比較運算符
          1 == ‘1’          //true
          true == ‘true’  //false
          1 == true            //true   
          0 == null           //false         
          注：只有null和null相等的，undefined和undefined相等的 undefined == null值為true，這三者才為true
                 
     總結：number和string看起來一樣就為true；
               boolean轉換為number一樣，就為true；（true -> 1，false -> 0）
          如果進行運算boolean類型根據上述轉換，再和number值運算
               string和boolean，即使看起來一樣，也為false；
    
     5） 邏輯運算符   （表示false的值有null、NaN、undefined、false、0、“”）

     總結：邏輯與和邏輯或的返回值都是跳出判斷的值，即哪個操作跳出來就返回哪個操作數

 

     非！（NOT） 可以將任何類型的數據轉換成boolean類型

     !!a可以看成Boolean(a),  boolean類型包裝器

    

      6） 三目運算符  （variable = boolean_expression ? true_value : false_value;）

          可以簡化if···else···語句

　　

　　7)兩者運算 m+n

　　　1、當m,n不為String,Object類型的時候，先將m,n轉換為Number類型，轉換Number類型可以參考類型轉換知識點，然后再進行計算

　　　2、當m,n有一個為String,無論另一個操作數為何（但不為對象）都要轉換為String，然后再進行拼接 

　　　3、當m,n 有一個為對象，如果該對象既重寫toString,又重寫了valueOf方法，先調用valueOf方法獲 取返回值，將該返回值和另外一個操作數進行運算。如果該對象沒有重寫valueOf方法，將調用 toString方法獲取返回值，將該返回值和另外一個操作數進行運算。 在打印對象時alert(obj)默認是調用toString()方法,console.log(obj)默認是調用valueOf()方法

//對象相加
var obj = {
    "name": "zhangsan",
    "age": 20,
    toString: function(){
        return "this is a obj"
    },
    valueOf: function(){
        return "this is a func"
    }
}
var c = "str"
console.log(obj);
console.log(c+obj);   //strthis is a func
alert(obj);      //this is a obj

 

 

9、類型轉換

　　假性值：表示false的值有 null、NaN、undefined、false、0、“”，這個尤為重要
     1） 其他類型轉換string類型：
          ①toString（）函數   另外null、undefined不能轉換，其他類型都能
               var a = 12;
               a.toString();    //'12'，如果括號里有數字，就需要按照這個數字的進制來轉換，例如　　a.toString(8);    //"14"
               注：number類型的具體值不可以直接調用toString（）方法，但可以用括號括起來使用，括號括起來的是大類型數據，基礎數據類型沒有屬性和方法
          ②String()函數 任意類型都能轉換
          ③字符串的拼接+

     2） 其他類型轉換Boolean類型 
          ①Boolean()函數 任意類型都可轉換
               假性值都為false，其他的值都為true
          ②非！（NOT） 可以將任何類型的數據轉換成boolean類型
          !!a可以看成Boolean（a),boolean類型包裝器

     3） 其他類型轉換number類型  
          ①Number（）函數（不解析八進制，可以解析十六進制）轉換規則如下：

　　　　假性值當中只有undefined是轉換NaN，其他的都轉換0

　　　　字符串的字面值為數字的，就直接轉換，或者其前面有加號”+“，都可以直接轉換

　　　　其他的都轉換NaN
          ②parseInt()函數（不解析八進制，可以解析十六進制）    //如果有兩個參數，第一個參數是第二個參數進制的表示，例如　　console.log(parseInt("1010", 2));   //10

                   如果第一個字符不是數字或者不是加號和減號，parseInt() 就會返回NaN，同樣的，用parseInt() 轉換空字符串也會返回NaN。

                   如果首位為數值，依次向后解析，找到連續的數值，直到遇到第一個非數值的，將之前獲取的數值轉換為Number返回

          ③parseFloat()函數（不解析八進制，也不解析十六進制）
               如果首位為數值，依次向后解析，找到連續的數值，直到遇到第一個非數值的，將之前獲取的數值轉換為Number返回

          注：parseFloat() 所解析的字符串中第一個小數點是有效的，而parseInt() 遇到小數點會停止解析，因為小數點並不是有效的數字字符。
          parseInt和parseFloat都將null、undefined、boolean解析為NaN

注：console.log()會返回一個值里面包含的所有空格，但是返回到頁面上就不會解析連續的空格

     4） + 自動類型轉換