JavaScript中的基本API整理及應用

第一類：string

---------------------------------------------------------------------------------------------------------------

強調：所有StringAPI都無權修改原數組，只能返回新的字符串

---------------------------------------------------------------------------------------------------------------

API：

str.slice(start,endi+1)    作用：從指定位置截取字符串

案例：通過身份證獲得性別信息：

<script>
var str="1***************59";
var str1 = str.slice(-2,-1);
if(str1%2 !== 0)
    console.log("性別爲女");
else
    console.log("性別爲男");
</script>

---------------------------------------------------------------------------------------------------------------

何時使用：當不區分大小寫時，都要先轉換爲一致大小寫，再進行比較

str.toUpperCase()    作用：將字符串轉換爲大寫

str.toLowerCase()    作用：將字符串轉換爲小寫

案例：驗證碼輸入時，應不區分大小寫

<script>
    var p = prompt("請輸入驗證碼");
    var str = "ADFc";
    if(p.value == str.toUpperCase() || str.toLowerCase()){
        console.log("通過");
    }else{
        console.log("不通過，重新輸入");
    }
</script>

---------------------------------------------------------------------------------------------------------------

var char = str.charAt(i)    作用：獲取指定位置字符

案例：

<script>
str = "臥槽";
var char = str.charAt(0);
console.log(char);
</script>

---------------------------------------------------------------------------------------------------------------

var code = str.charCodeAt(i)    作用：獲取指定位置字符的Unicode碼

var char = String.fromCharCode(code)    作用：Unicode碼轉回數字

轉碼與解碼：將今天是2018年3月22日進行轉碼，然後進行解碼輸出

<script>
var str = "今天是2018年3月22日";
var code = "";
for(var i = 0 ; i<str.length;i++){
    var msg = str.charCodeAt(i);
     if(msg<100){
         msg = "000"+msg;
     }else if(msg<1000){
         msg = "00"+msg;
     }
     code+=msg;
}
var rel = "";
console.log(code);
for(var i=0;i<code.length;i+=5){
    var message = code.slice(i,i+5);
    var result = String.fromCharCode(message);
    rel+=result;
}
console.log(rel); //今天是2018年3月22日
</script>

---------------------------------------------------------------------------------------------------------------

str.substring(starti,endi+1)    作用：選取子字符串，同slice，但是不支持負數參數

str.substr(starti,n)    作用：選取字符串，從starti開始，選取n個

案例：從身份證號中截取生日

<script>
var str="1*****19830212****";
var birth = str.substr(6,8);
console.log(birth);
</script>

---------------------------------------------------------------------------------------------------------------

var i = str.indexOf("關鍵詞",[,fromi])    作用：在str中從fromi位置開始查找下一個關鍵詞的位置，如果找到返回爲止，如果找

不到，返回-1

缺點：不支持正則表達式，一次只能查找一種關鍵詞

固定用法：查找出所有關鍵詞出現的位置

var i = -1;
while((i=str.indexOf("關鍵詞",i+1))!=-1){
i即爲本次查找到的關鍵詞位置
}

案例：查找文本中是否存在“我”

<script>
var str = "我是一個普通人";
var i = str.indexOf("我");
if(i!=-1)
    console.log("在"+i+"處發現關鍵詞我");
</script>

var i = str.lastIndexOf("關鍵詞");    作用：查找關鍵詞在字符串中最後一次出現的位置

案例：查找一段url中的圖片名稱

<script>
var str = "http://www.baidu.com/img/tree.png";
var i = str.lastIndexOf("/");
var img = str.slice(i+1);
console.log(img);
</script>

---------------------------------------------------------------------------------------------------------------

var i = str.search(/正則表達式/i)    作用：判斷是否包含符合規則的關鍵詞

缺點：不能設置開始查找位置，只能找到第一個，不能找到所有，只能返回位置，不能返回關鍵詞內容。

<script>
var str = "我12356";
var i = str.search(/[0-9]/i);
if(i!=-1)
    console.log("找到數字在"+i+"處");
</script>

---------------------------------------------------------------------------------------------------------------

var kwards = str.match(/正則表達式/ig)    作用：獲取所有關鍵詞的內容，返回包含所有關鍵詞的數組，如果沒找到返回null

缺點：無法返回每個關鍵詞的位置

案例：查找一段文字中“臥槽”是否出現，如果出現，輸出

<script>
var str = "有一天，我在12305買火車票，我說：臥槽，賣完了";
var arr = str.match(/臥槽/ig);
console.log("發現關鍵詞"+arr);
</script>

---------------------------------------------------------------------------------------------------------------

regexp.exec(str);    作用：查找關鍵詞，返回內容，返回位置

案例：查找一段文字中的“臥槽”，返回位置和內容

<script>
var str = "有一天，我在12305買火車票，我說：臥槽，賣完了";
var reg = /臥槽/;
var s = reg.exec("臥槽");
console.log(s);
</script>

---------------------------------------------------------------------------------------------------------------

str = str.replace("關鍵詞","替換值")    作用：將第一個位置的關鍵詞替換爲新詞

案例：將字符串中的第一個“我”換成“你”

<script>
var str = "有一天，我發現了一個寶藏，我說：厲害了";
str = str.replace("我","你");
console.log(str);
</script>

str = str.replace(/正則表達式/ig,"替換值")    作用：將所有關鍵詞都替換爲統一的新值，如果替換一個固定關鍵詞，則第一

個參數可以不使用正則表達式

案例：將字符串中的所有“我”，換成“你”

<script>
var str = "有一天，我發現了一個寶藏，我說：厲害了";
str = str.replace(/我/ig,"你");
console.log(str);
</script>

str = str.replace(/正則表達式/ig,function(kw,$1,$2){

    //kw : 自動獲得本次找到的完整關鍵詞

    //$n  :自動獲得本次查找的關鍵詞中第N個分組的子內容

    return 根據不同kw，返回不同替換值

})

---------------------------------------------------------------------------------------------------------------

var subs = str.split("分隔符")    作用：切割字符串

案例：將字符串Hello World以“o”分割

<script>
var str = "Hello World";
   var str1 = str.split("o");
    console.log(str1);
</script>

var subs = str.split(/正則表達式/);    作用：切割複雜字符串

案例：將字符串12Hello34World678，通過數字分割

<script>
var str = "12Hello34World0675";
   var str1 = str.split(/\d/);
    console.log(str1);
</script>

將字符串打散爲字符數組：var chars=str.split("")

---------------------------------------------------------------------------------------------------------------

第二類：數組API

強調：無權修改原數組，只能返回新數組，必須使用變量接住返回值

---------------------------------------------------------------------------------------------------------------

String(arr)    作用：將數組轉化爲字符串，用逗號鏈接

arr.join("連接符")    作用：將arr總每個元素轉換爲字符串，可以自定義連接符

固定用法：

無縫拼接：arr.join("")

判斷空數組：arr.join("") === ""

動態生成頁面元素：var html=“<ANY>”+arr.join("</ANY><ANY>")+"</ANY>";  elem.innerHTML=html;

案例：使用方法

<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
var str = String(arr);
console.log(str);
var str1 = arr.join("/");
console.log(str1);
var str2 = arr.join("");
console.log(str2);
if(arr.join("") === ""){
    console.log("空數組");
}else{
    console.log(arr);
}
</script>

---------------------------------------------------------------------------------------------------------------

var newArr = arr1 . concat(值1，值2，arr2,.....)    作用：將值1，值2，arr2中的每個元素拼接到arr結尾

強調：可以打散數組類型參數

案例：拼接的使用

<script>
var arr = [1,2,3,4,5,6];
var arr2 = [6,6,6,6,5];
var newArr = arr.concat(7,8,9,arr2);
console.log(newArr);
</script>

---------------------------------------------------------------------------------------------------------------

