web路途-基礎的JavaScript語法概要

一邊學習前端，一邊經過博客的形式本身總結一些東西，固然也但願幫助一些和我同樣開始學前端的小夥伴。

若是出現錯誤，請在評論中指出，我也好本身糾正本身的錯誤

author： thomaszhou

• 目錄
  • [1. 基本語法]
  • [2. 排序sort()默認和自定義]
  • [3. js一些簡單提升性能實例]
  • [4. this的理解和應用]
  • [5. 點擊事件的調試錯誤]
  • [6. js能夠爲全部標籤添加任何自定義屬性]
  • [7. 數據類型和類型轉換]
  • [8. 函數傳參(未完成）]
  • [9. 做用域]
  • [10. 定時器]
  • [11. 日期對象]
  • [12. 字符串方法]
  • [13. 數組方法]
    • json,對象

基本語法-1

1. javascript分別提供內置函數 parseInt()和parseFloat()，轉換爲數字 注：若是被轉換的字符串，同時又數字和字符構成，那麼parseInt會一直定位數字，直到出現非字符。 因此"10abc" 會被轉換爲 10
2. 使用內置函數Boolean() 轉換爲Boolean值 當轉換字符串時：非空即爲true 當轉換數字時：非0即爲true 當轉換對象時：非null即爲true
3. Number和parseInt同樣，均可以用來進行數字的轉換 區別在於，當轉換的內容包含非數字的時候，Number() 會返回NaN(Not a Number) parseInt() 要看狀況，若是以數字開頭，就會返回開頭的合法數字部分，若是以非數字開頭，則返回NaN
4. getElementsByTagName和getElementsById區別！
   • 返回值不一樣：getElementsByTagName是選擇標籤的類型。返回的是一個一堆的標籤，也就是一個集合（不是數組，可是擁有和數組同樣的方法）.getElementsById返回的是一個標籤

   var oLi = oDiv.getElementsByTagName('li');
   //oLi實際上是一個集合
   for(var i = 0; i < arrUrl.length; i++) {
       //        若是oLi[i]後的 事件 或者 屬性 是肯定的，能夠用.來寫
       oLi[i].index = i;
       oLi[i].onclick = fn1;
       
       重要！！！！！！！！！！！！！
       //        若是經過函數參數來改變oLi[i]的事件 或者 屬性，就用oLi[i][evt]來寫，例如evt就是參數,
       //oLi[i]的點擊事件還能夠以下寫：
       //  var evt = onclick;
       //  oLi[i][evt] = fn1;   
   }
   複製代碼

   • 寫法不一樣:getElementsById只能寫成document.getElementsById,可是getElementsByTagName前面不止能夠寫ducument還能夠寫別的，以下:

   （1）
       var oUl = document.getElementsByTagName('ul')[0];
       /*如何用getElementsByTagName來找一個標籤，就加個[0]*/
       var oli = oUl.document.getElementsByTagName('li');
       /*選擇的是ul標籤下的全部li標籤*/
   
   （2）
   若是查找的標籤只有一個，能夠用id，class，也能夠用TagName，
   可是若是用TagName就要加上一個[0]
   
       var oImag = oDiv.getElementsByTagName('img')[0];
   複製代碼

   • 靜態方法和動態方法: getElementsByTagName是動態方法：即便前面寫了語句獲取某個類型標籤返回爲0，只要後面有添加該類型標籤，就能夠直接訪問，不須要再來一次查找。 可是getElementsById若是前面返回值爲0，後面如何添加了，也須要再次重複操做一次查找才能夠
5. aSpan[i].style.left 是修改left值，若是遇到要將整個樣式進行修改，也就是新寫一個樣式，將以前經過js對標籤style進行修改的那些樣式的所有進行一個替換，能夠考慮用aSpan[i].style.cssText（記住：是將js操做修改的樣式所有替換成一個新的，標籤自己經過css設置的樣式不變）
6. 數組：中能夠包含不一樣的數據類型： 例如：數子、字符串、數組、路徑（例如存放圖片地址）等 7.函數：函數的參數若是是字符串，就像是一個字符串數組

function fn1(args) {
        console.log(args[0]);
        console.log(typeof args[0]);//string
    }
    fn1('qwe');//q
    fn1(234);//undefined ----typeof undefined也是undefined
複製代碼

排序sort()默認和自定義-2

• sort()默認升序，可是隻適用於0～9,由於：

var array1 = [0,1,5,10,15];
   array1.sort();//結果爲:0,1,10,15,5---->徹底不符合
複製代碼

緣由：是這個函數在進行排序的過程影響其值的根本緣由。(其實，在使用sort()進行排序的時候會調用toString()函數將其值轉換成字符串在進行比較，是按ASCII進行比較的)

解決方法：自定義sort()

compare(a,b)返回的值小於0：那麼a就小於b，也就是說a排在了b的前面

compare(a,b)返回的值大於0: 那麼a就大於b，也就是說a排在了b的後面

compare(a,b)返回的值等於0：那麼a就等於b，也就是說a和b的位置保持不變

var Array1 = [0,1,5,10,15];
Array1.sort(function(a,b){return b-a;});
結果是：15，10，5，1，0
複製代碼

解釋：a,b表示數組中的任意兩個元素，若return > 0 b前a後；reutrn < 0 a前b後；a=b時存在瀏覽器兼容，簡化一下：a-b輸出從小到大排序，b-a輸出從大到小排序。

var arr1 = [0,19,5,10,15],//數字
        arr2 = ['500', '70', '9'];//數字形式的字符串
        arr3 = [500, '70', '9'];//數字和數字形式的字符串混合

    function compare(a, b) {
      return a-b;
//        return (a < b)? -1: (a > b)? 1: 0;
//利用相減的方法，能夠對字符串形式的數字和純數字都有效，而不須要專程純數字在比較！！！！！
    }
    console.log(arr1.sort());//[0, 10, 15, 19, 5]
    console.log(arr1.sort(compare));//[0, 5, 10, 15, 19]
    console.log(arr1.sort(compare)[1]);//5
    
    console.log(arr2.sort());//["500", "70", "9"]
    console.log(arr2.sort(compare));//["9", "70", "500"]

    console.log(arr3.sort());//[500, "70", "9"]
    console.log(arr3.sort(compare));//["9", "70", 500]
    //得出，對於數字和數字類型的字符串，用了compare函數都是按照數字的大小排序！！！！！！
複製代碼

• 針對（單個屬性）的對象數組排序

var obj1 = [
        {'name': 'john', 'age': 13},
        {'name': 'aohn', 'age': 93},
        {'name': 'bohn', 'age': 53}
    ],
    obj2 = [//age的值改成字符形式
        {'name': 'john', 'age': '13'},
        {'name': 'aohn', 'age': '93'},
        {'name': 'bohn', 'age': '53'}
    ]
    //對象數組排列
    function objectSort(args) {
        var sortOrder = 1;
        if (args[0] === '-') {
          sortOrder = -1;
          args = args.substr(1);
          console.log(args);
        }
        return function (a, b) {
          var result = a[args] - b[args];
          return result * sortOrder;
        }
    }

    console.log(obj1.sort(objectSort('age')));
    console.log(obj2.sort(objectSort('age')));//結果同樣
//正序：正序和逆序同時顯示就出錯，只有當只有一個的時候就沒問題？？？
    console.log(obj1.sort(objectSort('-age')));
//逆序：正序和逆序同時顯示就出錯，只有當只有一個的時候就沒問題？？？
複製代碼

• 針對（多個屬性）的對象數組排序

<script>

var obj1 = [
       {'name': 'john', 'age': '13'},
        {'name': 'aohn', 'age': '93'},
        {'name': 'john', 'age': '93'},
        {'name': 'bohn', 'age': '53'}
    ]
function objectSortMuti() {//應對對象數組的多個屬性排序
        var props = arguments;
        return function (obj1, obj2) {
          var i = 0,
              result = 0,
              numberOfProperties = props.length;
          while(result === 0 && i < numberOfProperties) {
          //調用單個屬性排序的函數objectSort()
            result = objectSort(props[i])(obj1, obj2);
            i++;
          }
          return result;
        }
    }
    console.log(obj1.sort(objectSortMuti('name','age')));
//    {name: "john", age: "13"}
//    {name: "bohn", age: "53"}
//    {name: "aohn", age: "93"}
//    {name: "john", age: "93"}

</script>
複製代碼

• 利用sort將數組內的元素弄成隨機排列

//    數字數組隨機排列：讓數組的數字大小隨機排列
    function randomSort(a, b) {
        return Math.random() - 0.5//由於默認random是0～1，減去0.5就是-0.5~0.5,正負爲一半機率
    }

    console.log(arr1.sort(randomSort));// ["blue", "hum", "zelu"]默認就是字符串排序
複製代碼

性能方面-3：

例1
	    	for(var i = 0; i < arr.length ; i++)
		/*裏面的arr.length會每次循環都計算一次長度，這樣影響性能！*/
修改成： var num = arr.length;  
         for(var i = 0; i < num ; i++)
複製代碼

例2
        for( var i=0; i<6000; i++ ){
            document.body.innerHTML += '<input type="button" value="按鈕" />';
            /*每次循環都須要dom一次，性能很差*/
        }
        
/*解決方法：設置一個字符串str，將每次的操做都做用在str上，等循環結束，一次性所有加在document.body.innerHTML中*/
        var str = '';
        for( var i=0; i<6000; i++ ){
            str += '<input type="button" value="按鈕" />';}
        }
        document.body.innerHTML = str;

