史上最全、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是一門動態弱類型的解釋型編程語言,增強頁面動態效果,實現頁面與用戶之間的實時動態的交互。

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

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

 

注釋

JavaScript中代碼注釋:

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

 

引入文件

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. 算術運算符

一元算術
    +  一元加,數值不會產生影響 對非數值應用一元加運算時,會調用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  表示變量未定義。

 

1、數字(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( ) 返回原始數值

 

2、字符串(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 進紙
\\ 斜杠
\' 單引號
\" 雙引號
轉義字符

 

3、布爾類型(Boolean)

true(真)和false(假)

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

 

4、數組(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 方法

 

 

語句

 

1、條件語句

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;
    }

  

 2、循環語句

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

  

 

 其它

 

1、序列化

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

2、轉義

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

3、eval

JavaScript中的eval既可以運行代碼也可以獲取返回值

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

4、正則表達式

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...      反向引用            匹配之前的第一、第二...組括號內的表達式匹配的文本
元字符
\d     數字,等同於[0-9]
\D     非數字,等同於[^0-9]
\s     空白字符
\S     非空白字符
\w     字母、數字、下划線,等同於[0-9A-Za-z_](漢字不屬於\w)
\W     非字母、數字、下划線,等同於[^0-9A-Za-z_]
匹配規則簡寫

 

5、時間處理

時間操作中有兩種時間:

  • 時間統一時間
  • 本地時間(東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 方法

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM