數組中的16種經常使用方法

1、增刪改(此類均改變原數組)

一、push

• 定義：向數組的末尾追加元素
• @params：追加的項（多個任意類型）
• @return：新增數組的長度
• 是否改變原數組：改變

使用方法：ary.push(增長的項)

var ary=[1,2,3];
var res=ary.push(6);==>4
console.log(ary);===>[1,2,3,6]
複製代碼

二、unshift

• 定義：向數組的開頭增長元素
• @params：追加的項（多個任意類型）
• @return：新增數組的長度
• 是否改變原數組：改變

使用方法：ary.unshift(增長的項)

var ary=[1,2,3];
var res=ary.unshift(6);==>4
console.log(ary);===>[6,1,2,3]
複製代碼

三、shift

• 定義：刪除數組的開頭項
• @params：無
• @return：刪除的那一項
• 是否改變原數組：改變

使用方法：ary.shift()

var ary=[1,2,3,4,5];
var res=ary.shift();
console.log(ary);
console.log(res);//==>1
複製代碼

四、pop

• 定義：刪除數組的結尾項
• @params：無
• @return：刪除的那一項
• 是否改變原數組：改變

使用方法：ary.pop()

var ary=[1,2,3,4,5];
var res=ary.pop();
console.log(ary);
console.log(res);//==>5
複製代碼

五、splice

• 定義：實現數組的增長、刪除、修改；
• @params：n,m,x
• @return：修改後的新數組
• 是否改變原數組：改變

使用方法：ary.splice(n,m,x)

var ary=[1,2,3,4,5];
console.log(ary.splice(0,2,6,8));
console.log(ary) ==>[6,8,3,4,5];
複製代碼

【刪除】 返回值是一個數組，裏面是刪除項

• ary.splice(0):能夠清空數組，把原始數組中的內容基於新數組儲存起來（有點相似於數組克隆）
• ary.splice(ary.length-1):刪除最後一項
• ary.splice(0,1):刪除第一項

var ary=[1,2,3,4,5];
console.log(ary.splice(0,1));
console.log(ary) ==>[2,3,4,5];
複製代碼

【新增】 ary.splice(n,0,x);在索引n的前面添加了x項；

• ary.splice(ary.length,0,x)：在數組最後增長x項；
• ary.splice(0,0,x):在數組開頭增長x項；

var ary=[1,2,3,4,5];
console.log(ary.splice(0,0,8));
console.log(ary) ==>[8,1,2,3,4,5];
複製代碼

【修改】 用x替代刪除的m便可

刪除數組末尾一項的幾種方法

• arr.length--
• arr.pop() ：返回結果 刪除的項
• arr.splice(arr.length-1) ： 返回結果是 [刪除的項]
• delete arr[arr.length-1] ： 雖然能刪除，可是length長度不變（通常不用）

向數組末尾追加項的幾種方法

• arr.push("增長的項")
• arr[arr.length]="增長的項"
• arr.splice(arr.length , 0 , "增長的項")

2、查詢和拼接（此類均不改變原數組）

六、slice

• 定義：實現數組的查詢
• @params：n,m //從索引n開始，找到索引爲m的地方（不包含m這一項）
• @return：把找到的內容以新數組的形式返回
• 是否改變原數組：不改變

使用方法：ary.slice(n,m)

var ary=[1,2,3,4,5];
var res=ary.slice(1,3);==>[2,3]
複製代碼

ary.slice(0): m不寫是查找至末尾，至關於數組克隆，參數0能夠不寫

思考：1.若是n/m爲負數會怎樣，若是n>m會怎樣，若是是小數會怎樣，若是是非有效數字會怎樣，若是m或者n的值比最大索引大會怎樣？

• 一、若是n/m爲負數會怎樣？

參數	描述
start	要抽取的片段的起始下標。若是是負數，則該參數規定的是從字符串的尾部開始算起的位置。也就是說，-1 指字符串的最後一個字符，-2 指倒數第二個字符，以此類推。
end	緊接着要抽取的片斷的結尾的下標。若未指定此參數，則要提取的子串包括 start 到原字符串結尾的字符串。若是該參數是負數，那麼它規定的是從字符串的尾部開始算起的位置。

• 二、n>m：會返回空數組；
• 三、n,m若是是小數：會只取小數點前的整數，不管小數點後數字是幾都直接省略；

let ary = [1,8,7,3,6,4]
ary.slice(1.3,4.2);//==> [8, 7, 3]
ary.slice(1.6,4.9);//==>[8, 7, 3]
ary.slice(1,4);//==>[8, 7, 3]
複製代碼

• 四、若是是非有效數字：會先基於Number轉換爲數字，在進行截取

let ary = [1,8,7,3,6,4]

undefined
ary.slice("sss","sss");//==> []
ary.slice("1","3");//==> [8, 7]
ary.slice(false,true);//==> [1]
ary.slice([],[4]);//==>[1, 8, 7, 3]
ary.slice({},{a:b});//==>Uncaught ReferenceError: b is not defined
ary.slice(NaN,2);//==> [1, 8]
複製代碼

• 五、若是m或者n的值比最大索引大會怎樣:當n大於索引時，返回值爲空數組；當n小於索引，m大於索引時，會返回從索引n開始直到數組末尾項；

ary.slice(8,3);//==> []
ary.slice(1,8);//==>[8, 7, 3, 6, 4]
複製代碼

七、concat

• 定義：實現數組拼接（合併）
• @params：拼接的項（多個任意值）
• @return：拼接後的新數組
• 是否改變原數組：不改變

