javascript 基礎篇

時間  2019-11-18
標籤 javascript 基礎 欄目 JavaScript 简体版
原文   原文鏈接

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

1、如何編寫

1. javascript代碼存在形式

<方式一：以文件的方式存在>
<script type"text/javascript" src="JS文件"></script>

<方式二：直接存在於html>
<script type"text/javascript"> Js代碼內容 </script>

二、javascript代碼存在位置

1.HTML 的body中html

2.HTML 的body代碼塊底部（推薦）java

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

二 、變量

javascript中變量的聲明是一個很是容易出錯的點正則表達式

<script>
      //全局變量
      name = "alex";
      function f1() {
      // 局部變量
      var name = 123;
}
f1();
alert(name);


註釋
    
      單行註釋 //
      多行註釋 /*
      ;(可加 ， 能夠不加  推薦加上)  由於一對於HTML大字符串可能會壓縮，有助咱們更明顯的看出在哪斷開

3、數據類型

javascript 中的數據類型分爲原始類型和對象類型編程

原始類型 ： 數字、字符串、布爾值api

對象類型 ： 數組 、字典數組

特別的： 數字、布爾值、null、undefined瀏覽器

null：空什麼都沒有  至關於Python中的None閉包

undefined：是沒有被定義的  

1 、數字（Number）

s1 = "uu123"
 // 轉化爲數字
n2 = parseInt(s1)

// 轉不成功則爲NaN
NaN

//判斷是否爲數字
isNaN

//最大數
Number.MAX—SAFE—INTEGER
9007199254740991

//無窮大 正無窮大
Number.POSITIVE_INFINTY 
Infinity
isFinite（num） 來判斷是否爲無窮大
flase 無窮大
true 有限數

// typeof 判斷是什麼類型
a = 123
ret= typeof a

Number.toExponential（） 科學計數法
Number.toFixed（）  小數點後幾位

公共的計算模塊

常量

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( )
計算正切值。
View Code

二、字符串（String）

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

 1 obj.length                           長度
 2  
 3 obj.trim()                           移除空白
 4 obj.trimLeft()
 5 obj.trimRight)
 6 obj.charAt(n)                        返回字符串中的第n個字符
 7 obj.concat(value, ...)               拼接
 8 obj.indexOf(substring,start)         子序列位置
 9 obj.lastIndexOf(substring,start)     子序列位置
10 obj.substring(from, to)              根據索引獲取子序列
11 obj.slice(start, end)                切片
12 obj.toLowerCase()                    大寫
13 obj.toUpperCase()                    小寫
14 obj.split(delimiter, limit)          分割
15 obj.search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)
16 obj.match(regexp)                    全局搜索，若是正則中有g表示找到所有，不然只找到第一個。
17 obj.replace(regexp, replacement)     替換，正則中有g則替換全部，不然只替換第一個匹配項，
18                                      $數字：匹配的第n個組內容；
19                                      $&：當前匹配的內容；
20                                      $`：位於匹配子串左側的文本；
21                                      $'：位於匹配子串右側的文本
22                                      $$：直接量$符號
View Code

三、布爾類型(Boolean)

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

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

四、數組

JavaScript中的數組類型相似於python中的列表

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

4、其餘

一、序列化

 1 JSON.stringify()  //序列化
 2 
 3  a = 2
 4 
 5 JSON.stringify(a)
 6 "2"
 7 
 8 
 9 JSON.parse()  //  反序列化
10 
11 JSON.parse(a)
12 
13 2

二、轉義

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

三、eval

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

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

 

 1  a = eval("1+1")
 2 2
 3 a
 4 2
 5 
 6 b = eval("b=123")
 7 b
 8 123
 9 
10 
11 eval("for(var i=1;i<10;i++){console.log(i)}")
12 1
13 2
14 3
15 4
16 5
17 6
18 7
19 8
20 9
View Code

四、正則表達式

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

test（string）   用於檢測是否匹配

exec（string） 用於獲取正則匹配的內容

var reg=/^[1|5|8]\d{9}$/;

reg.test("13830025175")

true

reg = /\d+/



reg.exec("jknsdns2xmklsm4")

["2"]

reg = /d+/g;

reg.exec("sdmsk2mksmds4sdlsd5")

["2"]

exec每次只會匹配一個 可是他會一直匹配 如你加上一個循環 知道匹配到你想要的值 沒有值了 返回 null

五、時間處理

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

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

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

5、語句和異常

一、條件語句

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

1     if(條件){
2  
3     }else if(條件){
4          
5     }else{
6  
7     }
View Code 
    switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }
View Code

二、循環語句

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

var names = ["alex", "tony", "rain"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}
View Code 
var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}
View Code 
while(條件){
    // break;
    // continue;
}
View Code

三、異常處理

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

6、函數

一、基本函數

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

 1 // 普通函數
 2     function func(arg){
 3         return true;
 4     }
 5           
 6 // 匿名函數
 7     var func = function(arg){
 8         return "tony";
 9     }
10   
11 // 自執行函數
12     (function(arg){
13         console.log(arg);
14     })('123')
View Code

注意：對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了全部實際參數。

二、做用域

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

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

 1 function f2(){
 2     var arg= 111;
 3     function f3(){
 4         console.log(arg);
 5     }
 6      
 7     return f3;
 8 }
 9  
10 ret = f2();
11 ret();
 1     function f2(){
 2             var arg= [11,22];
 3             function f3(){
 4                 console.log(arg);
 5             }
 6             arg = [44,55];
 7             return f3;
 8         }
 9 
10         ret = f2();
11         ret();
12 複製代碼
View Code

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

更多：http://www.cnblogs.com/wupeiqi/p/5649402.html

三、閉包

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

閉包是個函數，而它「記住了周圍發生了什麼」。表現爲由「一個函數」體中定義了「另個函數」

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

 1 function f2(){
 2     var arg= [11,22];
 3     function f3(){
 4         return arg;
 5     }
 6     return f3;
 7 }
 8  
 9 ret = f2();
10 ret();

四、面向對象

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函數，從而浪費內存。使用原型和能夠解決該問題：

 1 function Foo (name,age) {
 2     this.Name = name;
 3     this.Age = age;
 4 }
 5 Foo.prototype = {
 6     GetInfo: function(){
 7         return this.Name + this.Age
 8     },
 9     Func : function(arg){
10         return this.Name + arg;
11     }
12 }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程