js陣列方法詳解

cros發表於2024-03-19

陣列是js中最常用到的資料集合,其內建的方法有很多,熟練掌握這些方法,可以有效的提高我們的工作效率,同時對我們的程式碼質量也是有很大影響。

建立陣列

一. 字面量方式

const array = [1,2,3,4,5];

二. 使用Array構造方法

1. 無參構造 - 建立一個長度為0的空陣列

const array = new Array();

2. 帶參構造

(1)如果只傳一個數值引數,則表示建立一個初始長度為指定數值的空陣列

const array = new Array(3);  //length=3空陣列

(2)如果傳入一個非數值引數或多引數,則表示建立一個包含指定元素的陣列

const array = new Array('4'); // ['4']
const array2 = new Array(1,2,3,4); // [1,2,3,4] 

三. Array.of方法建立陣列(es6新增)

const array = Array.of(1,2,3); // [1,2,3]

四. Array.from方法建立陣列(es6新增)

const array = Array.from([4,5,6]); // [4,5,6]

陣列方法

陣列建立完了,接下來我們來看一下陣列中的每一個方法的詳細用法

1. push - 用於從陣列末尾向陣列新增元素,可以新增一個或多個元素,並返回新的長度。

const array = [1,2,3];
array.push(4); // [1,2,3,4]
array.push(5,6,7); // [1,2,3,4,5,6,7]

2. pop - 用於刪除陣列的最後一個元素並返回被刪除的元素。

const array = [1,2,3,4];
const value = array.pop();  // array [1,2,3]    value 4

3. shift - 用於刪除陣列的第一個元素並返回刪除的元素。

const array = [1,2,3,4];
const value = array.shift(); // 1 [2,3,4]

4. unshift - 用於向陣列開頭新增一個或多個元素,並返回新的長度。

const array = [4,5,6];
array.unshift(2,3); // [2,3,4,5,6]
array.unshift(1); // [1,2,3,4,5,6]

5. join - 用於陣列轉字串。用傳入引數作為分隔符,預設逗號為分隔符。

const array = [1,2,3];
const value1 = array.join();  // '1,2,3'
const value2 = array.join('-'); // '1-2-3'

6. toString和toLocaleString - 用於陣列轉字串

const array = [1,2,3];
const value1 = array.toString();  // '1,2,3'
const value2 = array.toLocaleString();  // '1,2,3'


7. sort - 用於陣列排序

const array = [1,3,6,4];
array.sort((a,b) => {return a > b ? 1 : -1}); // 1 生序   -1 降序 [1,3,4,6]

8. reverse - 用於顛倒陣列中元素的順序

const array = [1,2,3,4];
array.reverse(); // [4, 3, 2, 1]


9. concat - 用於連線兩個或多個陣列。不會改變原陣列,只會返回被連線陣列的一個副本

const array = [1,2,3];
const value = array.concat([4,5,6],7,8,[9,10,11]);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

10. includes(es7新增) - 用於判斷一個陣列是否包含某個值,是返回true,否則false

const array = [0,1,2,3,4];
const value = array.includes(2);  // true


11. indexOf - 用於返回陣列中某個指定元素第一次出現的位置,返回索引,沒有的話返回-1

const array = [0,1,2,3,4,5];
const value = array.indexOf(2);  // 2

12. lastIndexOf - 用於返回一個指定的元素在陣列中第一次出現的位置,從後向前搜尋,沒有的話返回-1

const array = [0,1,2,3,4,5,2];
const value = array.lastIndexOf(2);  // 6 

13. slice - 用於陣列、字串提取某個部分,並生成新的字串或陣列,不改變原陣列

const array = [1,2,3,4,5,6,7];
const value = array.slice(1,3); // [2,3]

14. splice - 用於新增或刪除陣列中的元素,引數為 (開始位置,刪除個數,新增的元素)

const array = [1,2,3,4,5,6,7];
const value = array.splice(1,3,8,9,10); // array [1, 8, 9, 10, 5, 6, 7]    value [2, 3, 4]

15. find()與findIndex()(es6新增) - find返回匹配的值(第一個),findIndex返回匹配位置的索引(第一個)

const array = [1,2,3,4,5,6,7];
const value = array.find((item, keys, arr) => { return item > 3; }) // 4
const index = array.findIndex((item, keys, arr) => { return item > 3; }) // 3

16. filter - 建立一個新陣列,其中的元素是透過檢查指定陣列中符合條件的所有元素,不會改變原陣列

const array = [1,2,3,4,5,6,7];
const value = array.filter((v,i,a) => { return v > 3 }) // array [1, 2, 3, 4, 5, 6, 7]  value [4, 5, 6, 7] 


17. map - 用於遍歷陣列每個元素,返回一個新陣列,元素為原始陣列處理後的值。不會改變原陣列

const array = [1,2,3,4,5,6,7];
const value = array.map((v,i,a) => { return v += 1 }) // array [1, 2, 3, 4, 5, 6, 7]  value[2, 3, 4, 5, 6, 7, 8]

18. forEach - 用於遍歷陣列每個元素,並將元素傳遞給回撥函式

let value = 0;
const array = [1,2,3,4,5,6,7];
array.forEach((v,i,a) => { value += v })  // 28


19. every - 用於判斷陣列中的每一項是否都滿足條件,只有都滿足才返回true

const array = [1,2,3,4,5,6,7];
const value = array.every((v,i) => { return v > 5 })  // false


20. some - 用於判讀陣列中的某一項是否滿足條件,只要有一項滿足就返回true

const array = [1,2,3,4,5,6,7];
const value = array.some((v,i) => { return v > 5 })  // true


21. reduce - 累加器,(function, 初始值-預設0)

const array = [1,2,3,4,5,6,7];
const value = array.reduce((total,num) => { return total += num })  // 28
const value = array.reduce((total,num) => { return total += num }, 20)  // 48

22. reduceRight - 同reduce,從後向前

const array = [1,2,3,4,5,6,7];
const value = array.reduceRight((total,num) => { return total += num }, 20)  // 48

23. fill(es6新增) - 使用特定值填充陣列中的一個或多個元素。1個引數時該引數會填充整個陣列,兩個或三個引數(填充的數,開始位置,結束位置)

const array = [1,2,3,4,5,6,7];
array.fill(1);  // [1, 1, 1, 1, 1, 1, 1]
array.fill(1,3);  // [1, 2, 3, 1, 1, 1, 1]
array.fill(1,3,5);  // [1, 2, 3, 1, 1, 6, 7]

24. copyWithin(es6新增) - 用於從陣列的指定位置複製元素到陣列的另一個指定位置中

const array = [0,1,2,3,4,5,6,7];
array.copyWithin(3) // [0, 1, 2, 0, 1, 2, 3, 4]
array.copyWithin(3, 1) // [0, 1, 2, 1, 2, 3, 4, 5]
array.copyWithin(3, 1, 3) // [0, 1, 2, 1, 2, 5, 6, 7]

相關文章