複製代碼

例3  下面代碼的點擊事件執行點擊都會生成4個div，可是每次點擊都會生成4個，如何限制按鈕的功能只保證第一次有效
        var arr1 = ['qwe','qwe','sdf','qwe'];
        for(var i = 0; i < arr1.length;i++){
 			document.body.innerHTML += '<div>'+arr1[i]+'</div>';
            /*若是是 = ，那就是修改，若是是 += ，那就是不斷相加*/
            }

方法：寫一個判斷(建立變量onoff，初始爲true，點擊事件結束後賦值爲false，此時經過if判斷沒法執行 點擊事件)
        var arr1 = ['qwe','qwe','sdf','qwe'];
        oBtn1.onclick = function(){
    		onoff = true;
 			if(onoff){
    		for(var i = 0; i < arr1.length;i++){
          		document.body.innerHTML += '<div>'+arr1[i]+'</div>'; }
        onoff=false;}
}
複製代碼

• 注：標籤的背景屬性是不能夠用===來判斷的，由於背景後面跟着顏色（多種表達方式）、url等等。通常牽扯到判斷，儘可能用變量 如何實現多個div的背景圖片的點擊事件(點擊一次換一張圖片，再點擊一次，恢復原來的圖片)，經過變量判斷每一個點擊事件(點擊一次後)

this的理解和應用-4

this 指的是調用當前方法（函數）的那個對象

• 判斷this的指向

1. 直接在中寫一個alert(this);這個this是window
2. 只要見到單獨的fn1()，那麼this就是window。這個this表達的是window不是obtn1，由於是windw調用的，不是oBtn1調用的

舉例：		 function fn1(){alert(this);}
// 只要見到單獨的fn1()，那麼this就是window，可是若是是oBtn1.onclick = fn1;
//那麼this指的就是oBtn1（誰調用的函數，this就指向誰！）
    eg1:    fn1();                      this ---> window
    eg2:    oBtn1.onclick = fn1;      this -----> oBtn1 
    eg3:    oBtn1.onclick = function(){
            fn1(); }                  this ---> window
複製代碼

題外話！（點擊事件的函數賦值爲何不能oBtn1.onclick = fn1()，這樣寫爲何是錯的❌？）

• this應用：

//this ---> aBtn  的三種寫法
//第一種
        var aBtn = document.getElementsByTagName('input');
        for(var i = 0;i < aBtn.length;i++){
            aBtn[i].onclick = function() {
                this.style.background = 'red';
            }
        }
//第二種
        var aBtn = document.getElementsByTagName('input');
        that = null;
        for(var i = 0;i < aBtn.length;i++){
            aBtn[i].onclick = function() {
                that = this;
                fn1();
            }
        }
        function fn1(){
            that.style.background = 'red';
        }
//第三種
        var aBtn = document.getElementsByTagName('input');
        for(var i = 0;i < aBtn.length;i++) {
            aBtn[i].onclick = fn1;
        }
        function fn1(){
            this.style.background = 'red';
        }
複製代碼

點擊事件的調試錯誤-5