var subArr = arr.slice(starti,endi+1)    作用：選取arr中的starti位置到endi位置的元素，組成新數組返回

強調：凡是兩個參數都是下標的API，都遵循一個規則：含頭不含尾，支持負數參數

當省略全部參數的時候，作用爲：賦值整個數組，用於將類數組對象轉換爲數組對象時

固定套路：獲得i位置開始的n個元素：arr.slice(i,i+n)

案例：截取數組0到5位置的數據

<script>
var arr = [1,2,3,4,5,6,7];
var subArr = arr.slice(0,5);
console.log(subArr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.splice(starti,n)    作用：刪除arr中從starti開始的n個元素

強調：直接修改原數組，不考慮含頭不含尾，支持負數參數，當省略第二個參數時，刪除starti位置後所有元素

有返回值，var deletes = arr.splice(starti,n)    返回被刪除的元素組成的臨時數據

案例：刪除從0開始向後5個數

<script>
var arr = [1,2,3,4,5,6,7,8];
arr.splice(0,5);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.splice(starti,0,值1，值2...)    作用：在arr中starti位置插入新值，元starti位置的值及其之後的值向後瞬移

強調：不支持打散數組類型參數，如果插入子數組，會變成二位數組

案例：從0位置開始插入9,10,11

<script>
var arr = [1,2,3,4,5,6,7];
arr.splice(0,0,9,10,11);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.splice(starti,n,值1,值2....)    作用：先刪除arr中starti位置的n個元素，再從starti位置插入新的元素

強調：刪除元素個數不一定和插入的元素個數一致

案例：從0位置刪除3個元素，插入9,10,11

<script>
var arr = [1,2,3,4,5,6,7];
arr.splice(0,3,9,10,11);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.reverse()    作用：反轉數組

<script>
var arr = [1,2,3,4,5,6,7];
arr.reverse();
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.sort()    作用：將arr中每個元素轉爲字符串，再按字符串升序排列

強調：只能按照字符串升序排列

故使用：arr.sort(function(a,b){return a-b})，可以對數字進行排序（升序）

arr.sort(function(a,b){return b-a});（降序）

案例：排序數組（升序）

<script>
var arr = [1,2,3,4,5,6,7,5,8,4,1,2,2,3,4,5];
arr.sort(function(a,b){return a-b});
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.push(值)    作用：結尾入棧

使用時機：希望始終使用最新進入數組的元素時

案例：

<script>
var arr = [1,2,3,4,5,6,7,5,8,4,1,2,2,3,4,5];
arr.push(10,11,12);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

var last = arr.pop(值)    作用：結尾出棧

案例：將結尾的數組元素出棧

<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.pop();
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.unshift(值)    作用：開頭入棧

案例：開頭插入10,20,30

<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.unshift(10,20,30);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

var first = arr.shift()    作用：開頭出棧

強調：開頭入棧和結尾入棧的順序是反的

案例：將開頭第一個元素出棧

<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.shift();
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

第三類：RegExp API

何時使用：使用正則表達式驗證字符串格式，即查找關鍵詞內容，又查找關鍵詞位置

---------------------------------------------------------------------------------------------------------------

var bool = reg.test(str)    作用：驗證str是否符合reg的規則要求

注意：定義reg的時候，正則前面加^，後面加$

案例：檢測是否符合規則

<script>
var str = "驗證該文本中是否符合規則：臥槽";
var reg = /^臥槽$/;
var bool = reg.test(str);
console.log(bool);
if(!bool)
    console.log("不符合規則");
</script>

---------------------------------------------------------------------------------------------------------------

var arr = reg.exec(str)    作用：查找關鍵詞，即查找內容又查找位置

返回值：arr:[0:"完整關鍵詞",1:$1,2:$2,...,index:本次查找的位置]

reg.lastIndex    下次查找的位置，如果沒找到，返回null

<script>
    var str = "1a1b1c";
    var reg = new RegExp("1.", "");
    var arr = reg.exec(str);
    console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

第四類：Math API

強調：所有API都用Math.直接調用

---------------------------------------------------------------------------------------------------------------

Math.ceil(num)    作用：上取整

<script>
var num = 234.1231385;
console.log(Math.ceil(num));
</script>

---------------------------------------------------------------------------------------------------------------

Math.floor(num)    作用：下取整

強調：只能對純數字內容下取整，如果傳入的不是數字，自動調用Number(x)隱式轉換

<script>
var num = 234.1231385;
console.log(Math.floor(num));
</script>

---------------------------------------------------------------------------------------------------------------

Math.round(num)    作用：取整，返回值是number，只能取整，不能指定小數位置

<script>
var num = 234.1231385;
console.log(Math.round(num));
</script>

相比於num.toFixed(d)    作用：四捨五入取整

返回string，必須先轉換爲number再計算，可以按任意小數位數四捨五入

錢數一律是toFixed(2)

案例：

<script>
var num = 234.1231385;
console.log(Number(num.toFixed(2)));
</script>

---------------------------------------------------------------------------------------------------------------

Math.pow(底數，冪)    作用：乘方

案例：

<script>
var num = 234.1231385;
console.log(Math.pow(num,2));
</script>

---------------------------------------------------------------------------------------------------------------

Math.sqrt(num)    作用：開平方

案例：

<script>
var num = 234.1231385;
console.log(Math.sqrt(num));
</script>

---------------------------------------------------------------------------------------------------------------

Math.max/min(值1,值2,....)    作用：最大值/最小值

案例：

<script>
var num = 234.1231385;
var num2 = 255;
console.log(Math.max(num,num2));
console.log(Math.min(num,num2));
</script>

問題：不支持查找一個數組中的最大值/最小值

解決方式：Math.max/min(...arr)

---------------------------------------------------------------------------------------------------------------

Math.random()    作用：隨機數

在任意min-max之間生成隨機整數     parseInt(Math.random()*(max-min+1)+min)

在0-max之間生成隨機整數                parseInt(Math.random()*(max+1))

案例：

<script>
console.log(Math.random());
console.log(Math.random()*10+1);
console.log(Math.random()*1);
</script>

---------------------------------------------------------------------------------------------------------------

第五類：Date API

---------------------------------------------------------------------------------------------------------------

var ms = date.getTime();    作用：獲取當前時間（ms）

案例：

<script>
var date = new Date();
var ms = date.getTime();
console.log(ms);
</script>

---------------------------------------------------------------------------------------------------------------

FullYear

Month

Date

Day

Hours

Minutes

Seconds

Milliseconds

除了Milliseconds以外都有一對兒方法：

date.getXXX()    作用：負責獲取指定單位的數值

date.setXXX(num)    作用：負責設置指定單位的數值

---------------------------------------------------------------------------------------------------------------

toString()    作用：當地標準時間的完整格式

toLocaleString()    作用：當地時間的簡化版格式

toLocaleDateString()    作用：顯示當地時間格式（保留日期部分）

toLocaleTimeString()    作用：當地時間格式

toGMTString()    作用：國際標準時間(0時區)

---------------------------------------------------------------------------------------------------------------

第六類：轉換類

基本數據類型轉換的三種方法：

-------------------------------------------------------------------------------------------------

1.轉換爲字符型：String(); 例：String(678)的結果爲"678"

2.轉換爲數值型：Number(); 例：Number("678")的結果爲678

3.轉換爲布爾型：Boolean(); 例：Boolean("aaa")的結果爲true

從一個值中提取另一種類型的值的方法：

--------------------------------------------------------------------------------------------------

1.提取字符串中的整數：parseInt(); 例：parseInt("123zhang")的結果爲123

2.提取字符串中的浮點數：parseFloat(); 例：parseFloat("0.55zhang")的結果爲0.55

3.執行用字符串表示的一段javascript代碼：eval(); 例：zhang=eval("1+1")的結果zhang=2

---------------------------------------------------------------------------------------------------------------