使用方法：ary.concat(拼接的內容)

let ary1=[10,20,30];
let ary2=[40,50,60];
let res=ary1.concat("培訓"，ary2);
console.log(res);//==>[10,20,30,"培訓",40,50,60]
複製代碼

• ary.concat()：至關於數組克隆（真實項目通常不用）
• ary.concat(‘1’)：傳一個值也至關於給數組末尾追加項（真實項目通常不用）

3、把數組轉換爲字符串（此類都不改變原數組）

八、toString

• 定義：把數組轉換爲字符串
• @params：無
• @return：轉換後的字符串，每一項用逗號分隔
• 是否改變原數組：不改變

使用方法：ary.toString()

let ary = [10,20,30];
let res = ary.toString();
console.log(res);//==>"10,20,30"
console.log([].toString());//==>""
console.log([12].toString());//==>"12"
複製代碼

九、join

• 定義：把數組轉換爲字符串
• @params：按指定的分隔符鏈接
• @return：轉換後的字符串
• 是否改變新數組：不改變

使用方法：ary.join(‘指定分割符’)

var ary=[1,2,3]
var res=ary.join("-");===>"1-2-3"
複製代碼

• ary.join('')：'123'
• ary.join()：未指定分割符用逗號隔開
• ary.join('+')；//==>'1+2+3'
  console.log(eval(res));//==>6 //======eval:至關於把字符串變爲JS表達式（加減乘除）執行

4、檢測數組中是否包含某一項（該類都不改變原數組）

十、indexOf

• 定義：檢測當前項在數組中第一次出現位置的索引值
• @params：要檢索的這一項內容
• @return：這一項出現的位置索引值（數字），若是數組中沒有這一項，返回的結果是-1
• 是否改變原數組：不改變

使用方法：ary.indexOf(檢索的項)；

let ary = [10,20,30,10,20,30];
console.log(ary.indexOf(20));//==>1
複製代碼

• 想驗證ARY中是否包含「培訓」

if（ary.indexOf("培訓")===-1）{//不包含}

也能夠直接使用ES6新提供的includes方法判斷(不兼容)
if（ary.includes("培訓")）{//包含:若是存在返回的是TRUE}
複製代碼

• 注意：在IE6-8中不兼容

十一、lastIndexOf

• 定義：檢測當前項在數組中最後一次出現位置的索引值
• 其他內容通indexOf相同

十二、includes

• 定義：檢測當前數組是否包含某項
• @params:要檢索的這一項內容
• @return:布爾，true 包含，false 表明不包含
• 是否改變原數組：不改變

使用方法：ary.includes(檢索的項)

var ary=[1,2,3]
ary.includes(1);===>true
複製代碼

• 注意：ES6語法，在IE6-8中不兼容

5、排序或排列(該類均改變原數組)

1三、reverse

• 定義：把數組倒過來排列
• @params：無
• @return：排列後的新數組
• 是否改變原數組：改變

使用方法：ary.reverse()

var ary=[1,2,3,4,5];
var res=ary.reverse();==>[5,4,3,2,1];
console.log(res,ary);===>[5,4,3,2,1];
複製代碼

1四、sort

• 定義：把數組按大小順序排列
• @params：能夠沒有，也能夠是函數
• @return：排好序後的數組
• 是否改變原數組：改變

使用方法：ary.sort()：SORT方法中若是不傳遞參數，是沒法處理10以上數字排序的（它默認按照每一項第一個字符來排，不是咱們想要的效果）

• 想要實現多位數正常排序，須要給SORT傳遞一個函數，函數中返回a-b實現升序，返回b-a實現降序：
• ary.sort(function(a,b){return a-b;})；
• 可用箭頭函數表示：ary.sort((a,b) => a-b);

【升序】

var ary=[11,12,1,2,3];
ary.sort(function(a,b){
    return a-b;
});
複製代碼

【降序】

var ary=[11,12,1,2,3];
ary.sort(function(a,b){
    return b-a;
});
複製代碼

6、遍歷和映射（此類均不改變原數組）

1五、forEach

• 定義：遍歷數組中的每一項內容
• @params：回調函數
• @return：無/undefined
• 是否改變原數組：不改變

使用方法：ary.forEach(function(item,index){ alert(item);})

var ary=[2,1,3,5,6,7,8,2];
var res=ary.forEach(function(item,index){
    alert(item);
})
console,log(res)
複製代碼

• ary.forEach((item,index)=>{console.log('索引：'+index+'內容：'+item)；})

ary.forEach((item,index)=>{
//數組中有多少項，函數就會被默認執行多少次
//每一次執行函數：item是數組中當前要操做的這一項，index是當前項的索引
console.log('索引：'+index+'內容：'+item)；
})
複製代碼

• 基於原生JS中的循環實現:for（let i = 0；i<ary.length;i++）{console.log('索引：'+i+'內容：'+ary[i]);}

for（let i = 0；i<ary.length;i++）{
//i:當前循環這一項的索引
//ary[i]:根據索引獲取循環的一項
console.log('索引：'+i+'內容：'+ary[i]);
}
複製代碼

1六、map

• 定義：數組映射
• @params：回調函數
• @return：映射後的新數組
• 是否改變原數組：不改變

使用方法：ary.map(function(item,index){ return "真棒";})

var ary=[2,1,3,4]
var res=ary.map(function(item,index){
    return "你真棒"
})
["你真棒"，"你真棒"，"你真棒"，"你真棒"]
複製代碼

另一些方法後續補充......

數組方法以補充：數組中經常使用的方法【補充reduce、filter、flat...】｜內附思惟導圖