前端：JavaScript

時間  2019-11-16
標籤 前端 javascript 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，因此在瀏覽器上按照JavaScript語言的規則編寫相應代碼，瀏覽器能夠解釋並作出相應的處理。javascript

 

1、如何編寫

一、JavaScript代碼存在形式

 標籤：<script></script>html

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
  
<!-- 方式二 -->
<script type"text/javascript">
    Js代碼內容
</script>

 

二、JavaScript代碼存放位置

  • HTML的head中
  • HTML的body代碼塊底部(推薦)

因爲Html代碼是從上到下執行，若是Head中的js代碼耗時嚴重，就會致使用戶長時間沒法看到頁面，若是放置在body代碼塊底部，那麼即便js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。java

 

2、變量

JavaScript中變量的聲明是一個很是容易出錯的點，局部變量必須一個 var 開頭，若是未使用var，則默認表示聲明的是全局變量。正則表達式

<script type="text/javascript">


    // 全局變量
    name = 'seven';
 
    function func(){
        // 局部變量
        var age = 18;
 
        // 全局變量
        gender = "男";
    }
</script>

 

JavaScript中的代碼註釋：編程

  • 單行註釋：//
  • 多行註釋：/*  */

注：此註釋只能在Script塊中生效。api

 

3、數據類型

JavaScript 中的數據類型分爲原始類型和對象類型：數組

原始類型：瀏覽器

  • 數字
  • 字符串
  • 布爾值

對象類型：閉包

  • 數組
  • 「字典」
  • ...

特別的，數字、布爾值、null、undefined、字符串是不可變。dom

null、undefined：

null是JavaScript語言的關鍵字，它表示一個特殊值，經常使用來描述「空值」。

undefined是一個特殊值，表示變量未定義。

示例：

<body>
    <script>
        function f1() {
            console.log(name);
            var name = 123;
        }
        f1();
    </script>
</body>

經過瀏覽器打開，而後右鍵-->檢查-->Console。就能夠看到下圖的顯示：

由於代碼是從上到下執行，當代碼讀取到console.log(name)時，咱們尚未定義一個是name的變量，因此會出現undefined。

 

一、數字（Number）

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

建立數字：

<body>
    <script>
        num1 = 123;//直接建立了一個原始值
        console.log(num1);
        num2 = new Number(123);//根據Number類建立了一個對象
        console.log(num2);
    </script>
</body>

效果演示圖：

 

轉換：

  • parseInt(...)    將某值轉換成數字，若是不成功則是NaN（非數字）。

示例：將字符串轉換成數字。

  • parseFloat(...)    將某值轉換成浮點數，若是不成功則是NaN（非數字）。

示例：

字符串轉數字智能取個位數，沒法得到小數點後面的值，因此就用parseFloat進行轉換。

 

特殊值：

  •  NaN，非數字。可以使用 isNaN(num) 來判斷。

 

  • Infinity，無窮大。可以使用 isFinite(num) 來判斷。

若是isFinite()返回true，是無窮

若是isFinite()返回false，是有限數

示例：

 

更多數值計算：

常量

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

 推薦手冊：http://www.shouce.ren/api/javascript/l_Object.html

 

 判斷類型：typeof，返回值是字符串。

 

二、字符串（String）

字符串是由字符組成的數組，但在JavaScript中字符串是不可變的：能夠訪問字符串任意位置的文本，可是JavaScript並未提供修改已知字符串內容的方法。

常見功能：

