二、JavaScript 基礎二（從零學習JavaScript）

時間 2019-11-25

原文原文鏈接

十一、強制轉換html

強制轉換主要指使用Number、String和Boolean三個構造函數，手動將各類類型的值，轉換成數字、字符串或者布爾值。ajax

1>Number強制轉換express

參數爲原始類型值的轉換規則：設計模式

原始類型的值主要是字符串、布爾值、undefined和null，它們都能被Number轉成數值或NaN。
NaN：not a number，當數學計算得不到數字結果時，該值就是NaN(Number類型)。
isNaN：判斷變量是否爲NaN。

Number(324)	值：324	字符串若是能夠被解析爲數值，則轉換爲相應的數值
Number('324abc')	值：NaN	字符串：若是不能夠被解析爲數值，返回NaN
Number('')	值：0	空字符串轉爲0
Number(true) 、Number(false)	值：一、0	布爾值：true 轉成1，false 轉成0
Number(undefined)	值：NaN	undefined：轉成 NaN
Number(null)	值：0	null：轉成0

Number函數將字符串轉爲數值，要比parseInt函數嚴格不少。基本上，只要有一個字符沒法轉成數值，整個字符串就會被轉爲NaN。
參數爲對象的轉換規則：簡單的規則是，Number方法的參數是對象時，將返回NaN。數組

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN

實際上，Number背後的真正規則複雜得多，內部處理步驟以下：
1：調用對象自身的valueOf方法。若是返回原始類型的值，則直接對該值使用Number函數，再也不進行後續步驟。
2：若是valueOf方法返回的仍是對象，則改成調用對象自身的toString方法。若是返回原始類型的值，則對該值使用Number函數，再也不進行後續步驟。
3：若是toString方法返回的是對象，就報錯。框架

2>String強制轉換參數爲原始類型值的轉換規則：
數值：轉爲相應的字符串。
字符串：轉換後仍是原來的值。
布爾值：true轉爲"true"，false轉爲"false"。
undefined：轉爲"undefined"。
null：轉爲"null"。

參數爲對象的轉換規則：String方法的參數若是是對象，返回一個類型字符串；若是是數組，返回該數組的字符串形式。

String內部處理步驟以下：
1：先調用對象自身的toString方法。若是返回原始類型的值，則對該值使用String函數，再也不進行如下步驟。
2：若是toString方法返回的是對象，再調用valueOf方法。若是返回原始類型的值，則對該值使用String函數，再也不進行如下步驟。
3：若是valueOf方法返回的是對象，就報錯異步

/* * 強制類型轉換 * - 指將一個數據類型強制轉換爲其餘的數據類型 * - 類型轉換主要指，將其餘的數據類型，轉換爲String 、Number 、Boolean * */

/* * 將其餘的數據類型轉換爲String * 方式一： * - 調用被轉換數據類型的toString()方法 * - 該方法不會影響到原變量，它會將轉換的結果返回 * - 可是注意：null和undefined這兩個值沒有toString()方法，若是調用他們的方法，會報錯 * * 方式二： * - 調用String()函數，並將被轉換的數據做爲參數傳遞給函數 * - 使用String()函數作強制類型轉換時， * 對於Number和Boolean實際上就是調用的toString()方法 * 可是對於null和undefined，就不會調用toString()方法 * 它會將 null 直接轉換爲 "null" * 將 undefined 直接轉換爲 "undefined" * */

//1.調用被轉換數據類型的toString()方法
var a = 123; a = a.toString(); console.log(typeof a); //string
 a = true; a = a.toString(); console.log(typeof a); //string
 a = null; a = a.toString(); console.log(typeof a); //報錯，Uncaught TypeError: Cannot read property 'toString' of null
 a = undefined; a = a.toString(); console.log(typeof a); //報錯，Uncaught TypeError: Cannot read property 'toString' of undefined

//---------------------------------------------------------------------------------------------

//2.調用String()函數，並將被轉換的數據做爲參數傳遞給函數
a = 123; a = String(a); console.log(typeof a); //string
 a = null; a = String(a); console.log(typeof a); //string
 a = undefined; a = String(a); console.log(typeof a); //string

//3.我用Java中的方法，發現也是能夠的
var b = 123; b = "" + b; console.log(typeof b); //string

3>Boolean強制轉換ide

參數爲原始類型值的轉換規則：轉換規則相對簡單：除了如下六個值的轉換結果爲false，其餘的值所有爲true。
undefined、null、-0、0或+0、NaN、''（空字符串）
參數爲對象的轉換規則：全部對象（包括空對象）的轉換結果都是true。函數

12、自動轉換

（自動轉換具備不肯定性，並且不易除錯，建議在預期爲布爾值、數值、字符串的地方，所有使用Boolean、Number和String函數進行顯式轉換。）post

自動轉換的規則：預期什麼類型的值，就調用該類型的轉換函數。好比，某個位置預期爲字符串，就調用String函數進行轉換。若是該位置多是字符串，也多是數值，那麼默認轉爲數值。
1：自動轉換爲布爾值：當JavaScript遇到預期爲布爾值的地方（好比if語句的條件部分），就會將非布爾值的參數自動轉換爲布爾值。系統內部會自動調用Boolean函數。

if ( !undefined && !null && !0 && !NaN && !'' ) { console.log('true'); } // true

// 寫法一 expression ? true : false

// 寫法二 !! expression

2：自動轉換爲字符串：當JavaScript遇到預期爲字符串的地方，就會將非字符串的數據自動轉爲字符串。系統內部會自動調用String函數。字符串的自動轉換，主要發生在加法運算時。當一個值爲字符串，另外一個值爲非字符串，則後者轉爲字符串。（+號的拼接字符串的做用）

**自動轉換爲字符串舉例**
'5' + 1 // '51'	'5' + true // "5true"	'5' + false // "5false"	'5' + {} // "5[object Object]"
'5' + [] // "5"	'5' + function (){} // "5function (){}"	'5' + undefined // "5undefined「	'5' + null // "5null"

3：自動轉換爲數值：當JavaScript遇到預期爲數值的地方，就會將參數值自動轉換爲數值。系統內部會自動調用Number函數。

自動轉換爲數值舉例
'5' - '2' =3	'5' * '2'=10	false - 1=-1	true - 1= 0
'5' * [] = 0	'1' - 1 = 0	false / '5' = 0	'abc' - 1 = NaN

4.除加法運算符有可能把運算子轉爲字符串，其餘運算符都會把運算子自動轉成數值。

+'abc' // NaN -'abc' // NaN +true // 1 -false // 0

特殊：（具體緣由經過度娘尋根問底）

null == undefined // true

null == false // false

undefined == false // false

var str;
//undefined
console.log("只定義未初始化的str類型"+typeof(str)+"只定義未初始化的str值"+str)
var strone="";
//string
console.log("初始化爲\"\"的str類型"+typeof(strone)+"初始化爲\"\"的str值"+strone)
var strtwo=new String();
//無值至關於"";
if(""==strtwo)
console.log("初始化爲new String()的str類型"+typeof(strtwo)+"初始化爲new String()的str值"+strtwo)
var strthree=null;
//object
console.log("初始化爲null的str類型"+typeof(strthree)+"初始化爲null的str值"+strthree)    
var strfour={};
//object
console.log("初始化爲{}的str類型"+typeof(strfour)+"初始化爲{}的str值"+strfour)

十3、三大結構

1.順序結構

2.選擇結構

3.循環結構（當循環結構和直到型循環結構）

十4、JavaScript語句

（一）選擇語句

1）if語句

（1）單一選擇結構：if(){}　　

var x=5,y=8; if(y>x) { 　　alert("x>y");}

（2）二路選擇結構：if(){}else{}

// 判斷：若是第一個值大於第二個值則alert（OK！）
var x=5,y=8;
if(y> x){
　　 document.write('OK!');
}
else{
　　document.write('NOT OK!');
}

（3）三目運算符：?：　(condition ? if_true : if_false;)　

var x=5,y=8; alert(x> y? 'OK!' : 'NOT OK!')

（4）多路選擇結構：if(){}else if(){}else if(){}else{}

多路選擇結構流程圖：

//此處給出主要代碼爲例
   if(sScore >= 0 && sScore < 60) {
        alert('不及格，日常幹啥啦！');
    } else if(sScore >= 60 && sScore < 70) {
        alert('剛剛及格，繼續努力！');
    } else if(sScore >= 70 && sScore < 80) {
        alert('通常，再接再礪！');
    } else if(sScore >= 80 && sScore < 90) {
        alert('良好，穩住，你能夠的！');
    } else if(sScore >= 90 && sScore < 100) {
        alert('優秀，戒驕戒躁，爭取滿分！');
    } else if(sScore == 100) {
        alert('勞逸結合，注意身體！');
    } else {
        alert('分數非法！');
   }

2）switch語句（考慮多路選擇的案例轉換爲switch實現，提示：case後的是具體的狀況，多路選擇是以表達式的方式進行判斷，即點和麪的關係。如：80-90範圍這個面經過除以10，而後經過parseInt進行取整。（面轉成點））

語法：switch(condition){case :break;default:}

break具體講解：阻止代碼向下一個case運行。防止case穿透（穿透性用的好仍是挺6的，有時間後續補充案例：給定依據具體日期得出這是本年的第多少天的案例）。
default具體講解：匹配不存在時作的事情。
switch：嚴格檢查類型（形似===的檢查），若是不統一，條件不成立（好比說數字的字符串和case後的Number後的數字沒法匹配，需轉成相同的類型）

// 斷定
switch(iWeekday){
　　//利用穿透性
　　case 0:
　　case 7:
　　　　alert('星期天');
　　　　break;
　　case 1:
　　　　alert('星期一');
　　　　break;
　　case 2:
　　　　alert('星期二');
　　　　break;
　　case 3:
　　　　alert('星期三');
　　　　break;
　　case 4:
　　　　alert('星期四');
　　　　break;
　　case 5:
　　　　alert('星期五');
　　　　break;
　　case 6:
　　　　alert('星期六');
　　　　break;
　　default:
　　　　alert('非法數據！');
}

（二）循環語句

1）for循環語句

// for循環語法
/*
    for(var i = 0; i < 10; i++){
        code...
    }
*/
 
for(var a = 4; a < 10; a++) {
    document.write(a);
}
 
// for循環的嵌套
for(var i = 0; i < 5; i++) {
    for(var j = 0; j < 5; j++) {
        document.write(i*j + '、');
    }
    document.write('<br>');
}

2）for in語句（能夠遍歷數組和對象，常常用於遍歷對象）

遍歷數組

var names = ["nick", "jenny"];
  
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

遍歷對象

var obj = {name: '張三', age: 24, hobby: ['打籃球', '搏擊', '打乒乓球']};
for(var attr in obj) {
    console.log(obj[attr]);
}

3）while循環語句

/*
　　while語法
while(condition){
　　code...
}
*/
var a = 4;
 
while(a < 10) {
    document.write(a);
    a++;
}

4）do-while語句

/*
do...while語法
do{
　　code...
}while(condition);
*/
var a = 4;
do{
　　document.write(a);
　　a++;
}
while(a < 10);
// while和do...while的區別：執行的順序不同
//do...while至少會執行一次代碼塊,while有可能一次都不執行。

（三）Label語句

//label語句   跳出雙重循環   例：條件 i=5 j=5 時  跳出嵌套的雙重for循環   num=55;
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); //控制檯輸出

（四）異常處理

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

補充：break和continue的區別

// break和continue
for(var i = 0; i < 10; i++) {
    if(i === 5) {
        break;
    }
    document.write(i);
}
for(var i = 0; i < 10; i++) {
    if(i === 5) {
        continue;
    }
    document.write(i);
}
// 區別：break終止循環，continue跳過當前循環。
// 共同點：都不會執行後面的代碼

十5、函數

函數的概念：函數就是把完成特定功能的一段代碼抽象出來，使之成爲程序中的一個獨立實體，起個名字（函數名）。能夠在同一個程序或其餘程序中屢次重複使用（經過函數名調用）。
注：編寫好的函數代碼只有經過調用纔會執行，不調用的時候不會執行（自執行函數特例）。
函數的做用（好處）：
1，使程序變得更簡短而清晰
2，有利於程序維護
3，能夠提升程序開發的效率 ,
4，提升了代碼的重用性(複用性)

1>函數的建立方式

// 函數聲明式的方式建立函數
　 function funcName() {}
 
// 函數表達式的方式建立函數
　　var funcName = function () {};
 
// 經過構造函數的方式建立函數
// 構造函數：出如今new運算符後的函數，稱爲構造函數
　　var funcName = new Function ();

函數聲明式和函數表達式的區別

// 函數聲明式的方式必須指定函數名
function sum() {
    alert(1);
}
sum();
// 函數表達式的方式能夠沒有名字
 (function () {
    alert(1);
 })();

2>函數的調用方式

//建立函數
function hello() {
　　 document.write('hello ');
　　 document.write('world ');
 }
// 方式1：手動調用
 hello();
// 方式2：事件驅動的方式
 var oBox = document.getElementById('box');
oBox.onclick = function () {
　　 hello();
 };

3>函數的參數（形參和實參）

1.手動傳遞的形參和實參

//函數定義時,定義的變量爲形參：a,b
function sum(a, b) {
    alert(a + b);
}//函數調用時，傳遞的參數值爲實參：4,8
sum(4, 8);

補充：對象中，冒號前面的數據能夠稱爲鍵、下標、或者key，冒號後面的值稱爲值或者value

2.JS解析器內置定義的arguments （在函數內部的內置的對象參數，無需自定義可直接使用）

arguments 值類型（對象類型），包含的是實參的個數和數據

function sum(a, b) {
    // 經過下標的方式獲取某一個值
    console.log(arguments[0]);
    // 經過遍歷的方式獲取全部的值（下標0起始）
    for(var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]); //分別控制檯打印5,3,8
    }
    a++; //a和arguments[0]和指向相同結果可想而知,相同爲6
    console.log(arguments[0]); //6 
    console.log(a); //6 
} 
//手動調用函數 
sum(5, 3, 8);

3.return（返回函數執行的結果）

// return關鍵詞
function sum(a, b) {
    var c = a + b;
    return c;/*!return只能返回參數只能有一個。return a,b,c 最終返回的結果是c的結果，不會報錯*/
    /*!return 後面的代碼不會執行*/
    alert('hello world!');//永遠不會被執行
    // 函數默認返回的值是undefined
}
var d = sum(4, 7);
console.log(d);

十6、js的解析順序

第一步：加載第一個script代碼塊
第二步：語法檢查
第三步：預解析（將var聲明的變量和聲明式建立的函數放到代碼的最前面）
第四步：開始正式執行代碼，從上往下。
第五步：加載第二個script代碼塊。

sum();
var sum = function () {
    console.log(a + 8);
}
alert(a);   //undefined
alert(b);   //報錯
var a = 5;
 
//代碼預解析時，先將a和sum變量放到代碼最前方，而後建立代碼  var a,sum;而後自上而下執行代碼
//預編譯的代碼結構：
//var a,sum;
//sum();
//var sum = function () {
//  console.log(a + 8);
//}
//alert(a);   //undefined
//alert(b);   //報錯
//a = 5;

十7、對象

由若干個鍵值對組成的無序集合。每一個屬性存放一個原始值，對象或函數

屬性：用屬性值來描述他的狀態

行爲：用來改變隊形的行爲方法

1>對象申明

var obj = {
    name: 'jimmy',
    introduce: function () {
        console.log('我叫jimmy!');
    }
};
// 經過Object構造函數建立對象
// var obj = new Object();
// 經過自定義的構造函數建立對象
// function Animal() {}
// var dog = new Animal();
// console.log(dog);

2>對象的操做

建立對象：

 var bird = {feather: '羽毛', 'color': 'white', "type": '鳥類'};
 var dog = {};

<1>對象調用

console.log(bird.feather);
console.log(bird["feather"]);

<2>對象增長

方式1：經過.的方式

 dog.name = '旺財';
 dog.wagTails = function () {
　　 console.log('旺財正在搖尾巴！');
};

// dog.wagTails();//調用

方式2：經過[]的方式

dog["name"] = '大黃';
dog['tongues'] = function () {
　　alert('大黃正在吐舌頭！');
}
//dog.tongues();
//console.log(dog);

<3>對象修改

bird.feather = 'wing';
bird.color = 'pink';

<4>對象刪除

delete bird.feather;

<5>對象清空

bird = {};

<6>對象銷燬

// JS的垃圾回收機制：JS引擎檢測內存，若是某個對象沒有被變量引用，那麼就會直接回收該對象
var obj = {size: 100000000}; 
obj = null;

十8、值傳遞和址傳遞（引用傳遞）

值傳遞：若是變量的值是基本數據類型，那麼傳遞值的時候採用的是值傳遞（把值複製一份給另一個變量）。
址傳遞：若是變量的值是引用數據類型，那麼傳遞值的時候採用的是址傳遞（把地址複製一份給另一個變量）。
相關聯想函數指針（地址）
值類型和引用類型內存存儲的位置分爲棧（小區域少許數據）和堆（大片區域大量數據）

//值類型（值相同，從新開闢內存空間）
var a= 10;
var b = a;
a = 0;
console.log(b);//10
 
//引用類型(地址相同，一塊兒變)
var a = {num: 10};
var b = a;
a.num = 0;
console.log(b.num);//0

var a = {
    name: '張三'
};
var b = {
    name: a
};
var c = b;
var d = {
    name: '李四'
};
c.name = d;
console.log(b.name.name);//張三

十9、經常使用函數類型

1>回調函數（指針：經過函數名稱的方式執行的函數）

回調函數就是一個經過函數指針調用的函數。若是你把函數的指針（地址）做爲參數傳遞給另外一個函數，當這個指針被用爲調用它所指向的函數時，咱們就說這是回調函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。

所以，回調本質上是一種設計模式，而且jQuery(包括其餘框架)的設計原則遵循了這個模式。

