JavaScript基礎篇

本章內容:javascript

  • 簡介
    1. 定義
    2. 註釋
    3. 引入文件
  • 變量
  • 運算符
    1. 算術運算符
    2. 比較運算符
    3. 邏輯運算符
  • 數據類型
    1. 數字
    2. 字符串
    3. 布爾類型
    4. 數組
    5. Math
  • 語句
    1. 條件語句(if、switch)
    2. 循環語句(for、for in、while、do-while)
    3. label語句
    4. 異常處理
  • 函數
    1. 定義函數3種方式
    2. 函數參數(arguments)
    3. 做用域與做用鏈
    4. 閉包
    5. 面向對象(特性,構造模式,原型模式prototype)
    6. prototype 驗證方法(isPrototypeOf、hasOwnProperty、in)
  • 其它
    1. 序列化
    2. 轉義
    3. eval
    4. 正則表達式
    5. 時間處理

 

簡介

定義

  javascript是一門動態弱類型的解釋型編程語言,加強頁面動態效果,實現頁面與用戶之間的實時動態的交互。html

  javascript是由三部分組成:ECMAScript、DOM、BOMjava

  • ECMAScript由ECMA-262定義,提供核心語言功能(ECMA是歐洲計算機制造商協會)
  • DOM(Document Object Model)文檔對象模型,提供訪問和操做網頁內容的方法和接口
  • BOM(Browser Object Model)瀏覽器對象模型,提供與瀏覽器交互的方法和接口

 

註釋

JavaScript中代碼註釋:python

  • 單行 //
  • 多行 /*  */

 

引入文件

1. 引入外部文件正則表達式

<script type="text/javascript" src="JS文件"></script>

 

2. 存放在HTML的<head>或<body>中編程

<script type="text/javascript">
    Js代碼內容
</script> 
  • HTML的head中
  • HTML的body代碼塊底部(推薦)

 

3. 爲何要放在<body>代碼塊底部?數組

  • HTML代碼從上到下執行,先加載CSS,避免html出現無樣式狀態;
  • 將JavaScript代碼塊放在<body>最後,可讓網頁儘快的呈現給用戶,減小瀏覽者的等待時間,避免由於JS代碼塊阻塞網頁的呈現。

 

變量

須要注意的是:局部變量必須以 var 開頭申明,若是不寫 var 則爲全局變量瀏覽器

<script type="text/javascript">
 
    // 全局變量
    name = 'nick';
 
    function func(){
        // 局部變量
        var age = 18;
 
        // 全局變量
        gender = "man"
    }
</script>

注:須要注意變量提高,就是把變量位置放到函數體的最上方  閉包

 

運算符

1. 算術運算符dom

一元算術
    +  一元加,數值不會產生影響 對非數值應用一元加運算時,會調用Number()轉型函數對這個值進行轉換
    -  一元減,轉換爲負數 ~
    ++  遞增1 經過Number()轉型爲數字,再加1,再從新賦值給操做數值
    -- 遞減1 ~
二元算術
    +  加法  
    -  減法  
    *  乘法  
    /  除法  
    %  取模  

 

1> 若是其中一個操做數是對象,則對象會轉換爲原始值:日期對象經過toString()方法執行轉換,其餘對象經過valueOf()方法執行轉換。若是結果還不是原始值,則再使用toString()方法轉換
2> 在進行了對象到原始值的轉換後,若是其中一個操做數是字符串的話,另外一個操做數也會轉換成字符串,進行字符串拼接
3> 兩個操做數都將轉換成數字或NaN,進行加法操做
二元運算過程

 

2. 比較運算符

  ===  嚴格運算符 比較過程沒有任何類型轉換
  !==  嚴格運算符 ===的結果取反
  ==  相等運算符 若是兩個操做值不是同一類型,相等運算符會嘗試進行一些類型轉換,而後再進行比較
  !=  不相等運算符 ==的結果取反
  >  大於運算符  
  >=  大於等於運算符  
  <  小於運算符  
  <=  小於等於運算符  

 