obj.length                           長度 
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n個字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根據索引獲取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大寫
obj.toUpperCase()                    小寫
obj.split(delimiter, limit)          分割
obj.search(regexp)                   從頭開始日後找,找到第一個匹配項的索引
obj.match(regexp)                    全局搜索，若是正則中有g表示找到所有，不然只找到第一個。
obj.replace(regexp, replacement)     替換，正則中有g則替換全部，不然只替換第一個匹配項，
                                     $數字：匹配的第n個組內容；
                                     $&：當前匹配的內容；
                                     $`：位於匹配子串左側的文本；
                                     $'：位於匹配子串右側的文本
                                     $$：直接量$符號

 

indexOf:從第一個匹配項的索引

lastIndexOf:找到最後一個匹配項的索引

 

split:分隔，而且支持正則表達式

分隔示例：

 

正則表達式：Python中分隔用（），JS中用//,分組也用（）。

示例：

 

.search示例：

 

.match:加上g能夠全局匹配

 

.replace:替換

示例一：

 

示例二：

$&:代指已匹配成功的項

$數字：代指匹配成功的某一個組（按照順序）

 

跑馬燈實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1" style="background-color: palevioletred;color: blueviolet;font-size: 40px;text-align: center">Hello!</div>
    <script type="text/javascript">
        //建立一個計時器setInterval
        setInterval(function () {
            //獲取id進行操做
            d1 = document.getElementById("i1");
            //將獲取的id中的字符串拿到
            d1_text = d1.innerText;
            first_char = d1_text[0];//字符串索引
            sub_char = d1_text.slice(1,d1_text.length);//字符串切片
            new_str = sub_char + first_char;;//字符串拼接
            d1.innerText = new_str;//將拼接後的字符串從新放入對應id裏面
        },1000)//每隔一秒執行一次function方法
    </script>
</body>
</html>
跑馬燈

 

 

三、布爾類型（Boolean）

布爾類型僅包含真假，與Python不一樣的是其首字母小寫。

  • ==      比較值相等
  • !=       不等於
  • ===   比較值和類型相等
  • !===  不等於
  • ||        或
  • &&      且

 

四、數組

 JavaScript中的數組相似於Python中的列表

 常見功能：

obj.length          數組的大小
 
obj.push(ele)       尾部追加元素
obj.pop()           尾部獲取一個元素
obj.unshift(ele)    頭部插入元素
obj.shift()         頭部移除元素
obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替換元素
                    obj.splice(n,1)     指定位置刪除元素
obj.slice( )        切片
obj.reverse( )      反轉
obj.join(sep)       將數組元素鏈接起來以構建一個字符串
obj.concat(val,..)  鏈接數組
obj.sort( )         對數組元素進行排序

 

示例：

 

.splice:

 

 

五、字典

經過對象來僞造出來的，而且能夠索引取值。

 

 

4、其餘

一、序列化

JSON.string(obj)：序列化

JSON.parse(str)：反序列化

示例：

 

二、轉義

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

 

三、eval 

JavaScript中的eval是Python中eval和exec的合集，既能夠編譯代碼也能夠獲取返回值。

  • eval() 
  • EvalError   執行字符串中的JavaScript代碼

示例：

 

 

四、正則表達式

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

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

注：定義正則表達式時，「g」、「i」、「m」分別表示全局匹配，忽略大小寫、多行匹配。

經常使用於匹配用戶輸入的用戶名格式、手機號碼格式是否正確。

 

五、時間處理

JavaScript中提供了時間相關的操做，時間操做中分爲兩種時間：

  • 世界統一時間
  • 本地時間（東8區）

示例：

更多操做參見：http://www.shouce.ren/api/javascript/main.html

 

 

5、語句和異常

一、條件語句

JavaScript中支持兩個條件語句，分別是：if 和 switch

if語句：

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

switch語句：

switch(變量名){
        case '值1':
            age = 123;
            break;
        case '值2':
            age = 456;
            break;
        default:
            age = 777;
    }

示例：

<body>
    <script>
        function f1(name){
            switch (name){
                case 1:
                    console.log(1);
                    break;
                case 123:
                    console.log(123);
                    break;
                default:
                    console.log("default")
            }
        }
        f1(1);
        f1(123);
        f1(222);
    </script>
</body>

效果演示圖：

 

二、循環語句

JavaScript中支持三種循環語句，分別是：

第一種：

示例1：

li = [11,22,33,44]
for(var item in li){
    console.log(item);//索引
    console.log(li[item]);
}

結果：

示例2：

dic = {k1:123,k2:456}
for(var item in dic){
    console.log(item)//這裏的item是key
}

結果：

 

 

第二種：

示例1：

for(var i=0;i<5;i++){
    console.log(i);
}

結果：

示例2：

for(var i=5;i>0;i--){
    console.log(i)
}

結果：

 

示例3：

li = [11,22,33,44]
for(var i=0;i<li.length;i++){
    console.log(i,li[i]);
}

結果：

注：字典不能使用這種循環

 

示例4：

for(var i=1;i<10;i=i+2){
    console.log(i)
}

結果：

 

第三種：

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

 

三、異常處理

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

注：主動拋出異常 throw Error('xxxx')

 

 

6、函數

一、基本函數

 JavaScript中函數基本上能夠分爲一下三類：

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

注：對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了全部實際參數。而且還能夠大於形式參數，可是隻會執行形式參數數量。要想所有執行大於形參的實參，就要用arguments。

 

自執行函數示例：

name = "hello";
function f1() {
    var name = "world";
    function f2() {
        alert(name);
    }
    f2()
}
f1();

執行f1函數時，自動執行了f2函數結果是：world。

 

二、做用域

老師詳細解釋了做用域：http://www.cnblogs.com/wupeiqi/p/5649402.html

JavaScript中每一個函數都有本身的做用域，當出現函數嵌套時，就出現了做用域鏈。當內層函數使用變量時，會根據做用域鏈從內到外一層層的循環，若是不存在，則異常。

切記：全部的做用域在建立函數且未執行時候就已經存在。

name = "hello";
function f1() {
    var name = "world";
    function f2() {
        alert(name);
    }
    return f2
}
var ret = f1();
ret();

有點相似於裝飾器。實行f1，返回了f2，賦值給ret，而後ret（），去執行f2，返回world。由於做用域鏈是從內到外循環進行尋找。

注：聲明提早，在JavaScript引擎「預編譯」時進行。

 

三、閉包

「閉包」，是指擁有多個變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。

簡單來講閉包是個函數，而它「記住了周圍發生了什麼」（函數裏面嵌套函數）。表現爲由「一個函數」體中定義了「另個函數」。

因爲做用域鏈只能從內向外找，默認外部沒法獲取函數內部變量。閉包，在外部獲取函數內部的變量。

示例：

function f2(){
    var arg= [11,22];
    function f3(){
        return arg;
    }
    return f3;
}
 
ret = f2();
ret();

 

 

四、面向對象

 在JS裏面沒有class，惟一有的是函數。這裏的函數能夠充當class的效果。

示例：

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
  
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

對於上述代碼須要注意：

  • Foo充當的構造函數
  • this代指對象
  • 建立對象時須要使用 new

上述代碼中每一個對象中均保存了一個相同的Func函數，從而浪費內存。使用原型和能夠解決該問題：

function Foo(name,age) {//相似建立一個類Foo，而且建立了Foo類的構造方法
    this.Name = name;//this至關於self。這裏至關於設置構造方法
    this.Age = age;
}
Foo.prototype = {//建立原型：至關於類裏面的方法。prototype是關鍵字
    f1:function () {
        return this.Name + this.Age
    }
};
obj = new Foo("alex",35);
ret = obj.f1();
console.log(ret);

另外一種寫法（推薦，由於JS源碼裏面是這種格式）：

function Foo(name,age) {//相似建立一個類Foo，而且建立了Foo類的構造方法
    this.Name = name;//this至關於self。這裏至關於設置構造方法
    this.Age = age;
}
Foo.prototype.f1 = function(){return this.Name + this.Age}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程