在JavaScript中，回調函數具體的定義爲：函數A做爲參數(函數引用)傳遞到另外一個函數B中，而且這個函數B執行函數A。咱們就說函數A叫作回調函數。若是沒有名稱(函數表達式)，就叫作匿名回調函數。

所以callback 不必定用於異步，通常同步(阻塞)的場景下也常常用到回調，好比要求執行某些操做後執行回調函數。

例子
一個同步(阻塞)中使用回調的例子，目的是在func1代碼執行完成後執行func2。

var func1=function(callback){
  //do something.
  (callback && typeof(callback) === "function") && callback();
}
func1(func2);
  var func2=function(){
}

function sum(a, b, fn) {
    var c = a + b;
    if(c > 9) {
        fn();
    }
    console.log(c);
} 
sum(7, 5, function () {
    alert(1);
});

回調函數的使用場合

資源加載：動態加載js文件後執行回調，加載iframe後執行回調，ajax操做回調，圖片加載完成執行回調，AJAX等等。
DOM事件及Node.js事件基於回調機制(Node.js回調可能會出現多層回調嵌套的問題)。

setTimeout的延遲時間爲0，這個hack常常被用到，settimeout調用的函數其實就是一個callback的體現

鏈式調用：鏈式調用的時候，在賦值器(setter)方法中(或者自己沒有返回值的方法中)很容易實現鏈式調用，而取值器(getter)相對來講很差實現鏈式調用，由於你須要取值器返回你須要的數據而不是this指針，若是要實現鏈式方法，能夠用回調函數來實現setTimeout、setInterval的函數調用獲得其返回值。因爲兩個函數都是異步的，即：他們的調用時序和程序的主流程是相對獨立的，因此沒有辦法在主體裏面等待它們的返回值，它們被打開的時候程序也不會停下來等待，不然也就失去了setTimeout及setInterval的意義了，因此用return已經沒有意義，只能使用callback。callback的意義在於將timer執行的結果通知給代理函數進行及時處理。

2>遞歸函數（自身調用自身的函數）

/*
遞歸函數調用分析：
    {
        var num = 1;
        num++; // 2
        if(num < 5) {
            {
                var num = 2;
                num++; // 3
                if(num < 5) {
                    {
                        var num = 3;
                        num++; // 4
                        if(num < 5) {
                            {
                                var num = 4;
                                num++; // 5
                                if(num < 5) {
                                    print(num);
                                }
                                console.log(num); // 5
                            }
                        }
                        console.log(num);
                    }
                }
                console.log(num);
            }
        }
        console.log(num);
    }
*/
 
function print(num) {
    num++;
    if(num < 5) {
        print(num);
    }
    console.log(num);
}
 
print(1);

3>匿名函數

(function () {})();

4>構造函數

function Person() {
    alert(1);
}
var obj = new Person();
console.log(obj);

二10、數組

定義：數組是一個能夠存儲一組或一系列相關數據的容器。

爲何要使用數組？

1：爲了解決大量相關數據的存儲和使用的問題。

2：模擬真實的世界（班級、軍隊）。

1>數組的操做

1）建立數組

　　(1)構造函數的方式：var a=new Array()；

　　(2)隱式聲明的方式：var b=[];

2）數組的賦值

構造函數函數的方式

（1）直接賦值：var a=new Array(數據1，數據2，…);

　注：var a=new Array(數值) 若是括號中只有一個元素，而且這個元素是數值類型的，那麼他就是指定數組的長度。而且它的值都是undefined。

　　數組的屬性:length 屬性（獲取整個數組的長度）。

（2）先聲明後賦值：var a=new Array(); a[0]=1; a[1]=2; a[2]=3;

隱式聲明賦值

（1）直接賦值: var a=[1,2,3,4];

（2）聲明之後再賦值: var a=[]; a[0]=1; a[1]=2; a[2]=3;

注：JS數組能夠存儲任何類型的值。eg: arr[3] = function () {};

3）訪問數組

　　經過數組的(中括號)下標訪問。

　 arr[0-(length-1)] //數組下標從0開始，他的最大值，是length-1。

　　arr['name'] //關聯數組經過下表字符串進行訪問

4) 修改數據:

arr[3] = '修改的數據';

5)刪除數據:

delete arr[1];

6)遍歷數組

1：for循環。

for(var i = 0; i < arr.length; i++) {
　　console.log(arr[i]);
}

2：while循環。

var i = 0;
while(i < arr.length) {
　　console.log(arr[i]);
　　i++;
}

3：for in循環。(遍歷數組不經常使用)

　　數組的遍歷。

for(var attr in arr){
　　//attr 數組的下標
　　console.log(arr[attr])
}

對象屬性的遍歷。

