JS 數組中經常使用方法總結

標題上只簡單介紹做用，具體做用及實現方法請查看詳細介紹

1. arr.shift() 刪除元素

從前面刪除元素，只能刪除一個 返回值是刪除的元素

let arr = [1,2,3,4,5]
console.log(arr.shift())  // 1
console.log(arr)   // [2,3,4,5]
複製代碼

2. arr.unshift() 添加元素

從前面添加元素, 返回值是添加完後的數組的長度

let arr = [1,2,3,4,5]
console.log(arr.unshift(2))    // 6
console.log(arr)  //[2,1,2,3,4,5]
複製代碼

3. arr.push() 添加元素

從後面添加元素，返回值爲添加完後的數組的長度

let arr = [1,2,3,4,5]
console.log(arr.push(5))   // 6
console.log(arr) // [1,2,3,4,5,5]
複製代碼

4. arr.pop() 刪除元素

從後面刪除元素，只能是一個，返回值是刪除的元素

let arr = [1,2,3,4,5]
console.log(arr.pop())     // 5
console.log(arr)  //[1,2,3,4]
複製代碼

5. arr.concat() 鏈接數組

鏈接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。在沒有給 concat()方法傳遞參數的狀況下，它只是複製當前數組並返回副本。

let arr=[1,2,3,4];
let arr2=[11,12,13] 
let arrCopy = arr.concat(arr2);
console.log(arr.concat()); // [1, 2, 3, 4] (複製數組)
console.log(arrCopy); // [1, 2, 3, 4, 11, 12, 13]
console.log(arr); // [1, 2, 3, 4] (原數組未改變)
複製代碼

若是傳入一個二維數組呢？

let arr=[1,2,3,4];
let arr2=[11,[12,13]] 
let arrCopy = arr.concat(arr2);	
console.log(arrCopy); // [1, 2, 3, 4, 11, Array(2)]
console.log(arr); // [1, 2, 3, 4] (原數組未改變)
複製代碼

6. arr.splice() 數組更新

刪除、插入和替換

刪除：指定 2 個參數：i 表示要刪除的項目的位置,n 表示要刪除的項目的數量
arr.splice(i,n)

插入：能夠向指定位置插入任意數量的項，只需提供 3 個參數：起始位置、 0（要刪除的項數）和要插入的項 arr.splice(start,n,i)

替換：能夠向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數沒必要與刪除的項數相等 arr.splice(start,n,i)

let arr = [1,3,5,7,9,11];
let arrRemoved = arr.splice(0,2);
console.log(arr);                //[5, 7, 9, 11]
console.log(arrRemoved);            //[1, 3]
let arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr);                // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2);           // []
let arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr);                // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3);           //[7]
複製代碼

7. str.split() 數組轉化

將字符串轉化爲數組

let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]
複製代碼

8. arr.toString() 數組轉化

將數組轉換成字符串

let arr = [1,2,3,4]
let newArr = arr.toString(arr)
console.log(newArr)	// 1,2,3,4
複製代碼

9. arr.join() 數組轉換

把數組轉換成字符串，而後給他規定個鏈接字符，默認的是逗號(,)

let arr = [1,2,3];
console.log(arr.join());     // 1,2,3
console.log(arr.join("-"));   // 1-2-3
console.log(arr);         // [1, 2, 3]（原數組不變）
複製代碼

10. arr.sort() 元素排序

對數組的元素進行排序

let arr=[1,100,5,20];
console.log(arr.sort()); // [1, 100, 20, 5]
console.log(arr); // [1, 100, 20, 5] (原數組改變)
複製代碼

注：上面的代碼沒有按照數值的大小對數字進行排序，是按照字符編碼的順序進行排序，要實現這一點，就必須使用一個排序函數

升序：

let arr=[1,100,5,20];
function sortNumber(a,b){return a - b};
console.log(arr.sort(sortNumber)); //[1, 5, 20, 100]
console.log(arr); //[1, 5, 20, 100] (原數組改變)
複製代碼

降序：

let arr=[1,100,5,20];
function sortNumber(a,b){return b - a};
console.log(arr.sort(sortNumber)); // [100, 20, 5, 1]
console.log(arr); // [100, 20, 5, 1] (原數組改變)
複製代碼