var aBtn = document.getElementsByTagName('input')；
        for(var i = 0;i < aBtn.length;i++){
            aBtn[i].onclick = function(){
                 that = this;   
                    fn1();
            }
            /*因爲下一句代碼呆滯程序出錯，加載頁面沒有出錯，可是點擊時出錯，且錯誤定位在209行，
            不須要用alert()調試錯誤.錯誤只發生在點擊後，也就是說是函數點擊事件錯誤或者是調用點擊事件時發生錯誤,
            本例子是下一句發生錯誤，也就是調用點擊事件的時候發生錯誤，屢次定義同一點擊事件！*/
         //    aBtn[i].onclick = fn1;  		❌的源頭
        }
        function fn1(){
            that.style.background = '#2a426c';
        }
複製代碼

js能夠爲全部標籤添加任何自定義屬性-6

• 例子1：建立3個li標籤，每一個li的背景圖都是一張圖片，即共三個圖片，每一個圖片都寫一個點擊事件(點擊一次變一下背景圖片，再點一下就回去前一張圖)：

document.body.innerHTML = '<ul> <li></li> <li></li> <li></li> </ul>';  // 三個li是存放圖片
var aLi = document.getElementsByTagName('li');
for(var i = 0;i < aLi.length; i++){
    aLi[i].style.cssText = 'margin:0;list-style:none;background:url(1.jpg);float:left;width:100px;height:100px;margin-right:10px;'
}
var onoff = true;  	// 方法一：利用變量的true和false來判斷，點擊第一次的時候onoff置false，
//而後經過if else就能夠執行else語句
for(var i = 0; i < aLi.length; i++){
    aLi[i].onclick = function(){
        if(onoff){
        //aLi[i].style.background = 'url(2.jpg)';這樣寫是錯的❌
        this.style.background = 'url(2.jpg)';
        onoff = false;
        } else{
            this.style.background = 'url(1.jpg)';
                onoff=true;
            }}  }
複製代碼

方法一的問題：因爲是多個圖片並行添加點擊事件，而onoff是全局變量，若是點擊第一個li的圖片1，圖片變成2，而後再點擊第二個li的圖片1，此時是執行else語句（圖片變成1），可是問題在於此時第二個li的圖片就是1，因此點擊事件在用戶看起來是失靈的！每次換一個li點擊，都須要點擊兩次才能夠生效，這就是問題

方法二：一樣是利用判斷，可是，不是利用一個全局變量，而是利用每一個li的自定義屬性onOff。每次置爲true和false都是對當前li的自定義屬性onOff屬性操做，這樣就不會影響到其餘的 li 標籤，每一個onOff都是僅針對對應的標籤

注：

1. 給一些標籤數組設置自定義屬性的時候，會用到for循環，可是給標籤數組設置自定義函數的語句要在for循環的開頭寫好，例以下面第二句代碼aLi[i].onOff = true;若是寫在了按鈕事件裏面，就會出錯！（由於寫在裏面的話，若是不作一些相似閉包等操做，i的值不是從0-->aLi.length-1，而是老是length-1）
2. 該方法是經過自定義建立一個僅屬於某個標籤的屬性，可是若是目前的代碼中有經過自定義屬性來操做的一些別的功能，咱們最好把該屬性拿來判斷，由於若是有現成能夠用的，那就用現成的，若是沒有，纔去創造一個新的

for(var i = 0; i < aLi.length; i++){
    aLi[i].onOff = true;     //設置自定義屬性onOff
    aLi[i].onclick = function(){
        if(this.onOff){
        this.style.background = 'url(2.jpg)';
        this.onOff = false;
        }
            else{
            this.style.background = 'url(1.jpg)';
                this.onOff=true;   }}  }
複製代碼

• 自定義屬性---設置索引值index（適用於想創建「匹配」，「對應」關係）

  • 例子2：仍是三個li，點擊每一個li時，點擊屢次依次爲A、B、C、D，而後循環，三個li各自獨立完成功能

    實現方法：建立一個數組var arr = ['A','B','C','D'],而後爲每一個li標籤設置一個自定義屬性num，初始都爲0，在不超過數組arr的長度，每次點擊都num++以及將li的value值或者innerHTML置爲arr[num]

  • 例子三：三個button，三個p標籤，一個包含字符串的數組，點擊button，經過索引值將數組對應的值，對應的對p標籤做出value的修改（利用自定義屬性建立--索引）

  數組也能夠包含字符串，圖片，路徑等等

數據類型和類型轉換-7

1. 任何非空的數據類型，均可以添加自定義屬性和自定義方法
2. 能夠經過typeof判斷數據類型，例如：typeof n判斷n的數據類型
3. js的數據類型：數字，字符串，布爾，函數，對象(obj、[]、{}、null),undefine
4. 從html上獲取到的值，innerHTML和一些屬性，都是字符串！！！！！！！！
5. 顯式類型轉換：
   • Number()函數：轉化爲數字,出現空通常狀況下轉爲0（除json外），若是遇到字母或者符號，obj類型，json，undefine直接就是NaN

   var a = '100';
   var b = '000100';
   var c = '----100';
   var d = ''; 以及 var d = null;
   var e = 'true';
   var f = function(){var a = 777};//轉換函數
   var g = ['4'];//一個值
   var h = [1,3,5];//多個值
   var i = json = {};
   var j ;//undifine
   //Number(a):字符串直接轉換爲數字
   alert(Number(a)+100);// 100+100
   alert(Number(b));//100
   alert(Number(c));//NaN  含有符號
   alert(Number(d));//0
   alert(Number(e));//true --> 1  false --> 0
   alert(Number(f));//NaN
   alert(Number(g));//4
   alert(Number(h));//NaN
   alert(Number(i));//json不管是空仍是有東西，都是 NaN
   alert(Number(j));//NaN
   複製代碼

   • parseInt()函數：原理是從第一個開始日後找，一旦遇到不是數字的(若是開頭是+或者—或者空格是能夠的)，立馬截斷，而後把以前讀到的數字轉換成int型數字。（注：適用於轉換一些數字開頭的字符串，例如b）
     • parseInt(a,10) 表示按照10進制轉換，也能夠是二進制，十六進制等等。

   var a = 'a100';
   var b = '100px';
   var c = '000100';
   var d = '+100';
   var e = ' 100'; 以及 e = 00000100
   var f = null;
   alert(parseInt(a,10));//NaN
   alert(parseInt(b,10));//100
   alert(parseInt(c,10));//100
   alert(parseInt(d,10));//100 認識'+ - = ' 分別是 100 -100 100
   alert(parseInt(e,10));//100 空格 和 0 自動忽略
   alert(parseInt(f,10));//NaN
   複製代碼

   • parseInt()和parseFloat()的區別

   var a = '12.34fff';
   var b = '12.3.4';
   alert(parseInt(a));//12
   alert(parseFloat(a));//12.34
   alert(parseFloat(b));//12.3 只認識第一個小數點
   複製代碼