// 使用for in 遍歷對象
var obj = {name: '小明', age: 24, hobby: ['打籃球', '搏擊', '打乒乓球']};
for(var attr in obj) {
　　console.log(obj[attr]);
}

2>數組分類

1：按照下標的類型

1.下標是數字的類型叫作(索引數組)

var arr = ['1', '2' , '3'];

2.下標是字符串類型叫作(關聯數組)，必須經過對象模擬的形式才能實現，通常不用。

var arr = [];
arr['name'] = '張三';
arr['age'] = '28';

3：按照維度來分類

1.一維數組經常使用的數組就是一維數組

2.二維數組，經過對象模擬的形式才能實現。

聲明二維數組:

 var arr=[[1,2,3],[4,5,6]];    alert(arr[1][1]); //值5

3>數組的屬性

（1）length：設置或返回數組元素的數目。（可讀可寫）

length屬性控制數組的讀：console.log(arr.length-1);

length屬性控制數組的寫：arr.length = 6;

（2）constructor：返回構造函數的引用。（輸出constructor的返回值：Array）

4>數組的方法(加粗經常使用)

　　前五個對原始對象的操做

1. arr.push(數組元素1,數組元素2,........) 　　向數組的末尾加入新元素 | 返回值：新數組的長度

eg:arr.push('追加元素1','追加元素2')；

2.arr.unshift(數組元素1,數組元素2,........)　　向數組的開頭加入新元素 | 返回值是新數組的長度。

eg:arr.unshift(開頭新元素1,開頭新元素2)

3. arr.pop() 　　刪除數組的最後一個元素 | 返回值是刪除的元素。

var first = arr.pop();

4. arr.shift()　　刪除數組的第一個元素 | 返回刪除的元素。

var first = arr.shift();

5.萬能的添加刪除函數 arr.splice(index,數量,添加的元素.....) 　注：前倆個元素必須有

(1)index 從何處開始添加或刪除，必須是數值類型(數組的下標)

(2)數量規定了刪除的個數，若是是0，則不刪除。

(3)須要添加的元素，能夠看成替換的元素。

(4)若是有刪除的元素，以數組的方式返回刪除的元素。

// 添加元素
arr.splice(2, 0, '王五');
// 修改元素
arr.splice(1, 1, '王五');
//修改與添加
arr.splice(1, 1, '王五'，'李四');
// 刪除元素
var del = arr.splice(1, 1);

6.arr.join([分隔符]) 把數組元素按照指定分隔符組合成一個字符串，若是沒有指定分隔符，默認是用「,」分割 | 返回結果就是組合成的字符串。

var param = {
    q: '棉衣',
    commend: 'all',
    search_type: 'item'
};
 
var aParam = [];
for(var attr in param) {
    aParam.push(attr + '=' + param[attr]);
}
console.log(aParam.join('&'));  //以字符&分割鏈接數組
//結果：q=棉衣&commend=all&search_type=item

7. arr.slice()　數組的分割。從截取指定的開始位置，到結束位置(不包括)的元素。若是不指定結束位置，則從指定的開始位置，取到結尾(數組的下標)。

支持負數(-1開頭) 返回的是新數組。 不改動原來的數組。正數和負數都是向右查找

var arr = ['宋江', '盧俊義', '武松', '楊雄', '石秀', '魯智深'];
var newArr = arr.slice();至關於拷貝數組
var newArr = arr.slice(2);//不指定結束爲止，默認爲截取到最後
var newArr = arr.slice(2, 5);//結果爲下標爲二、三、4的數組元素，不包含爲指定結尾下標數的元素
var newArr = arr.slice(-2, -1);  //從末尾開始計數分割  只能按照從左向右的順序進行截取，即不支持arr.slice(-1, -2)   結果：'石秀'

8. arr.concat() 鏈接兩個或更多的數組，並返回新數組，對原數組沒有任何影響。

eg:arr1.concat(arr2)  //將數組arr1和arr2鏈接成新數組返回

9.arr.reverse()　　數組翻轉方法。改變原數組

arr.reverse(arr)  //將數組翻轉

10. arr.sort() 對數組進行排序，若是沒有參數，則按照字母的編碼進行排序，若是要按照其餘的順序來排序，要提供一個函數。

回調函數會提供兩個參數(a,b)。

a<b a在b前。

a=b 順序按照原樣輸出。

a>b b在a前。

['d', 'c', 'b', 'a'].sort()　　// ['a', 'b', 'c', 'd'] 
[4, 3, 2, 1].sort()　　// [1, 2, 3, 4] 
[11, 101].sort()　　// [101, 11] 
[10111, 1101, 111].sort()　　// [10111, 1101, 111]