11. arr.reverse() 數組反轉

將數組反轉,返回值是反轉後的數組

let arr = [1,2,3,4,5]
console.log(arr.reverse())    // [5,4,3,2,1]
console.log(arr)    // [5,4,3,2,1]
複製代碼

12. arr.slice(begin,end) 提取數組元素

提取索引值begin到索引值end之間的元素，不包含end索引的值，返回值是提取出來的數組 左邊的是閉區間，右邊的是開區間

let arr = [1,2,3,4,5]
console.log(arr.slice(1,3))   // [2,3]
console.log(arr)    //  [1,2,3,4,5]
複製代碼

slice() 方法返回一個新的數組對象，這一對象是一個由 begin 和 end 決定的原數組的淺拷貝（包括 begin，不包括end）。原始數組不會被改變。

語法：arr.slice([begin[, end]])

• begin：可選。

提取起始處的索引（從 0 開始），從該索引開始提取原數組元素。
若是該參數爲負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2) 表示提取原數組中的倒數第二個元素到最後一個元素（包含最後一個元素）。
若是省略 begin，則 slice 從索引 0 開始。
若是 begin 大於原數組的長度，則會返回空數組。

• end：可選。

提取終止處的索引（從 0 開始），在該索引處結束提取原數組元素。slice 會提取原數組中索引從 begin 到 end 的全部元素（包含 begin，但不包含 end）。
slice(1,4) 會提取原數組中從第二個元素開始一直到第四個元素的全部元素 （索引爲 1, 2, 3的元素）。
若是該參數爲負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1) 表示抽取了原數組中的倒數第二個元素到最後一個元素（不包含最後一個元素，也就是隻有倒數第二個元素）。
若是 end 被省略，則 slice 會一直提取到原數組末尾。
若是 end 大於數組的長度，slice 也會一直提取到原數組末尾。

返回值： 一個含有被提取元素的新數組。

示例：

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']
複製代碼

描述：

slice 不會修改原數組，只會返回一個淺複製了原數組中的元素的一個新數組。原數組的元素會按照下述規則拷貝：

• 若是該元素是個對象引用 （不是實際的對象），slice 會拷貝這個對象引用到新的數組裏。兩個對象引用都引用了同一個對象。若是被引用的對象發生改變，則新的和原來的數組中的這個元素也會發生改變。

• 對於字符串、數字及布爾值來講（不是 String、Number 或者 Boolean 對象），slice 會拷貝這些值到新的數組裏。在別的數組裏修改這些字符串或數字或是布爾值，將不會影響另外一個數組。

若是向兩個數組任一中添加了新元素，則另外一個不會受到影響。

13. arr.length() 數組長度

表示這個數組的長度(數組中有多少個元素)。 (length會根據人爲的修改自動改變其值)

14. arr.indexOf() 查找索引

查找某個元素的索引值，如有重複的，則返回第一個查到的索引值若不存在，則返回 -1

let arr = [1,2,3,4,5,2]
let arr1 = arr.indexOf(2)
console.log(arr1)  // 1
let arr2 = arr.indexOf(9)
console.log(arr2)  // -1
複製代碼

15. arr.lastIndexOf() 查找索引

和arr.indexOf()的功能同樣，不一樣的是從後往前查找

let arr = [1,2,3,4,5,2]
let arr1 = arr.lastIndexOf(2)
console.log(arr1)  // 5
let arr2 = arr.lastIndexOf(9)
console.log(arr2)  // -1
複製代碼

16. arr.forEach(callback) 遍歷數組

遍歷數組,無return

callback的參數:

• value --當前索引的值
• index --索引
• array --原數組

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
    //  value:1    index:0     array:1,2,3,4,5
    //  value:2    index:1     array:1,2,3,4,5
    //  value:3    index:2     array:1,2,3,4,5
    //  value:4    index:3     array:1,2,3,4,5
    //  value:5    index:4     array:1,2,3,4,5

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
    console.log(arr)
    // value:2    index:0     array:1,2,3,4,5
    // value:4    index:1     array:1,2,3,4,5
    // value:6    index:2     array:1,2,3,4,5
    // value:8    index:3     array:1,2,3,4,5
    // value:10   index:4     array:1,2,3,4,5
    // [1, 2, 3, 4, 5]