1> 若是兩個值類型不一樣則返回false
2> 若是兩個值類型相同,值相同,則返回true,不然返回false
3> 若是兩個值引用同一個對象,則返回true,不然,返回false
console.log([] === []);//false
console.log({} === {});//false
var a = {};
b = a;
console.log(a === b);//true
嚴格運算符比較過程
對象類型和原始類型比較:
1> 對象類型會先使用valueOf()轉換成原始值,若是結果還不是原始值,則再使用toString()方法轉換,再進行比較(日期類只容許使用toString()方法轉換爲字符串)
2> 在對象轉換爲原始值以後,若是兩個操做數都是字符串,則進行字符串的比較
3> 在對象轉換爲原始值以後,若是至少有一個操做數不是字符串,則兩個操做數都將經過Number()轉型函數轉換成數字進行數值比較

注:若是一個值是null,另外一個值是undefined,則返回true;
console.log(null == undefined);//true
若是一個值是null,另外一個值是0,則返回tfalse;
console.log(null == 0);//false
空字符串或空格字符串會轉成0
console.log(null == []);//false
console.log(null == '');//false
console.log([] == ' ');//false,至關於'' == ' '
console.log([] == '');//true,至關於'' == ''
console.log(0 == '');//true
相等運算符比較過程
數字和字符串比較:
1> 若是操做值是對象,則這個對象將先使用valueOf()轉換成原始值,若是結果還不是原始值,則再使用toString()方法轉換
2> 在對象轉換爲原始值以後,若是兩個操做數都是字符串,則按照unicode字符的索引順序對兩個字符串進行比較
3> 在對象轉換爲原始值以後,若是至少有一個操做數不是字符串,則兩個操做數都轉換成數字進行比較
console.log('B' > 'a');//false
console.log('b' > 'a');//true
console.log(9 > '2');//true
大於小於運算符比較過程

 

3. 邏輯運算符

    !  非(兩個!!表示Boolean()轉型函數)

返回一個布爾值
    &&  與 兩個操做都爲true時返回true,不然返回false(返回值不必定是布爾值),能夠多個連用(..&&..&&..)
    ||  或 兩個操做都是false時返回false,不然返回true(返回值不必定是布爾值),能夠多個連用(..||..||..)

 

//七個假值:
console.log(!!undefined);//false
console.log(!!null);//false
console.log(!!0);//false
console.log(!!-0);//false
console.log(!!NaN);//false
console.log(!!'');//false
console.log(!!false);//false

console.log(!!{});//true
console.log(!![]);//true
1> 取代if語句
//前面條件成立則運行後面操做
(a == b) && dosomething();

2> 用於回調函數
//若沒有給參數a傳值,則a默認爲undefined假值,因此不執行a()。
function fn(a){
    a && a();
}
&& 經常使用操做
1> 變量設置爲默認值
//若是沒有向參數a傳入任何參數,則將該參數設置爲空對象
function func(a){
    a = a || {};
}
|| 經常使用操做

  

數據類型

特殊值:

  • null     表示一個空對象指針,經常使用來描述"空值";
  • undefined  表示變量未定義。

 

一、數字(Number)

JavaScript中不區分整數和浮點數,全部數字均用浮點數值表示。

轉換:

  • parseInt(..)    將某值轉換成整數,不成功則NaN
  • parseFloat(..) 將某值轉換成浮點數,不成功則NaN

特殊值:

  •  NaN,非數字。可使用 isNaN(num) 來判斷。
  • Infinity,無窮大。可使用 isFinite(num) 來判斷。
Number 對數字的支持
Number.MAX_VALUE 最大數值
Number.MIN_VALUE 最小數值
Number.NaN 非數字
Number.NEGATIVE_INFINITY 負無窮大
Number.POSITIVE_INFINITY 正無窮大
Number.toExponential( ) 返回四捨五入的科學計數法,加參數爲保留幾位
Number.toFixed( ) 小數點後面的數字四捨五入,加參數爲保留幾位
Number.toPrecision( ) 四捨五入,自動調用toFixed()或toExponential()
Number.toLocaleString( ) 把數字轉換成本地格式的字符串
Number.toString( ) 將數字轉換成字符串
Number.valueOf( ) 返回原始數值

 

二、字符串(String)