若是想讓sort方法按照自定義方式排序，能夠傳入一個函數做爲參數，表示按照自定義方法進行排序。該函數自己接受兩個參數，表示進行比較的兩個元素。若是返回值大於0，表示第一個元素排在第二個元素後面；其餘狀況下，都是第一個元素排在第二個元素前面。

返回值正直交換零、負值不交換負值降序正值升序

 [10111, 1101, 111].sort(function (a, b) { 
     return a - b; //回調函數
})   //輸出結果： [111, 1101, 10111] 
[ { name: "張三", age: 30 }, { name: "李四", age: 24 }, { name: "王五", age: 28 } ].sort(function (o1, o2) { 
    return o1.age - o2.age;
})   // [ { name: "李四", age: 24 }, { name: "王五", age: 28 }, { name: "張三", age: 30 } ]

二11、排序

1>冒泡排序

// 冒泡排序：從前日後對相鄰的兩個數依次進行比較和調整，讓較大的數往下沉，較小的往上冒 var arr = [23, 34, 11, 22, 19, 18]; /* 冒泡排序的思路分析： 第1輪 第1步：[23, 34, 11, 22, 19, 18] 第1輪 第2步：[23, 11, 34, 22, 19, 18] 第1輪 第3步：[23, 11, 22, 34, 19, 18] 第1輪 第4步：[23, 11, 22, 19, 34, 18] 第1輪 第5步：[23, 11, 22, 19, 18, 34] 第2輪 第1步：[11, 23, 22, 19, 18, 34] 第2輪 第2步：[11, 22, 23, 19, 18, 34] 第2輪 第3步：[11, 22, 19, 23, 18, 34] 第2輪 第4步：[11, 22, 19, 18, 23, 34] 第3輪 第1步：[11, 22, 19, 18, 23, 34] 第3輪 第2步：[11, 19, 22, 18, 23, 34] 第3輪 第3步：[11, 19, 18, 22, 23, 34] 第4輪 第1步：[11, 19, 18, 22, 23, 34] 第4輪 第2步：[11, 18, 19, 22, 23, 34] 第5輪 第1步：[11, 18, 19, 22, 23, 34] */