複製代碼

17. arr.map(callback) 遍歷數組

映射數組(遍歷數組),有return 返回一個新數組

callback的參數:

• value --當前索引的值
• index --索引
• array --原數組

let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)
複製代碼

18. arr.every(condition) 數組判別

依據判斷條件，數組的元素是否全知足，若知足則返回ture

let arr = [1,2,3,4,5]
let arr1 = arr.every( (i, v) => i < 3)
console.log(arr1)    // false
let arr2 = arr.every( (i, v) => i < 10)
console.log(arr2)    // true
複製代碼

19. arr.filter(condition) 過濾數組

過濾數組，返回一個知足要求的數組
通常都在最後面加上 .length 用來過濾(不)知足要求的數量(長度)

let arr = [1,2,3,4,5]
let arr1 = arr.filter( (i, v) => i < 3)
console.log(arr1)    // [1, 2]
複製代碼

20. arr.some(condition) 數組判別

依據判斷條件，數組的元素是否有一個知足，如有一個知足則返回ture

let arr = [1,2,3,4,5]
let arr1 = arr.some( (i, v) => i < 3)
console.log(arr1)    // true
let arr2 = arr.some( (i, v) => i > 10)
console.log(arr2)    // false
複製代碼

21. arr.find(condition) 查找元素

找到第一個符合條件的數組成員

let arr = [1,2,3,4,5,2,4]
let arr1 = arr.find((value, index, array) =>value > 2)
console.log(arr1)   // 3
複製代碼

22. arr.findIndex(condition) 查找元素

找到第一個符合條件的數組成員的索引值

let arr = [1,2,3,4,5]
let arr1 = arr.findIndex((value, index, array) => value > 3)
console.log(arr1)  // 3
複製代碼

23. arr.fill(target, start, end) 填充數組

使用給定的值，填充一個數組,ps:填充完後會改變原數組

參數：

• target -- 待填充的元素
• start -- 開始填充的位置-索引
• end -- 終止填充的位置-索引（不包含該位置）

let arr = [1,2,3,4,5]
let arr1 = arr.fill(5)
console.log(arr1)  // [5, 5, 5, 5, 5]
console.log(arr)   // [5, 5, 5, 5, 5]
let arr2 = arr.fill(5,2)
console.log(arr2)
let arr3 = arr.fill(5,1,3)
console.log(arr3)
複製代碼

24. arr.includes() 判斷元素

判斷數中是否包含給定的值

let arr = [1,2,3,4,5]
let arr1 = arr.includes(2)  
console.log(arr1)   // ture
let arr2 = arr.includes(9) 
console.log(arr2)    // false
let arr3 = [1,2,3,NaN].includes(NaN)
console.log(arr3)  // true
複製代碼

與indexOf()的區別：

• indexOf()返回的是數值，而includes()返回的是布爾值
• indexOf() 不能判斷NaN，返回爲-1 ，includes()則能夠判斷

25. arr.reduce()、arr.reduceRight() 迭代數組

這兩個方法都會迭代數組中的全部項，而後生成一個最終返回值。他們都接收兩個參數，第一個參數是每一項調用的函數，函數接受四個參數分別是初始值，當前值，索引值，和當前數組，函數須要返回一個值，這個值會在下一次迭代中做爲初始值。第二個參數是迭代初始值，參數可選，若是缺省，初始值爲數組第一項，從數組第一個項開始疊加，缺省參數要比正常傳值少一次運算。

reduce()方法從數組的第一項開始，逐個遍歷到最後。而 reduceRight()則從數組的最後一項開始，向前遍歷到第一項