String.length 字符串的長度
String.trim() 移除空白
String.trimLeft() 移除左側空白
String.trimRight() 移除右側空白
String.concat(value, ...) 拼接
String.slice(start, end) 切片
String.split( ) 分割
String.search( ) 從頭開始匹配,返回匹配成功的第一個位置(g無效)
String.match( ) 全局搜索,若是正則中有g表示找到所有,不然只找到第一個
String.replace( ) 替換,正則中有g則替換全部,不然只替換第一個匹配項;
$數字:匹配的第n個組內容;
$&:當前匹配的內容;
$`:位於匹配子串左側的文本;
$':位於匹配子串右側的文本
$$:直接量$符號
String.charAt( ) 返回字符串中的第n個字符
String.charCodeAt( ) 返回字符串中的第n個字符的代碼
String.fromCharCode( ) 從字符編碼建立—個字符串
String.indexOf( ) 查找子字符串位置
String.lastIndexOf( ) 查找子字符串位置
String.localeCompare( ) 用本地特定的順序來比較兩個字符串
String.substr( ) 抽取一個子串
String.substring( ) 返回字符串的一個子串
String.toLocaleLowerCase( ) 把字符串轉換小寫(針對地區,在不知道程序在哪一個語言環境中運行時用)
String.toLocaleUpperCase( ) 將字符串轉換成大寫(針對地區)
String.toLowerCase( ) 小寫
String.toUpperCase( ) 大寫
String.toString( ) 返回原始字符串值
String.toString() 返回原始字符串值
String.valueOf( ) 返回原始字符串值
\0 空字節
\n 換行
\t 製表
\b 空格
\r 回車
\f 進紙
\\ 斜槓
\' 單引號
\" 雙引號
轉義字符

 

三、布爾類型(Boolean)

true(真)和false(假)

toString() 返回Boolean的字符串值('true'或'false')
toLocaleString() 返回Boolean的字符串值('true'或'false')
valueOf() 返回Boolean的原始布爾值(true或false)

 

四、數組(Array)

        var name = Array("nick","jenny");
        var name = ["nick","jenny"];

  

Array.length 數組的大小
Array.push() 尾部添加元素
Array.pop() 刪除並返回數組的最後一個元素
Array.unshift() 在數組頭部插入一個元素
Array.shift( ) 在數組頭部移除一個元素
Array.slice( ) 切片
Array.reverse( ) 反轉
Array.join( ) 將數組元素鏈接起來以構建一個字符串
Array.concat( ) 拼接
Array.sort( ) 排序
Array 對數組的內部支持
Array.splice( start, deleteCount, value, ...)

插入、刪除或替換數組的元素

obj.splice(n, 0 ,val) 指定位置插入元素
obj.splice(n, 1 ,val) 指定位置替換元素
obj.splice(n, 1 )    指定位置刪除元素
Array.toLocaleString( ) 把數組轉換成局部字符串
Array.toString( ) 將數組轉換成一個字符串

 

5. Math

 Math對象是一個靜態對象,而不是構造函數。實際上,Math只是一個由Javascript設置的對象命名空間,用於存儲數學函數

 做用是執行普通的算數任務。

常量

Math.E
常量e,天然對數的底數。

Math.LN10
10的天然對數。

Math.LN2
2的天然對數。

Math.LOG10E
以10爲底的e的對數。

Math.LOG2E
以2爲底的e的對數。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

靜態函數

Math.abs( )
計算絕對值。

Math.acos( )
計算反餘弦值。

Math.asin( )
計算反正弦值。

Math.atan( )
計算反正切值。

Math.atan2( )
計算從X軸到一個點的角度。

Math.ceil( )
對一個數上舍入。

Math.cos( )
計算餘弦值。

Math.exp( )
計算e的指數。

Math.floor( )
對一個數下舍人。

Math.log( )
計算天然對數。

Math.max( )
返回兩個數中較大的一個。

Math.min( )
返回兩個數中較小的一個。

Math.pow( )
計算xy。

Math.random( )
計算一個隨機數。

Math.round( )
舍入爲最接近的整數。

Math.sin( )
計算正弦值。

Math.sqrt( )
計算平方根。

Math.tan( )
計算正切值。
Math 方法

 

 

語句

 

一、條件語句

JavaScript中支持兩個條件語句,分別是:if 和 switch。

 if 語句:

//if語句

if(條件){
 
    }else if(條件){
         
    }else{
 
    }

Switch 語句:

//switch語句,name等於nick是執行第一個case,等於第二個執行第二個case,其它執行default.

switch(name){
        case 'nick':
            age = 18;
            break;
        case 'jenny':
            age = 21;
            break;
        default :
            age = 0;
    }

  

 二、循環語句

JavaScript中支持四種循環語句,分別是:for、for in、while、do-while

for 循環:

var names = ["nick", "jenny"];
 
for(var i=0;i<names.length;i++){
    console.log(i);    //索引
    console.log(names[i]);
}

for in 循環:

var names = ["nick", "jenny"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

while 循環: 

while(條件){
    // break;
    // continue;
}

do-while 循環:

//循環的代碼至少執行一次,結果爲1

        var num = 0;
        do {
            num++;
        }while (num>10);

  

 3. label語句

label 語句能夠理解爲跳出任意循環

//輸出結果爲95

    <script>
        var num = 0;
        for (var i=0;i<10;i++) {
            for (var j=0;j<10;j++) {
                if (i==5 && j==5) {
                    break;
                }
                num++;
            }
        }
        console.log(num);
    </script>
未加label實例
//輸出結果爲55
//i和j都循環爲到5時,跳出了兩層循環

    <script>
        var num = 0;
        outPoint:
        for (var i=0;i<10;i++) {
            for (var j=0;j<10;j++) {
                if (i==5 && j==5) {
                    break outPoint;
                }
                num++;
            }
        }
        console.log(num);
    </script>
加label實例

 

4. 異常處理

主動跑出異常 throw Error('xxxx')

try {
    //這段代碼從上往下運行,其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 若是try代碼塊中拋出了異常,catch代碼塊中的代碼就會被執行。
    //e是一個局部變量,用來指向Error對象或者其餘拋出的對象
}
finally {
     //不管上述代碼怎麼,finally代碼塊始終會執行
}

 

 

函數Function

 

函數定義的三種方式

// 普通函數
    function func(arg){
        return true;
    }
          
// 匿名函數
    var func = function(arg){
        return "nick";
    }
  
// 自執行函數
    (function(arg){
        console.log(arg);
    })('nick')

  

函數參數:

函數傳參的個數能夠小於實際需傳參的個數,沒傳參的默認爲undefined

參數傳多默認不起做用

        function man(name,age) {
            console.log(name,age);
        }
        man("nick",18); //nick 18
        man("nick");    //nick undefined
        man("nick",18,19);  //nick 18

arguments 可接收全部參數,返回一個數組

        function man() {
            console.log(arguments);
        }
        man("nick",18); //["nick", 18]
        man("nick");    //["nick"]
        man("nick",18,19);  //["nick", 18, 19]

  

 函數的做用域與做用域鏈:

 JavaScript中沒有塊級做用域

        var name = 'nick';
        (function Main(){
            console.log(name);//undefined
            if(1){
                var name = 'jenny';
            }
            console.log(name);//jenny
        })();
        console.log(name);//nick

//輸出結果第一個爲undefined
//聲明需提早(Hoisting),在JavaScript引擎「預編譯」時進行,函數在被執行以前,會將其中的變量所有聲明,而不賦值

做用域鏈

每一個構造函數都有一個內部對象指針,指向原型對象,而原型對象也包含一個指向構造函數的指針。如此層層遞進,造成做用域鏈條

        var name = 'nick';
        function Main() {
            function F1(){
                var name = 'jenny';
                console.log(name);//jenny
            }
            function F2() {
                console.log(name);//nick
            }
            F1();
            F2();
        }
        Main();

// 從內到外的優先級尋找
// F2() 的做用域鏈爲 F2()-->Main()

  

 閉包:

閉包就是可以讀取其餘函數內部變量的函數。

        function f1(){
        var n=1;
        Add=function(){
                    n++;
                };
        function f2(){
         console.log(n);
        }
        return f2;
        }
      var result=f1();
      result(); //1
      Add();
      result(); //2

//result就是閉包f2函數
//函數f1中的局部變量n一直保存在內存中,並無在f1調用後被自動清除

閉包使函數中的變量都被保存在內存中,內存消耗大,因此少用閉包,不然會形成網頁的性能低,在IE中可能致使內存泄露。

因此在退出函數以前,將不使用的局部變量所有刪除。

 

 面向對象

 面向對象的三大特性:
  封裝:隱藏代碼實現的細節,實現代碼的模塊化
  繼承:擴展已經存在的代碼模塊,實現代碼重用
  多態:接口的不一樣實現方式,實現接口重用

 關鍵字:

    this  代指此時的對象

    new  建立對象時必須使用

 

構造函數模式:

            function Foo (name,age) {
                this.Name = name;
                this.age = age;
                this.Func = function () {
                    return this.Name + this.age
                }
            }
            var obj = new Foo("nick",18);
            var ret = obj.Func();
            console.log(ret);
            var obj2 = new Foo("jenny",21);

上述模式把一樣的函數封裝到了不一樣對象,形成了內存浪費。

 

原型模式(prototype):

            function Foo(name,age) {
                this.Name = name;
                this.Age = age;
            }
            Foo.prototype = {
                GetInfo: function () {
                    var str = " is good";
                    return this.Name + str;
                },
                Func: function () {
                    return this.Name + this.Age;
                }
            };
            var obj = new Foo("nick",18);
            console.log(obj.Name);//nick
            console.log(obj.Age);//18
            var ret = obj.GetInfo();
            console.log(ret);//nick is good
            var ret2 = obj.Func();
            console.log(ret2);//nick18
            var obj2 = new Foo("nick",18);

全部的構造函數的prototype屬性都指向另外一個對象(同一塊內存地址),這個對象的全部屬性和方法,都會被構造函數的實例繼承。

 

 

 Prototype模式的驗證方法

 

1.  isPrototypeOf() 

用來判斷一個對象是否存在於另外一個對象的原型鏈中

Foo.prototype.isPrototypeOf(obj)
true
Foo.prototype.isPrototypeOf(obj2)
true

  

 2.  hasOwnProperty()

 用來判斷某一個對象(不包括原型鏈)是否具備指定屬性。

obj.hasOwnProperty('Name')
true
obj.hasOwnProperty('Age')
true

  

 3. in運算符

 判斷某個實例是否具備某個屬性

'Name' in obj
true
'Age' in obj
true

  

 

 其它

 

一、序列化

  • JSON.stringify(obj)   序列化
  • JSON.parse(str)        反序列化

二、轉義

  • decodeURI( )                   URl中未轉義的字符
  • decodeURIComponent( )   URI組件中的未轉義字符
  • encodeURI( )                   URI中的轉義字符
  • encodeURIComponent( )   轉義URI組件中的字符
  • escape( )                         對字符串轉義
  • unescape( )                     給轉義字符串解碼
  • URIError                         由URl的編碼和解碼方法拋出

三、eval

JavaScript中的eval既能夠運行代碼也能夠獲取返回值

a = eval('1+1');
console.log(a); //2
  • eval() 
  • EvalError   執行字符串中的JavaScript代碼

四、正則表達式

var p = /nick/g;
console.log(p.test('nickjennynick')); // true
console.log(p.exec('nickjennynick')); // ["nick", index: 0, input: "nickjennynick"]

JavaScript中支持正則表達式,其主要提供了兩個功能:

  • test(string)     用於檢測正則是否匹配
  • exec(string)    用於獲取正則匹配的內容

匹配模式:

  g:表示全局(global)模式,匹配全部字符串,不會匹配到第一項時中止

  i:表示不區分大小寫(case-insensitive)模式

  m:表示多行(multiline)模式,到達一行文本末尾時還會繼續查找下一行中是否存在匹配的項

括號分組:

console.log(/(n)(i)ck/.exec('nickjenny')); // console.log(/(n)(i)ck/.exec('nickjenny'))
console.log(/(n)(i)ck{2}/.exec('nickkjenny')); // ["nickk", "n", "i", index: 0, input: "nickkjenny"]
元字符         名稱              匹配對象
.             點號              單個任意字符(除回車\r、換行\n、行分隔符\u2028和段分隔符\u2029外)
[]            字符組             列出的單個任意字符
[^]           排除型字符組        未列出的單個任意字符
?             問號               匹配0次或1次
*             星號               匹配0交或屢次
+             加號               匹配1次或屢次
{min,max}     區間量詞           匹配至少min次,最多max次
^             脫字符             行的起始位置
$             美圓符             行的結束位置
|             豎線               分隔兩邊的任意一個表達式
()            括號               限制多選結構的範圍,標註量詞做用的元素,爲反向引用捕獲文本
\1,\2...      反向引用            匹配以前的第1、第二...組括號內的表達式匹配的文本
元字符
\d     數字,等同於[0-9]
\D     非數字,等同於[^0-9]
\s     空白字符
\S     非空白字符
\w     字母、數字、下劃線,等同於[0-9A-Za-z_](漢字不屬於\w)
\W     非字母、數字、下劃線,等同於[^0-9A-Za-z_]
匹配規則簡寫

 

五、時間處理

時間操做中有兩種時間:

  • 時間統一時間
  • 本地時間(東8區)
Date    操做日期和時間的對象
Date.getDate( )    返回一個月中的某一天
Date.getDay( )    返回一週中的某一天
Date.getFullYear( )    返回Date對象的年份字段
Date.getHours( )    返回Date對象的小時字段
Date.getMilliseconds( )    返回Date對象的毫秒字段
Date.getMinutes( )    返回Date對象的分鐘字段
Date.getMonth( )    返回Date對象的月份字段
Date.getSeconds( )    返回Date對象的秒字段
Date.getTime( )    返回Date對象的毫秒錶示
Date.getTimezoneOffset( )    判斷與GMT的時間差
Date.getUTCDate( )    返回該天是一個月的哪一天(世界時)
Date.getUTCDay( )    返回該天是星期幾(世界時)
Date.getUTCFullYear( )    返回年份(世界時)
Date.getUTCHours( )    返回Date對象的小時字段(世界時)
Date.getUTCMilliseconds( )    返回Date對象的毫秒字段(世界時)
Date.getUTCMinutes( )    返回Date對象的分鐘字段(世界時)
Date.getUTCMonth( )    返回Date對象的月份(世界時)
Date.getUTCSeconds( )    返回Date對象的秒字段(世界時)
Date.getYear( )    返回Date對象的年份字段(世界時)
Date.parse( )    解析日期/時間字符串
Date.setDate( )    設置一個月的某一天
Date.setFullYear( )    設置年份,也能夠設置月份和天
Date.setHours( )    設置Date對象的小時字段、分鐘字段、秒字段和毫秒字段
Date.setMilliseconds( )    設置Date對象的毫秒字段
Date.setMinutes( )    設置Date對象的分鐘字段和秒字段
Date.setMonth( )    設置Date對象的月份字段和天字段
Date.setSeconds( )    設置Date對象的秒字段和毫秒字段
Date.setTime( )    以毫秒設置Date對象
Date.setUTCDate( )    設置一個月中的某一天(世界時)
Date.setUTCFullYear( )    設置年份、月份和天(世界時)
Date.setUTCHours( )    設置Date對象的小時字段、分鐘字段、秒字段和毫秒字段(世界時)
Date.setUTCMilliseconds( )    設置Date對象的毫秒字段(世界時)
Date.setUTCMinutes( )    設置Date對象的分鐘字段和秒字段(世界時)
Date.setUTCMonth( )    設置Date對象的月份字段和天數字段(世界時)
Date.setUTCSeconds( )    設置Date對象的秒字段和毫秒字段(世界時)
Date.setYear( )    設置Date對象的年份字段
Date.toDateString( )    返回Date對象日期部分做爲字符串
Date.toGMTString( )    將Date轉換爲世界時字符串
Date.toLocaleDateString( )    回Date對象的日期部分做爲本地已格式化的字符串
Date.toLocaleString( )    將Date轉換爲本地已格式化的字符串
Date.toLocaleTimeString( )    返回Date對象的時間部分做爲本地已格式化的字符串
Date.toString( )    將Date轉換爲字符串
Date.toTimeString( )    返回Date對象日期部分做爲字符串
Date.toUTCString( )    將Date轉換爲字符串(世界時)
Date.UTC( )    將Date規範轉換成毫秒數
Date.valueOf( )    將Date轉換成毫秒錶示
Date 方法
相關文章
相關標籤/搜索