//兩個轉換的值相等，就能夠判斷爲整數 if(parseInt(a) == parseFloat(a)){ alert('a是小數'); }else{ alert('a是整數'); } 6. **隱式類型轉換** 隱式類型轉換： + 200 + '3' 變成字符串 '2003'

- * / %				'200' - 3     變成數字 197

++ --				'2'++         變成數字  3

> < 		數字的比較是一個數字和一個字符串，那就是默認數子進行比較alert( 10000000 > '9' ); 、
                字符串的比較      alert( '10000000' > '9' );
                        
!	                        取反	      ！'asd'         true    把右邊的任何數據類型轉成布爾值

==                  alert('2' == 2) true 只是判斷值
（=== 是判斷 數據類型 和 值 都必須相同）
```
複製代碼

7. 轉換失敗的時候返回NaN。有4個特色：
   • NaN在bool型中是 false
   • NaN必定是出現非法操做
   • NaN是一個數字類型（number），可是它不是一個數字
   • 除NaN之外，全部的數據類型的值都是等於自己
   • isNaN() 判斷某些值是否是數字：
     1. 是數字，就是false不是數子，就是true**
     2. isNaN()內部是經過number（）函數來判斷是否是數字！

var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', ,
    function(){alert(1);}, null,document, [], true, '200px'-30,'23.45元', 
    5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];
/*
	一、找到arr裏全部的數字：-98765, 34, -2, 0, 5
*/
for(var i = 0; i < arr.length; i++){
//方法一：把全部數字都找出來
    if((typeof arr[i] != 'string')&&(parseFloat(arr[i]) == arr[i])){
        console.log(arr[i]); 
    }
    //方法二：判斷是數字，而不是NaN
    if((typeof arr[i] === 'number')&&(arr[i] === arr[i]))
}        
複製代碼

8. charAt（i）把字符串的字符單獨拿出來

str = '123';
str.charAt(2);//3
複製代碼

做用域-9

瀏覽器：
		「JS解析器過程」
			1）	JS 的預解析:「找一些東西」	：僅 var和function
			全部的變量，在正式運行代碼以前，都提早賦了一個值：未定義
			全部的函數，在正式運行代碼以前，都是整個函數塊
			
		注：遇到重名的：只留一個（變量和函數重名了，就只留下函數），
		    多函數的話，函數留最後的那個！
					
			2）逐行解讀代碼：
					表達式：= + - * / % ++ -- ! 參數……
					表達式能夠修改預解析的值！

注：script		全局變量、全局函數
		        自上而下
 
    <script>var a =1 ;</script>
    <script>alert(a)</script>  ===>  1
    是能夠執行的，由於自上而下，上面的東西會存進倉庫而後杯使用和讀取，
    就像一開頭會用script引用一些js文件同樣
			
複製代碼

var a = 1;
function fn1(){
	alert(a);     // 1        
	//(做用域鏈，裏面找不到var和函數，就跳到父級，而後找到a=1，因此返回1（由裏到外）)
	a = 2;    ／／找不到a，而後又是做用域鏈往外面爬，遇到a = 1；而後a =2是將全局a賦值爲2
}
fn1();
alert(a);	// 2

預處理結果爲：a = undefined   fn1 = function fn1{...}
逐行解讀：如上註釋

注：
    1. 函數內部找不到變量的聲明，就會跳出來找同名的全局變量，若是也沒有才會報錯！！！！（由裏到外），
；可是外面不能直接用局部變量（函數內）
        
        ** 想要獲取函數內的值---解決辦法：
        方法一：
        聲明一個全局變量，再函數中的局部變量賦值給全局變量
       
        var str = '';
        function fn1(){
	    var a = '大雞腿~';
	    str = a;}
        
        方法二：申明另外一個函數，利用參數來傳遞局部變量
        function fn2(){
	var a = '9999999克拉鑽石23456789';
	fn3(a);}
        fn2();

        function fn3(a){
	    alert(a);}
複製代碼

例子1:

alert(a);			// function a (){ alert(4); }
var a = 1;                  
alert(a);			// 1
function a (){ alert(2); }
alert(a);			// 1
var a = 3;		
alert(a);			// 3
function a (){ alert(4); }
alert(a);		// 3
    alert( typeof a );      //number
a（）;報錯，由於此時a是變量不是函數

解析過程：
    「JS解析器過程」
		1）JS 的預解析:
			===>   讀取到var a = 1 ==>  a = undefined
			===>   a = function a(){ alert(2); }
			===>   讀取到var a = 3 ==>  a = undefined
			===>   a = function a (){ alert(4); } 
			===>    只留函數，函數留最後的那個
			因此預解析的結果是：a = function a (){ alert(4); } 
			
		注：遇到重名的：只留一個（變量和函數重名了，就只留下函數）
					
			2）逐行解讀代碼：
			因爲預解析得出a = function a (){ alert(4); }
			按順序讀，第一個alert(a);是返回一個函數，預處理的結果！
複製代碼

例子2:

var a = 1;
function fn1(){
    alert(a);			// undefined
    var a = 2;
}
fn1();
alert(a);	     	// 1

解析過程：
    「JS解析器過程」
		1）JS 的預解析:
			===>   讀取到var a = 1 ==>  a = undefined
			===>   fn1 = function fn1(){ alert(a); var a = 2;}
			===>    只留函數
			因此預解析的結果是：fn1 = function fn1(){ alert(a); var a = 2;} 
		
		2）逐行解讀代碼：
			  解析結果爲表達式
			  函數調用：
			      1）函數內部預解析（和外部預解析同樣！）
			          alert(a); ==>  null
                                var a = 2;   ==>  a=undefined
                            2)逐行解讀代碼
                                alert(a)  ==> undefined
                                alert(a); ==> a是全局變量a，不是局部的a，因此是a
複製代碼

例子3:

var a = 1;
function fn1(a){
    參數就至關於一個局部變量，就至關於var a;，
     可是沒有賦值，因此內部js解析器是讀取到a=undefine;
	alert(a);		// undefined
	a = 2;
}
fn1(); 下面是fn1(a);
alert(a);		// 1

例子4:

var a = 1;
function fn1(a){
	alert(a);		// 1
	a = 2;
}
fn1(a);
alert(a);		// 1

複製代碼

• 定時器-10

  • 函數的返回值 return：返回值
    1. return能夠返回的類型有：數字、字符串、布爾、函數、對象（元素[數組]{}\null）、未定義
    2. 函數名+括號：fn1() ==> return 後面的值；
    3. 全部函數默認返回值：未定義；
    4. return 後面任何代碼都不執行了；

  a、返回對象
  alert(fn2());    ----> 顯示整個function(b){}（包括註釋）
  function fn2(){
  return function (b){
  	alert(a+b);			// 嘿嘿，我是註釋~
  };}
  
  a、返回對象
  fn3().onload = function (){
  document.body.innerHTML = 123;
  };
  
  function fn3(){
  return window;}
  
  b、經過雙括號來調用 函數 內的 函數
  fn2(20)(10);      
  function fn2(a){
  return function (b){
  	alert(a+b);			// 嘿嘿，我是註釋~
  };}
  
  
  複製代碼

  • 函數的return小應用

  模仿jquery，封裝一個 $方法
  
  function $( v ){ 
  if( typeof v === 'function' ){   -->    若是v是函數
      window.onload = v;
  } else if ( typeof v === 'string' ) {   --> 若是v是字符串
      return document.getElementById(v);
  } else if ( typeof v === 'object' ) {   --> 若是v是一個對象，例如this
      return v;
  }}
  
  $(function(){   --> 直接用$()方法
  $('btn1').onclick = function(){
  	$( this ).style.background = 'yellow';
  };});
  複製代碼

  • argument

  fn1( 1,2,3 );										// 實參——實際傳遞的參數
  // function fn1( a,b,c ){		// 形參——形式上，abc這些名錶明123
  function fn1(){
   //arguments => [ 1,2,3 ] —— 實參的集合
   alert( arguments );    -->[ 1,2,3 ]
   alert( arguments.length );   -->3
   alert( arguments[arguments.length-1] );像數組同樣，經過[]來定位參數}
  
  !!! 當函數的參數個數沒法肯定的時候：用 arguments
  以下：
  // alert( sum( 1,2,3 ) );				// 6
  // alert( sum( 1,2,3,4 ) );			// 10
  function sum (){
  var n = 0;
  for( var i=0; i<arguments.length; i++ ){
  	n += arguments[i];
  }
  return n;}
  複製代碼

  • 獲取元素樣式：要注意三點

    1. 獲取到的是計算機（瀏覽器）計算後的樣式

    2. background: url() red …… 複合樣式（不要獲取）

       backgroundColor 單同樣式（不要用來作判斷）

    3. 不要獲取未設置後的樣式：不兼容

  注：該$方法是上個return小應用裏面的自定義方法

alert( getComputedStyle( $('div1') ).width );      IE6 7 8 不兼容
		
 alert( $('div1').currentStyle.width );			標準瀏覽器不兼容


    例子1：對於以上兩個方法的使用，最好用if-else來多方位考慮
	
	if( $('div1').currentStyle ){               //當爲標準瀏覽器時
		alert( $('div1').currentStyle.width );
	} else {                                    //當爲ie 6 7 8時
                alert( getComputedStyle( $('div1')).width );
//		alert( getComputedStyle( $('div1'),1).width ); FF 4.0 以前要加一個參數，任何數字均可以，此處爲1
		}
    
    
    
例子2：自定義獲取元素的屬性方法getStyle方便之後調用
function getStyle(obj,attr){
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }
    
調用方法：    
    var div2 = document.getElementById('div1')
    getStyle(div2,'left'))
    若是要獲取右外邊距，不要寫成 getStyle( div2, 'margin-right' ) );
	正確寫法：alert( getStyle( div2, 'marginRight' ) );
複製代碼

• 定時器

定時器：時間概念
		var timer = setInterval( 函數, 毫秒 );	
		重複執行（發動機）
		clearInterval( timer );		
		清除定時器
		
		var timer = setTimeout( 函數, 毫秒 );
		
		僅執行一次！！一些須要重複操做定時器的操做不要用！！！
		clearTimeout( timer );
複製代碼

注：for(var i=0; i<3; i++){ document.title = i; }	-->瞬間i = 2
javascript的for循環瞬間完成，沒有時間根據

例子1：         
    功能：到i加到10自動中止
    i = 0;
    var timer = null;
    function fn1(){
    	i++;
	    document.title = i;
	
    	if( i === 10 ){
	    	clearInterval( timer );
	    }
    }
    timer = setInterval( fn1, 200 );


例子2：
功能：每秒切換一張圖片，循環顯示
var aBtn = document.getElementsByTagName('input');
var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
var timer = null;

var oBody = document.body;

aBtn[0].onclick = function (){
	clearInterval( timer );		
//必須先進行clearInterval()，才能按鈕的正常
  //  若是不先清除，由於屢次按第一個按鈕就會不斷的建立新timer（不會覆蓋以前的timer）
	
	timer = setInterval(function(){
		oBody.style.background  = 'url('+ arrUrl[num] +')';
		num++;
		num %= arrUrl.length;
	}, 1000);
};
aBtn[1].onclick = function (){
	clearInterval( timer );
};

例子3:這種只須要操做一次定時器的操做，能夠考慮用settimeout（）
功能：2s後顯示一張圖片，而後3s後再消失
window.onload = function (){
	var miaov = document.getElementById('miaov');
	
	setTimeout( function(){
		miaov.style.display = 'inline-block';   2s後顯示
		
		setTimeout(function(){  嵌套兩個定時器，顯示後3s再消失
			miaov.style.display = 'none';
		}, 3000);
		
	},  2000);
};

例子4:相似鼠標移到qq頭像，就會彈果，見《ex5定時器.html》

複製代碼

• 回調函數

功能：先右移到500，再往下移動到500
    
    Abtn[3].onclick = function(){
        move(Odiv,'left',12,500,function(){
            move(Odiv,'top',12,500)     ------>回調函數
        })
    };
    
    參數 obj:對象     attr：屬性
        temp:步長    end:終點位置
    回調函數endFn,第5個參數
    
    function move(obj,attr,temp,end,endFn){
        //判斷步長是正仍是負，也就是向前仍是向後
        temp = parseInt(getStyle(obj,attr))<end?temp:-temp;
        clearInterval( obj.timer );//要對同一timer進行變化和操做
        obj.timer = setInterval(function(){
//            判斷temp不能放在定時器內！由於定時器操做div的變化，每次變化temp都會變，
//            此處判斷temp正負是經過初始的left，而不是每時每刻的left值
//            temp = parseInt(getStyle(obj,'left'))<end?temp:-temp;
            var speed = parseInt(getStyle(obj,attr)) + temp ;

            if((speed > end) && (temp>0) || (speed < end) &&(temp<0) ){
                //判斷是往前仍是日後，經過經過傳參的temp正負來判斷
                speed = end;
            }

            obj.style[attr]= speed + 'px';

            if ( speed == end ) {   //可加不可加
                clearInterval( obj.timer );

//                待left操做結束再執行回調函數，因此放在這個if語句中
                endFn && endFn();
//                等同於以下語句
                /*若是endFn參數不爲空，就調用回調函數
                 if ( endFn ) {
                 endFn();
                 }
                 */
            }
        },30);
    }
複製代碼

日期對象-11

• 系統時間

var mytime = new Date();//獲取系統當前時間

- 而後經過一些方法獲取年，月，日，星期，天，時分秒，

    var iyear = mytime.getFullYear();//2017
    var imonth = mytime.getMonth()+1;//得出來的比真實月份小1，因此要加1
    var iday = mytime.getDate();//日
    var iWeek = mytime.getDay();
    var ihours = mytime.getHours();
//	alert(ihours);
    var imin = mytime.getMinutes();
    var isec = mytime.getSeconds();
    var str = '';
//	下面是日期的的一些對照
    if( iWeek === 0 ) iWeek = '星期日';
    if( iWeek === 1 ) iWeek = '星期一';
    if( iWeek === 2 ) iWeek = '星期二';
    if( iWeek === 3 ) iWeek = '星期三';
    if( iWeek === 4 ) iWeek = '星期四';
    if( iWeek === 5 ) iWeek = '星期五';
    if( iWeek === 6 ) iWeek = '星期六';
    str = iyear+'-'+imonth+'-'+iday+'-'+iWeek+'-'+ihours+':'+onTwo(imin)+':'+onTwo(isec);
    alert(str)//2017-7-28-星期五-17:23:45
    
    //設置時間：
    oDate.setDate( oDate.getDate() + 5 );//將天數加5天
   // toGMTString() 方法可根據格林威治時間 (GMT) 把 Date 對象轉換爲字符串，並返回結果。
    alert( oDate.toGMTString());



    注：爲了更佳合理，若是是1:8:2的時間應該要變成01:08:02，自定義函數onTwo()
    function onTwo ( n ) {
    //返回的是一個字符串
	return n < 10 ?  '0' + n : '' + n;
}
複製代碼

實例1:圖片時鐘(經過修改img標籤的src)
<body>
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <img src="img/0.JPG" />
    <!--圖片爲img的0～9的圖片，-->
<script>
    setInterval(date,1000);
    date();
//	圖片 時間顯示---------------------------------------------
  function date(){
    var Oimg = document.getElementsByTagName('img');
    var mytime = new Date();
    var ihours = mytime.getHours();
    var imin = mytime.getMinutes();
    var isec = mytime.getSeconds();
//    字符串單純拼接
    var str = onTwo(ihours)+onTwo(imin)+onTwo(isec);
		for(var i = 0; i < str.length; i++)
		{
			Oimg[i].src = 'img/'+str.charAt(i)+'.jpg'
//			alert(typeof(str.charAt(i)));//string
		}
  }
  
  </script>
複製代碼

• 倒計時

// 如今的時間點（在變）
// 將來的時間點（不變）
var iNow = new Date();
//法一：數字形式獲取時間的毫秒形式
 var iNew = new Date( 2017, 12, 23,  0,0,0  );//iNewh獲取的是毫秒爲單位


// 毫秒 -> 秒(向下取整--去掉小數點)
var t = Math.floor((iNew - iNow)/1000);
//死公式-轉換成 天 時 分 秒 的單位，記住
// 天：Math.floor(t/86400)
// 時：Math.floor(t%86400/3600)
// 分：Math.floor(t%86400%3600/60)
// 秒：t%60
var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'時'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';

alert( str );
// 法二：數字形式：new Date( 2013,4,1,9,48,12 );
//若是要經過某個控件來獲取將來的時間，建議用字符串形式，由於能夠經過dom操做引入value值
// 字符串形式：new Date('June 10,2013 12:12:12');

複製代碼

實例2:設置一個將來時間，而後顯示倒計時
<!--//若是要經過某個控件來獲取將來的時間，建議用字符串形式，由於能夠經過dom操做引入value值-->
距離：<input type="text" style="width: 200px;"value="November 27,2017 22:3:0"><br>
還剩：<input type="text"style="width: 200px;"><input type="button"value="開始倒計時">

<script>
    var Oinput = document.getElementsByTagName('input');
    Oinput[2].onclick = retime;//點擊事件

    function retime(){
	var timer = setInterval(function(){
            var iNow = new Date();
            var iEnd = new Date(Oinput[0].value);
            var t = Math.floor((iEnd-iNow) / 1000);
            var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+
            '時'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';

    Oinput[1].value = str;
	},1000);
	
</script>
複製代碼

測試一個方法的用時

var startime = +new Date();//+new date() == new Date().valueof()返回當前毫秒數
//這裏放測試的代碼
var endtime = +new Date();
console.log("耗時爲"+(endtime - startime)+'ms');
複製代碼

//+new Date() 中的+其實至關於.valueOf();
//  如下四句console代碼都是能夠返回當前時間的毫秒數
console.log(+new Date);//1512049475622
console.log(+new Date());// 1512049475622

var s = new Date();
console.log(s.valueOf());// 1512049475624
console.log(s.getTime());// 1512049475624
//如下是返回的字符串形式
console.log(s.toLocaleString()); //  2017/11/30 下午9:44:35
console.log(s.toLocaleDateString()); // 2017/11/30
console.log(s.toLocaleTimeString()); // 下午9:44:35
複製代碼

字符串方法-12

（1）
字符長度
var str = 'aaaaa';
   alert(str.length);
   str.length = 1;//可是使其長度爲1，無效
  alert(str);//仍是aaaaa
  
//  頭三個方法前面是接一個字符串
//第三個方法的前面是接String
alert( 'miaov'.charAt(2) );//輸出：字符串'miaov'第3個的字符
不能賦值給charAt()
alert( 'miaov'.charCodeAt(2) );//輸出字符串'miaov'第3個的字符的ASC編碼

//  String.fromCharCode()是能夠經過編碼返回對應的字符
//這就彈出23383和23443的字符（用，來隔開，能夠轉換多個）
alert( String.fromCharCode(22937, 21619) );//返回22937和 21619編碼對應的字符
複製代碼

（2）
alert( str.indexOf('m') );//返回str中查找第一個字符m的位置
// 若是第2個值爲負數，默認當成0來處理
alert( str.indexOf('m', 5) );//從第五個位置開始，返回str中查找第一個字符m的位置

  var str = '字符串';
  var str1 = '字符串 ';//空格也算字符長度

  alert( str.length );//str--3  str1--5(含兩空格)
  alert( str.charAt() );//找字符串的某一個，什麼都不寫和charAt(0)就是默認第一個，

  alert(str.charAt(0));
  alert( str.charCodeAt() );// 返回字符的計算機儲存編碼，字的編碼是23383

  alert( str.charCodeAt(1) );	//參數同charAt同樣
  // 0~9  48~57 	a~z	97~122		A~Z   65~90
  alert( String.fromCharCode(23383, 23383) );//字字

複製代碼

• substring()和slice()-截取字符串函數

var str = 'this is a bag';
str.substring(2);//從第2個位置開始截取-is is a bag
alert( str.substring(0,2) );//截取0-2位置的字符
// 兩個都是正數的狀況：能夠檢測兩個數大小，自動變成(0,2)，就和上一行同等
alert( str.substring(2,0) );
alert( str.substring(-3, 2) );		// -3 當成0處理
alert( str.substring(2, -3) );

slice()截取方法和substring()的區別：
alert( str.slice( 2, 0 ) );		// 不交換位置，但也沒有結果
alert( str.slice( -4, -2 ) );		// 負數從後面倒着往前數~
複製代碼

（4）
    字符串比較：第一個字符的編碼大小，即charCodeAt()的值
  	     alert( '莫濤' > '杜鵬' );//true
    	     alert( 'abbbbb' > 'b' );//false
 	     alert( '10000' > '2' );//false

    大小寫轉換:
        alert( str.toUpperCase() );			// 轉成大寫
        alert( str.toLowerCase() );			// 轉成小寫
複製代碼

• str.split()分割函數--能夠把字符串變成函數

var str = 'www.baidu.com';
//存儲的是一個數組形式,而後就能夠把arr看成數組來處理（可用數組的方法）
alert(str.split('.') );	// [ 'www', 'baidu', 'com' ]
var arr = str.split( '.' );
// alert( arr[1] );

var str1 = 'leo';
//若是不放置分割符，就是整個字符爲一個數組的元素
 alert( typeof str1.split() );			// [ 'leo' ]

//若是隻寫個空字符爲分割符，那就是每一個字符都分別分割
 alert( str1.split('') );			// [ 'l', 'e', 'o' ]

var str2 = '百度網頁';
alert( str2.split('度') );//['百','網頁']

var str3 = '/www.baidu.com/';
 alert( str3.split('/').length );//[ , www.baidu.com,  ].第一個和第三個是空格

var str4 = '2013-11-29-23-07';
//-分割，且只保留前3段
alert( str4.split('-', 3) );//['2013','11','29']	
複製代碼

• indexOf(),lastIndexOf(),search(),concat()

var str = 'abcsssbc';
   console.log(str.indexOf('bc',1));//1  第一次出現的字符串的位置
   console.log(str.indexOf('bc',2));//6  第二次出現的字符串的位置
//    沒找到返回-1
    console.log(str.lastIndexOf('bc'))//6 匹配的字符串最後出現的位置

    console.log(str.search(/bc/g));//返回於正則表達式查找內容匹配的第一個字符串的位置

    console.log(str.concat('aa'));//abcsssbcaa str和字符串aa進行拼接
複製代碼

• join()拼接函數 ->str.join()是以()裏面的內容來拼接，至關於split的對立面

例子：替換段落中的某些文字

（html）：
<p id="p1"><span>sadgergfsdfss阿斯頓設施的阿斯頓啊 啊實打實的爽膚水的方式水澱粉
水澱粉十大方式地方十大發生的法十大方式發的法十大法的身份 水澱粉是地方十大發生的  </span></p>


<div>替換文字</div>
<input type="text" value=""/>
<input type="text" />
<input type="button" value="替換" />

（js）：
//替換字符串裏面的指定字符串!
//	!!!!!若是這兩句話寫在外面，功能錯誤，爲何？
//	!!!!由於每次點擊都要獲取案件的值，獲取控件的值是須要經過點擊時間來操做的，而不是放在點擊事件外
//  var tar =aInp[6].value;
//  var trans = aInp[7].value;
  	aInp[8].onclick = function(){
      var tar =aInp[6].value;
      var trans = aInp[7].value;
      if (!tar)return;
      op.innerHTML = op.innerHTML.split(tar).join(trans);
      };
複製代碼

trim()方法 已移除前導空格、尾隨空格和行終止符的原始字符串。

var s = ' Hello ';
s.trim();
複製代碼

數組方法-13

• 標準的json格式{key:value}

var json = { name : 'leo', age : 32 };
alert( json.name );

var json2 = { name : 'miaov' };
//推薦寫成這個格式，key都用''圈住,對於增刪改查徹底等同
var json2 = { 'name' : 'miaov' };
//訪問的兩種方式，js任何的.均可以用[]取代，只是格式要注意
alert( json2.name );//適用於上面兩種寫法
alert( json2['name'] );//適用於上面兩種寫法
//替換值-兩種方式
json2.name = '妙味';
json2['name'] = 'miaov';
複製代碼

• json格式和數組的形式能夠互爲結合

//  { [], [], [] }		[ {}, {}, {} ]
var arr = [ { 'name' : 'TM', 'age' : 23 }, { 'name' : 'leo', 'age' : 32 } ];
 alert( arr[0].name + '今年有' + arr[1]['age']  );

var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小寵物', '圖片二', '圖片三', '面具' ];
//變成json格式
var imgData = {
	url : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
	text : [ '小寵物', '圖片二', '圖片三', '面具' ]
};
alert( imgData.url[2] );
複製代碼

• json格式的遍歷
  • json只能用的遍歷for in 語法,由於json沒有長度length
  • 數組，兩種for循環均可以使用

  var arr = [ 'a', 'b', 'c' ];
  
  第一種
  for ( var i in arr ) {
      alert( arr[i] );
  }
  
  第二種
  for (var i = 0;i < arr.length;i++){
    console.log(arr[i]);
  }
  複製代碼

var json4 = { 'name' : 'thomas', 'age' : 3, 'fun' : '前端開發'  };

for ( var attr in json4  ) {
	 alert( attr );//返回的是key--name,age,fun
	 alert( json4[attr] );//返回的是value--thomas,3,前端開發
}
//json和數組混合的遍歷
//var json5 = { [], [], [] }
var json5 = {
	'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
	'text' : [ '小寵物', '圖片二', '圖片三', '面具' ]
};
for ( var attr in json5 ) {
	for ( var i=0; i < json5[attr].length; i++ ) {
		alert( json5[attr][i] );
	}
}
// var arr = [ {}, {}, {} ];
var arr = [ { 'name' : 'TM', 'age' : 23 }, { 'name' : 'leo', 'age' : 32 } ];

for(var i = 0; i < arr.length; i++){
  for(var attr in arr[i]){
    console.log(arr[i][attr]);//TM 23 leo 32
    console.log(attr);//name age name age
  }
}
複製代碼

• 對象

//對象的遍歷方法和查詢方法

    var test = {"events": ["carrot", "exercise", "weekend"], "squirrel": false}
//    另外一種遍歷對象數組的方式
    for (item in test) {
      console.log(item);
    }
//    判斷某個元素是否在test對象數組裏面
    if(('events' in test)){
      console.log('event在test對象中');
    }

複製代碼

• 數組的狀況(push,unshift,pop,shift,splice,concat,reverse,replace)

數組定義
//   var arr = [ 1,2,3 ];
//   var arr = new Array(1,2,3);
//   alert( arr );

數組能夠存放多種數據類型的數據,
  var arr = [ 'aaa',2,3 ];
  //數組能夠查看長度，修改長度
  alert( arr.length );			// 3
   arr.length = 0;
  alert( arr );//null


//數組添加--------
  var arr = [ 1,2,3 ];
  alert(arr.push(4));//輸出添加4後的arr長度
  arr.push(4);//從後面添加4
  alert(arr);//1,2,3,4,4
	
  arr.unshift(5);//從前面添加
  // IE 6  7 不支持 unshift 返回值
	alert(arr.unshift(5));//同push
//  alert(arr);//5,5,1,2,3,4

//數組刪除----------
var arr = [ 1,2,3 ];
//	pop()從後刪除,shift()從前刪除，返回值都是被刪除的那個值
  var arr = [ 1,2,3 ];
   alert( arr.pop() );//3
   alert( arr );//1,2
  alert( arr.shift() );//1
  alert( arr );//2
  
//小實例----------
  var arr = [ 1,2,3 ];
  arr.push(arr.shift())
	alert(arr);//2，3，1至關於集體向前移一位
	arr.unshift(arr.pop());//至關於集體後前移一位，3,1,2
複製代碼

**注：**因爲unshift比push慢很是多，一個更好的解決辦法是：線reverse，在用push，而後再reverse就能夠完成相同的效果，並且效率更高

//splice()----------------	
splice()能夠刪除、替換、添加，可是返回值就是刪除、替換、添加的那個值（或那幾個值）
  var arr = [ 1,2,3 ];
//  刪除
  arr.splice(0,1);//從第0個位置開始，刪除一個，即1
  alert(arr);//2,3
//	添加
  arr.splice(0,0,'aaaaaa');//第0個位置，插入'aaaaaa'
	alert(arr);//aaaaaa.2,3
//替換
   arr.splice(0,2,5);//第0個位置，用5來替換後面兩個值
	alert(arr);//5,3
	
//concat()連接數組-------------
var arr1 = [ 1,2,3 ];
var arr2 = [ 4,5,6 ];
var arr3 = [ 7,8,9 ];

alert( arr1.concat( arr2, arr3 ) );//能夠鏈接多個數組

//倒序方法reverse()
var arr1 = [ 1,2,3,4,5,6 ];
 arr1.reverse();
 alert( arr1 );//6,5,4,3,2,1
//倒敘字符串
var str = 'abcdef';
//經過split轉爲數組，而後倒敘，再變爲字符串
 alert(str.split('').reverse().join(''));
 
 //replace（）替換
 // replace(/\//g, '') 的做用是把/替換成''。
  var aa= "adsdd/sdsd12/";
bb=aa.replace(/\//g, '') ;//bb=adsddsdsd12
解釋：1。/pattern/是正則表達式的界定符，裏面的內容(pattern)是要匹配的內容，就是本例中的/\//；
2。\是轉義的意思，\/表明的是/字符。
3。JavaScript中應該是字符串的replace() 方法若是直接用str.replace(/\//g, '')只會替換第一個匹配的字符. 而str.replace(/\//g, '')則能夠替換掉所有匹配的字符（g爲全局標誌）。
複製代碼

• sort排序

var arr = [ 'c', 'd', 'a', 'e' ];
 arr.sort();
 alert( arr );//a,c,d,e 默認按照字符排序

var arr2 = [ 4,3,5,5,76,2,0,8 ];
 arr2.sort();
// 對純數字排序時，默認狀況是錯誤的，8<76
 alert( arr2 );//0,2,3,4,5,5,76,8
 
 自定義排序規則
 arr2.sort(function ( a, b ) {
//	若是a-b<0不動，反之調換位置
	return a - b;
	
//	若是b-b<0不動，反之調換位置
//	return b-a;降序
});
alert( arr2 );//0,2,3,4,5,5,8,76
複製代碼

例子1：若是對var arrWidth = [ '345px', '23px', '10px', '1000px' ];排序？

arrWidth.sort(function ( a, b ) {
//轉化爲數字，而後排序
	return parseInt(a) - parseInt(b);
});
複製代碼

例子2:自定義一個打亂數組次序的函數 var arr = [ 1,2,3,4,5,6,7,8 ];

arr.sort(function ( a, b ) {
//random()函數是0～1的隨機數，若是>0.5就調換位置
    return Math.random() - 0.5;
});
複製代碼

• 隨機函數

alert( Math.round(3.4) );//四捨五入--4
 Math.random();//0~1的隨機數
 
 //0~10
 alert( Math.round(Math.random()*10) );

 //5~10
 alert( Math.round( Math.random()*5 + 5 ) );

 //20~100
 alert( Math.round( Math.random()*80 + 20 ) );

 // x ~ y
var x = 3;
var y = 49;
alert( Math.round( Math.random()*(y-x) + x ) );

// 0~x
 alert( Math.round( Math.random()*x) );

// 1~x
alert( Math.ceil( Math.random()*x) );//ceil()向下取整
複製代碼