JS 陣列中常用方法總結

YXi發表於2019-07-27

標題上只簡單介紹作用，具體作用及實現方法請檢視詳細介紹

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

^_<

js中陣列常用方法總結
2019-06-29
JS陣列
js陣列常用方法總結
2020-12-28
JS陣列
js與jquery常用陣列方法總結
2020-08-26
JSjQuery陣列
JS常用陣列方法總結筆記
2019-04-18
JS陣列筆記
JS陣列方法總結
2019-03-03
JS陣列
js陣列去重的三種常用方法總結
2016-10-25
JS陣列
JS-陣列方法總結
2020-12-22
JS陣列
陣列中常用的方法總結
2020-09-23
陣列
js常用陣列方法
2018-11-26
JS陣列
JavaScript陣列方法總結（中）
2021-09-09
JavaScript陣列
js常用的陣列方法
2017-09-13
JS陣列
JS陣列API總結
2019-03-20
JS陣列API
javascript陣列方法總結
2018-08-22
JavaScript陣列
常用js方法總結：
2018-10-20
JS
JS實現陣列去重方法總結(六種方法)
2018-05-17
JS陣列
陣列的三種宣告方式總結、多維陣列的遍歷、Arrays類的常用方法總結
2019-03-29
陣列
陣列去重方法總結
2016-12-07
陣列
紅寶書總結-js陣列的相關方法
2019-05-06
JS陣列
js 陣列的方法小結
2018-10-12
JS陣列
javascript常用陣列演算法總結
2015-09-11
JavaScript陣列演算法
JS中字串和陣列的常用方法
2019-03-30
JS字串陣列
常用陣列方法
2019-04-07
陣列
陣列常用方法
2019-07-17
陣列
JS中陣列遍歷方法foreach,filter,some,every,map方法介紹與總結
2020-11-05
JS陣列Filter
JavaScript陣列去重方法總結
2019-04-05
JavaScript陣列
所有陣列的方法（api）總結
2019-04-19
陣列API
JS常用陣列操作
2018-10-29
JS陣列
js陣列操作方法小結
2019-02-16
JS陣列
JS 常用方法總結記錄
2018-07-15
JS
三種常用的js陣列去重方法
2014-04-03
JS陣列
JS陣列Array的全部方法彙總
2018-10-25
JS陣列
JavaScript陣列中的22個常用方法
2016-08-05
JavaScript陣列
常用陣列方法梳理
2019-02-28
陣列
陣列常用的方法
2019-04-11
陣列
陣列的常用方法
2019-03-25
陣列
陣列常用物件方法
2019-02-07
陣列物件
javascript陣列常用方法
2018-05-22
JavaScript陣列
js 陣列方法
2019-01-23
JS陣列