reduce()語法：arr.reduce(function(total , cur , index , arr){//do something}, initialValue)

reduceRight()語法：arr.reduceRight(function(total , cur , index , arr){//do something}, initialValue)

• total ：必需。初始值, 或者計算結束後的返回值
• cur ：必需。當前元素
• index ：可選。當前元素的索引
• arr：可選。當前元素所屬的數組對象
• initialValue：可選。傳遞給函數的初始值

let arr = [1,2,3,4,5];
	let result1 = arr.reduce(function(total,cur,index,arr){	
		console.log("total:"+total+",cur:"+cur+",index:"+index);
	    return total+cur;
	});
	console.log("結果："+result1);
	// 輸出
	// total:1,cur:2,index:1
	// total:3,cur:3,index:2
	// total:6,cur:4,index:3
	// total:10,cur:5,index:4
	// 結果：15
	let result2 = arr.reduce(function(total,cur,index,arr){	
		console.log("total:"+total+",cur:"+cur+",index:"+index);
	    return total+cur;
	},10);
	console.log("結果："+result2);
	// 輸出
	// total:10,cur:1,index:0
	// total:11,cur:2,index:1
	// total:13,cur:3,index:2
	// total:16,cur:4,index:3
	// total:20,cur:5,index:4
	// 結果：25
複製代碼

從上面代碼咱們能夠看出，當咱們不給函數傳遞迭代初始值時初始值 total 爲數組第一項，函數從數組第二項開始迭代；若咱們給函數傳遞迭代初始值，則函數從數組第一項開始迭代

26. Array.from() 僞數組轉化

將僞數組變成數組，就是隻要有length的就能夠轉成數組

let str = '12345'
console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj))   // ["a", "b"]
複製代碼

27. Array.of() 值轉換數組

將一組值轉換成數組，相似於聲明數組

let str = '11'
console.log(Array.of(str))   // ['11']

等價於

console.log(new Array('11'))  // ['11] 複製代碼

28. arr.copyWithin(target , start , end) 數組複製

在當前數組內部，將指定位置的數組複製到其餘位置，會覆蓋原數組項，返回當前數組

參數：

• target --必選 索引從該位置開始替換數組項
• start --可選 索引從該位置開始讀取數組項，默認爲0.若是爲負值，則從右往左讀
• end --可選 索引到該位置中止讀取的數組項，默認是Array.length,若是是負值，表示倒數

let arr = [1,2,3,4,5,6,7]
let arr1 = arr.copyWithin(1)
console.log(arr1)   // [1, 1, 2, 3, 4, 5, 6]
let arr2 = arr.copyWithin(1,2)
console.log(arr2)   // [1, 3, 4, 5, 6, 7, 7]
let arr3 = arr.copyWithin(1,2,4)
console.log(arr3)   // [1, 3, 4, 4, 5, 6, 7]
複製代碼

29. arr.keys() 遍歷數組鍵名

遍歷數組的鍵名

let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
    console.log(key);   // 0,1,2,3
}
複製代碼

30. arr.values() 遍歷數組鍵值

遍歷數組鍵值

let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
     console.log(val);   // 1,2,3,4
}
複製代碼

31. arr.entries() 遍歷數組的鍵名和鍵值

遍歷數組的鍵名和鍵值
返回迭代數組，迭代數組中每一個值 前一個是索引值做爲 key， 數組後一個值做爲 value

let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {
    console.log(e);   // [0,1] [1,2] [2,3] [3,4]
}
複製代碼

32. substr() 剪切字符串

xxx.substr(7)
剪切字符串方法，意思就是把前七個字符剪切掉

33. split() 把字符串分割成字符串數組

stringObject.split(separator,howmany)

• separator：必需，字符串或正則表達式，從該參數指定的地方分割 stringObject。
• howmany：可選。該參數可指定返回的數組的最大長度。若是設置了該參數，返回的子串不會多於這個參數指定的數組。若是沒有設置該參數，整個字符串都會被分割，不考慮它的長度。

let str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
//輸出
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

"2:3:4:5".split(":")	//將返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//將返回["", "a", "b", "c"]
"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]
"hello".split("", 3)	//可返回 ["h", "e", "l"]
複製代碼

34. replace() 替換

replace() 方法用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的子串。 string.replace(searchvalue,newvalue)

• searchvalue：必需，規定要被替換的字符串。

• newvalue：必需，一個字符串值。規定了替換文本或生成替換文本的函數。

返回值：String類型。替換後的一個新的字符串。

替換一個：當第一個 "Microsoft" 被找到，它就被替換爲 "Runoob"：

var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");
複製代碼

n輸出結果：
Visit Runoob!Visit Microsoft!

全局替換：

var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/g,"red");
複製代碼

n輸出結果：
Mr Blue has a red house and a red car

---

^_<