for(var i = 1; i < arr.length; i++) {
    // 內層for循環肯定每輪的步數
    for(var j = 0; j < arr.length - i; j++) {
        // 兩兩比較
        if(arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}

2>選擇排序

//選擇排序：兩兩比較，找到最大值(或者最小值)以後，將其放在正確的位置，其餘數的位置不變。 /* 選擇排序的思路分析： 第1輪 第1步：var iMinK = 0; 第1輪 第2步：23 和 34比較，什麼也不作 第1輪 第3步：23 和 11比較，iMinK = 2 第1輪 第4步：11 和 22比較，什麼也不作 第1輪 第5步：11 和 19比較，什麼也不作 第1輪 第6步：11 和 18比較，什麼也不作 第1輪 第7步：下標0和下標2進行位置交換 [11, 34, 23, 22, 19, 18] 第2輪 第1步：var iMinK = 1; 第2輪 第2步：34 和 23比較，iMinK = 2 第2輪 第3步：23 和 22比較，iMinK = 3 第2輪 第4步：22 和 19比較，iMinK = 4 第2輪 第5步：19 和 18比較，iMinK = 5 第2輪 第6步：下標1和下標5進行位置交換 [11, 18, 23, 22, 19, 34] */

// 外層for循環肯定輪數
for(var i = 0; i < arr.length - 1; i++) {
    // 記錄最小值的下標
    var iMinK = i;
    for(var j = i + 1; j < arr.length; j++) {
        if(arr[iMinK] > arr[j]) {
            iMinK = j;
        }
    }
    // 交換數據
    if(iMinK !== i) {
        var temp = arr[i];
        arr[i] = arr[iMinK];
        arr[iMinK] = temp;
    }
}

3>插入排序

在要排序的一組數中，假設前面的數已是排好順序的，如今要把第n個數插到前面的有序數中，使得這n個數也是排好順序的。如此反覆循環，直到所有排好順序。


/* 插入排序的思路分析： 第1輪 第1步：[23, 34, 11, 22, 19, 18] 第2輪 第1步：[23, 11, 34, 22, 19, 18] 第2輪 第2步：[11, 23, 34, 22, 19, 18] 第3輪 第1步：[11, 23, 22, 34, 19, 18] 第3輪 第2步：[11, 22, 23, 34, 19, 18] 第3輪 第3步：[11, 22, 23, 34, 19, 18] 第4輪 第1步：[11, 22, 23, 19, 34, 18] 第4輪 第2步：[11, 22, 19, 23, 34, 18] 第4輪 第3步：[11, 19, 22, 23, 34, 18] 第4輪 第4步：[11, 19, 22, 23, 34, 18] 第5輪 第1步：[11, 19, 22, 23, 18, 34] 第5輪 第2步：[11, 19, 22, 18, 23, 34] 第5輪 第3步：[11, 19, 18, 22, 23, 34] 第5輪 第4步：[11, 18, 19, 22, 23, 34] 第5輪 第5步：[11, 18, 19, 22, 23, 34] */

for(var i = 1; i < arr.length; i++) {
    // 內層的for循環
    for(var j = i; j > 0; j--) {
        if(arr[j] < arr[j - 1]) {
            var temp = arr[j];
            arr[j] = arr[j - 1];
            arr[j - 1] = temp;
        } else {
            break;
        }
    }
}

4>快速排序

// 選擇一個基準元素，一般選擇第一個元素或者最後一個元素。
//經過一趟掃描，將待排序列分紅兩部分，一部分比基準元素小，一部分大於等於基準元素。
//此時基準元素在其排好序後的正確位置，而後在用一樣的方法遞歸的排序劃分的兩部分。

/*
排序數組：23, 35, 34, 11, 22, 19, 18
快速排序的思路分析：
第一步：base = 23 , arr = [35, 34, 11, 22, 19, 18]
第二步：left = [], right = []
第三步：[11, 22, 19, 18] 23 [35, 34]
第四步： [] 11 [22, 19, 18] 23 [34] 35 []
第五步：[] 11 [19, 18] 22 [] 23 [34] 35 []
第六步：[11, 18, 19, 22, 23, 34, 35]
*/

/*
if(arr.length <= 1) {
    return arr; 
}
var iBase = arr.shift();
var left = [], right = [];
for(var i = 0; i < arr.length; i++) {
    if(arr[i] < iBase) {
        left.push(arr[i]);
    } else {
        right.push(arr[i]);
    }
}
left: [11, 22, 19, 18] iBase: 23 , right: [35, 34]

從上開始正推返回表達式：return quickSort(left即[11,22,19, 18]).concat(iBase=23, quickSort(right即[35,34]));
從下開始逆推返回值：return [11, 18, 19, 22].concat(23, [35,34]);//合併後的數組：[11,18,19,22,23,34,35]

-------------------------------------------我是單次遞歸分割線-----------------------------------------------

if(arr.length <= 1) {
    return arr; 
}
var iBase = arr.shift();
var left = [], right = [];
for(var i = 0; i < arr.length; i++) {
    if(arr[i] < iBase) {
        left.push(arr[i]);
    } else {
        right.push(arr[i]);
    }
}

left: [] iBase: 11 right: [22, 19, 18]

從上開始正推返回表達式：return quickSort(left即[]).concat(iBase=11, quickSort(right即[22,19,18]));
從下開始逆推返回值：return [].concat(11, [18, 19, 22]); //合併後的數組：[11, 18, 19, 22]

-------------------------------------------我是單次遞歸分割線-----------------------------------------------
if(arr.length <= 1) {
    return arr; 
}
var iBase = arr.shift();
var left = [], right = [];
for(var i = 0; i < arr.length; i++) {
    if(arr[i] < iBase) {
        left.push(arr[i]);
    } else {
        right.push(arr[i]);
    }
}

left: [19, 18] iBase: 22 right: []

從上開始正推返回表達式：return quickSort(left即[19, 18]).concat(iBase=22, quickSort(right即[]));
從下開始逆推返回值：return [18, 19].concat(22, []); //合併後的數組： [18, 19, 22]

-------------------------------------------我是單次遞歸分割線-----------------------------------------------

if(arr.length <= 1) {
    return arr; 
}
var iBase = arr.shift();
var left = [], right = [];
for(var i = 0; i < arr.length; i++) {
    if(arr[i] < iBase) {
        left.push(arr[i]);
    } else {
        right.push(arr[i]);
    }
}
left: [18] iBase: 19, right: []
從上開始正推返回表達式：return quickSort(left即[18]).concat(iBase=19, quickSort(right即[]));
從下開始逆推返回值：return [18].concat(19, []); //合併後的數組： [18, 19]

*/

var arr = [23, 35, 34, 11, 22, 19, 18, 18];
function quickSort(arr) {
    if(arr.length <= 1) {
        return arr;
    }
    var iBase = arr.shift();
    var left = [], right = [];
 
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] < iBase) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
 
    return quickSort(left).concat(iBase, quickSort(right));
}
 
var newArr = quickSort(arr);
 
console.log(newArr);