JavaScript陣列方法總結

語言: CN / TW / HK
時間 2023-01-11 05:15:07
主題:

一、陣列的建立

js // 字面量方式: // 這個方法也是我們最常用的，在初始化陣列的時候 相當方便 var a = [3, 11, 8]; // [3,11,8]; // 構造器: // 實際上 new Array === Array,加不加new 一點影響都沒有。 var a = Array(); // [] var a = Array(3); // [,,] var a = Array(3,11,8); // [ 3,11,8 ]

1、Array.of()

  • 定義：返回由所有引數值組成的陣列，如果沒有引數，就返回一個空陣列。

  • 目的：Array.of() 出現的目的是為了解決上述構造器因引數個數不同，導致的行為有差異的問題。

js let a = Array.of(3, 11, 8); // [3,11,8] let a = Array.of(3); // [3]

2、Arrary.from()

  • 定義：用於將兩類物件轉為真正的陣列（不改變原物件，返回新的陣列）。

  • 引數：

  • 第一個引數(必需):要轉化為真正陣列的物件。
  • 第二個引數(可選): 類似陣列的map方法，對每個元素進行處理，將處理後的值放入返回的陣列。
  • 第三個引數(可選): 用來繫結this。

js // 1. 物件擁有length屬性 let obj = {0: 'a', 1: 'b', 2:'c', length: 3}; let arr = Array.from(obj); // ['a','b','c']; // 2. 部署了 Iterator介面的資料結構 比如:字串、Set、NodeList物件 let arr = Array.from('hello'); // ['h','e','l','l','o'] let arr = Array.from(new Set(['a','b'])); // ['a','b']

二、方法

1.改變原陣列的方法（9個）

js let a = [1,2,3]; ES5: a.splice()/ a.sort() / a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse() ES6: a.copyWithin() / a.fill

  • 對於這些能夠改變原陣列的方法，要注意避免在迴圈遍歷中改變原陣列的選項，比如: 改變陣列的長度，導致遍歷的長度出現問題。

1. splice() 新增/刪除陣列元素

  • 定義： splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案

  • 語法： array.splice(index,howmany,item1,.....,itemX)

  • 引數:

  • index：必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。

  • howmany：可選。要刪除的專案數量。如果設定為 0，則不會刪除專案。

  • item1, ..., itemX： 可選。向陣列新增的新專案。

  • eg1:刪除元素

js let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0, 3); // [1,2,3] console.log(a); // [4,5,6,7] // 從陣列下標0開始，刪除3個元素 let item = a.splice(-1, 3); // [7] // 從最後一個元素開始刪除3個元素，因為最後一個元素，所以只刪除了7

  • eg2: 刪除並新增

js let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0,3,'新增'); // [1,2,3] console.log(a); // ['新增',4,5,6,7] // 從陣列下標0開始，刪除3個元素，並新增元素'新增' let b = [1, 2, 3, 4, 5, 6, 7]; let item = b.splice(-2,3,'新增1','新增2'); // [6,7] console.log(b); // [1,2,3,4,5,'新增1','新增2'] // 從陣列最後第二個元素開始，刪除3個元素，並新增兩個元素'新增1'、'新增2'

  • eg3: 不刪除只新增:

js let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0,0,'新增1','新增2'); // [] 沒有刪除元素，返回空陣列 console.log(a); // ['新增1','新增2',1,2,3,4,5,6,7] let b = [1, 2, 3, 4, 5, 6, 7]; let item = b.splice(-1,0,'新增1','新增2'); // [] 沒有刪除元素，返回空陣列 console.log(b); // [1,2,3,4,5,6,'新增1','新增2',7] 在最後一個元素的前面新增兩個元素

從上述三個例子可以得出:

  1. 陣列如果元素不夠，會刪除到最後一個元素為止
  2. 操作的元素，包括開始的那個元素
  3. 可以新增很多個元素
  4. 新增是在開始的元素前面新增的

2. sort() 陣列排序

  • 定義: sort()方法對陣列元素進行排序，並返回這個陣列。
  • 引數可選: 規定排序順序的比較函式。
  • 預設情況下sort()方法沒有傳比較函式的話，預設按字母升序，如果不是元素不是字串的話，會呼叫toString()方法將元素轉化為字串的Unicode(萬國碼)位點，然後再比較字元。

js // 字串排列 看起來很正常 var a = ["Banana", "Orange", "Apple", "Mango"]; a.sort(); // ["Apple","Banana","Mango","Orange"] // 數字排序的時候 因為轉換成Unicode字串之後，有些數字會比較大會排在後面 這顯然不是我們想要的 var a = [10, 1, 3, 20,25,8]; console.log(a.sort()) // [1,10,20,25,3,8];

2.1 比較函式的兩個引數：

sort的比較函式有兩個預設引數，要在函式中接收這兩個引數，這兩個引數是陣列中兩個要比較的元素，通常我們用 a 和 b 接收兩個將要比較的元素：

  • 若比較函式返回值<0，那麼a將排到b的前面;
  • 若比較函式返回值=0，那麼a 和 b 相對位置不變；
  • 若比較函式返回值>0，那麼b 將排在a 的前面；
2.2 sort 排序常見用法
  1. 陣列元素為數字的升序、降序:

```js var array = [10, 1, 3, 4,20,4,25,8]; // 升序 a-b < 0 a將排到b的前面，按照a的大小來排序的 // 比如被減數a是10，減數是20 10-20 < 0 被減數a(10)在減數b(20)前面
array.sort(function(a,b){ return a-b; }); console.log(array); // [1,3,4,4,8,10,20,25]; // 降序 被減數和減數調換了 20-10>0 被減數b(20)在減數a(10)的前面 array.sort(function(a,b){ return b-a; }); console.log(array); // [25,20,10,8,4,4,3,1];

```

  1. 陣列多條件排序

```js var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}]; array.sort(function(a,b){ if(a.id === b.id){// 如果id的值相等，按照age的值降序 return b.age - a.age }else{ // 如果id的值不相等，按照id的值升序 return a.id - b.id } }) // [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}]

```

  1. 自定義比較函式，天空才是你的極限

類似的：運用好返回值，我們可以寫出任意符合自己需求的比較函式

```js var array = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}]; array.sort(function(a,b){ if(a.name === 'Koro1'){// 如果name是'Koro1' 返回-1 ，-1<0 a排在b的前面 return -1 }else{ // 如果不是的話，a排在b的後面 return 1 } }) // [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}]

```

3. pop() 刪除一個數組中的最後的一個元素

  • 定義: pop() 方法刪除一個數組中的最後的一個元素，並且返回這個元素。

  • 引數: 無。

```js let a = [1,2,3]; let item = a.pop(); // 3 console.log(a); // [1,2]

```

4. shift() 刪除陣列的第一個元素

  • 定義: shift()方法刪除陣列的第一個元素，並返回這個元素。

  • 引數: 無。

js let a = [1,2,3]; let item = a.shift(); // 1 console.log(a); // [2,3]

5. push() 向陣列的末尾新增元素

  • 定義：push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。
  • 引數: item1, item2, ..., itemX ,要新增到陣列末尾的元素

```js let a = [1,2,3]; let item = a.push('末尾'); // 4 console.log(a); // [1,2,3,'末尾']

```

6. unshift()

  • 定義：unshift() 方法可向陣列的開頭新增一個或更多元素，並返回新的長度。

  • 引數: item1, item2, ..., itemX ,要新增到陣列開頭的元素

```js let a = [1,2,3]; let item = a.unshift('開頭'); // 4 console.log(a); // ['開頭',1,2,3]

```

7. reverse() 顛倒陣列中元素的順序

  • 定義: reverse() 方法用於顛倒陣列中元素的順序。

  • 引數: 無

```js let a = [1,2,3]; a.reverse();
console.log(a); // [3,2,1]

```

8. copyWithin()

(ES6) 指定位置的成員複製到其他位置

  • 定義: 在當前陣列內部，將指定位置的成員複製到其他位置,並返回這個陣列。

  • 語法：

  • js array.copyWithin(target, start = 0, end = this.length)

引數:

三個引數都是數值，如果不是，會自動轉為數值.

  1. target（必需）：從該位置開始替換資料。如果為負值，表示倒數。
  2. start（可選）：從該位置開始讀取資料，預設為 0。如果為負值，表示倒數。
  3. end（可選）：到該位置前停止讀取資料，預設等於陣列長度。使用負數可從陣列結尾處規定位置。

eg：

```js // -2相當於3號位，-1相當於4號位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5'] // 2位置開始被替換,3位置開始讀取要替換的 5位置前面停止替換 a.copyWithin(2,3,5) // ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"]

```

從上述例子:

  1. 第一個引數是開始被替換的元素位置
  2. 要替換資料的位置範圍:從第二個引數是開始讀取的元素，在第三個引數前面一個元素停止讀取
  3. 陣列的長度不會改變
  4. 讀了幾個元素就從開始被替換的地方替換幾個元素

9. fill() 填充陣列

ES6

  • 定義: 使用給定值，填充一個數組。

  • 引數:

  • 第一個元素(必須): 要填充陣列的值
  • 第二個元素(可選): 填充的開始位置,預設值為0
  • 第三個元素(可選)：填充的結束位置，預設是為this.length

js ['a', 'b', 'c'].fill(7) // [7, 7, 7] ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']

2. 不改變原陣列的方法（8個）

js ES5： slice、join、toLocateString、toStrigin、cancat、indexOf、lastIndexOf、 ES7： includes

1. slice() 淺拷貝陣列的元素

  • 定義： 方法返回一個從開始到結束（不包括結束）選擇的陣列的一部分淺拷貝到一個新陣列物件，且原陣列不會被修改。

  • 注意：字串也有一個slice() 方法是用來提取字串的，不要弄混了。

  • 語法：

js array.slice(begin, end);

  • 引數：

  • begin(可選): 索引數值,接受負值，從該索引處開始提取原陣列中的元素,預設值為0。

  • end(可選):索引數值(不包括),接受負值，在該索引處前結束提取原陣列元素，預設值為陣列末尾(包括最後一個元素)。

js let a= ['hello','world']; let b=a.slice(0,1); // ['hello'] a[0]='改變原陣列'; console.log(a,b); // ['改變原陣列','world'] ['hello'] b[0]='改變拷貝的陣列'; console.log(a,b); // ['改變原陣列','world'] ['改變拷貝的陣列']

如上：新陣列是淺拷貝的，元素是簡單資料型別，改變之後不會互相干擾。

如果是複雜資料型別(物件,陣列)的話，改變其中一個，另外一個也會改變。

js let a= [{name:'OBKoro1'}]; let b=a.slice(); console.log(b,a); // [{"name":"OBKoro1"}] [{"name":"OBKoro1"}] // a[0].name='改變原陣列'; // console.log(b,a); // [{"name":"改變原陣列"}] [{"name":"改變原陣列"}] // b[0].name='改變拷貝陣列',b[0].koro='改變拷貝陣列'; // [{"name":"改變拷貝陣列","koro":"改變拷貝陣列"}] [{"name":"改變拷貝陣列","koro":"改變拷貝陣列"}]

原因在定義上面說過了的：slice()是淺拷貝，對於複雜的資料型別淺拷貝，拷貝的只是指向原陣列的指標，所以無論改變原陣列，還是淺拷貝的陣列，都是改變原陣列的資料。

2.join()

  • 定義: join() 方法用於把陣列中的所有元素通過指定的分隔符進行分隔放入一個字串，返回生成的字串。
  • 語法：

js array.join(str)

  • 引數:
  • str(可選): 指定要使用的分隔符，預設使用逗號作為分隔符。

js let a= ['hello','world']; let str=a.join(); // 'hello,world' let str2=a.join('+'); // 'hello+world'

使用join方法或者下文說到的toString方法時，當陣列中的元素也是陣列或者是物件時會出現什麼情況？

js let a= [['OBKoro1','23'],'test']; let str1=a.join(); // OBKoro1,23,test let b= [{name:'OBKoro1',age:'23'},'test']; let str2 = b.join(); // [object Object],test // 物件轉字串推薦JSON.stringify(obj);

所以，join()/toString()方法在陣列元素是陣列的時候，會將裡面的陣列也呼叫join()/toString(),如果是物件的話，物件會被轉為[object Object]字串。

3. toLocaleString() 陣列轉字串

  • 定義: 返回一個表示陣列元素的字串。該字串由陣列中的每個元素的 toLocaleString() 返回值經呼叫 join() 方法連線（由逗號隔開）組成。

  • 語法: array.toLocaleString()

  • 引數：無

js let a=[{name:'OBKoro1'},23,'abcd',new Date()]; let str=a.toLocaleString(); // [object Object],23,abcd,2018/5/28 下午1:52:20

如上述栗子：呼叫陣列的toLocaleString方法，陣列中的每個元素都會呼叫自身的toLocaleString方法，物件呼叫物件的toLocaleString,Date呼叫Date的toLocaleString。

4. toString() 陣列轉字串（不推薦）

  • 定義: toString() 方法可把陣列轉換為由逗號連結起來的字串。

  • 語法: array.toString()

  • 引數：無

該方法的效果和join方法一樣，都是用於陣列轉字串的，但是與join方法相比沒有優勢，也不能自定義字串的分隔符，因此不推薦使用。

值得注意的是：當陣列和字串操作的時候，js 會呼叫這個方法將陣列自動轉換成字串

js let b= [ 'toString','演示'].toString(); // toString,演示 let a= ['呼叫toString','連線在我後面']+'啦啦啦'; // 呼叫toString,連線在我後面啦啦啦

5.concat()

  • 定義： 方法用於合併兩個或多個數組，返回一個新陣列。

  • 語法：

js var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)

  • 引數：

arrayX（必須）：該引數可以是具體的值，也可以是陣列物件。可以是任意多個。

eg1：

```js let a = [1, 2, 3]; let b = [4, 5, 6]; //連線兩個陣列 let newVal=a.concat(b); // [1,2,3,4,5,6] // 連線三個陣列 let c = [7, 8, 9] let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9] // 新增元素 let newVal3 = a.concat('新增元素',b, c,'再加一個'); // [1,2,3,"新增元素",4,5,6,7,8,9,"再加一個"] // 合併巢狀陣列 會淺拷貝巢狀陣列 let d = [1,2 ]; let f = [3,[4]]; let newVal4 = d.concat(f); // [1,2,3,[4]]

```

ES6擴充套件運算子...合併陣列

因為ES6的語法更簡潔易懂，所以現在合併陣列我大部分採用...來處理，...運算子可以實現concat的每個例子，且更簡潔和具有高度自定義陣列元素位置的效果。

6. indexOf()

  • 定義: 返回在陣列中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。
  • 語法：

js array.indexOf(searchElement,fromIndex)

  • 引數:
  • searchElement(必須):被查詢的元素
  • fromIndex(可選):開始查詢的位置(不能大於等於陣列的長度，返回-1)，接受負值，預設值為0。

陣列的indexOf搜尋跟字串的indexOf不一樣,陣列的indexOf使用嚴格相等===搜尋元素，即陣列元素要完全匹配才能搜尋成功。

注意：indexOf()不能識別NaN

eg:

js let a=['啦啦',2,4,24,NaN] console.log(a.indexOf('啦')); // -1 console.log(a.indexOf('NaN')); // -1 console.log(a.indexOf('啦啦')); // 0

  • 使用場景：
  • 陣列去重
  • 根據獲取的陣列下標執行操作，改變陣列中的值等。
  • 判斷是否存在，執行操作。

7. lastIndexOf()

  • 定義: 方法返回指定元素,在陣列中的最後一個的索引，如果不存在則返回 -1。（從陣列後面往前查詢）

  • 語法:

js arr.lastIndexOf(searchElement,fromIndex)

  • 引數：

  • searchElement(必須): 被查詢的元素

  • fromIndex(可選): 逆向查詢開始位置，預設值陣列的長度-1，即查詢整個陣列。
    • 關於fromIndex有三個規則:
    • 正值。如果該值大於或等於陣列的長度，則整個陣列會被查詢。
    • 負值。將其視為從陣列末尾向前的偏移。(比如-2，從陣列最後第二個元素開始往前查詢)
    • 負值。其絕對值大於陣列長度，則方法返回 -1，即陣列不會被查詢。

js let a=['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 陣列長度為10 // let b=a.lastIndexOf('Koro1',4); // 從下標4開始往前找 返回下標2 // let b=a.lastIndexOf('Koro1',100); // 大於或陣列的長度 查詢整個陣列 返回9 // let b=a.lastIndexOf('Koro1',-11); // -1 陣列不會被查詢 let b=a.lastIndexOf('Koro1',-9); // 從第二個元素4往前查詢，沒有找到 返回-1

8. includes()

  • 定義：返回一個布林值，表示某個陣列是否包含給定的值
  • 語法：

js array.includes(searchElement,fromIndex=0)

  • 引數：
  • searchElement(必須):被查詢的元素

  • fromIndex(可選):預設值為0，引數表示搜尋的起始位置，接受負值。正值超過陣列長度，陣列不會被搜尋，返回false。負值絕對值超過長陣列度，重置從0開始搜尋。

  • includes方法是為了彌補indexOf方法的缺陷而出現的:

  • indexOf方法不能識別NaN

  • indexOf方法檢查是否包含某個值不夠語義化，需要判斷是否不等於-1，表達不夠直觀

eg：

js let a=['OB','Koro1',1,NaN]; // let b=a.includes(NaN); // true 識別NaN // let b=a.includes('Koro1',100); // false 超過陣列長度 不搜尋 // let b=a.includes('Koro1',-3); // true 從倒數第三個元素開始搜尋 // let b=a.includes('Koro1',-100); // true 負值絕對值超過陣列長度，搜尋整個陣列

3.遍歷方法（12個）

js中遍歷陣列並不會改變原始陣列的方法總共有12個:

js ES5： forEach、every 、some、 filter、map、reduce、reduceRight、 ES6： find、findIndex、keys、values、entries

關於遍歷：

  • 儘量不要在遍歷的時候，修改後面要遍歷的值
  • 儘量不要在遍歷的時候修改陣列的長度（刪除/新增）

1. forEach

  • 定義: 按升序為陣列中含有效值的每一項執行一次回撥函式。

  • 語法：array.forEach(function(currentValue, index, arr), thisValue)

  • 引數：

function(必須): 陣列中每個元素需要呼叫的函式。

js // 回撥函式的引數 1. currentValue(必須),陣列當前元素的值 2. index(可選), 當前元素的索引值 3. arr(可選),陣列物件本身

thisValue(可選): 當執行回撥函式時this繫結物件的值，預設值為undefined

關於forEach()你要知道：

  • 無法中途退出迴圈，只能用return退出本次回撥，進行下一次回撥。
  • 它總是返回 undefined值,即使你return了一個值。

eg:

js let a = [1, 2, ,3]; // 最後第二個元素是空的，不會遍歷(undefined、null會遍歷) let obj = { name: 'OBKoro1' }; let result = a.forEach(function (value, index, array) { a[3] = '改變元素'; a.push('新增到尾端，不會被遍歷') console.log(value, 'forEach傳遞的第一個引數'); // 分別列印 1 ,2 ,改變元素 console.log(this.name); // OBKoro1 列印三次 this繫結在obj物件上 // break; // break會報錯 return value; // return只能結束本次回撥 會執行下次回撥 console.log('不會執行，因為return 會執行下一次迴圈回撥') }, obj); console.log(result); // 即使return了一個值,也還是返回undefined // 回撥函式也接受接頭函式寫法

2. every()

  • 定義: 方法用於檢測陣列所有元素是否都符合函式定義的條件

  • 語法：array.every(function(currentValue, index, arr), thisValue)

  • 引數：（這幾個方法的引數，語法都類似）

  • function(必須): 陣列中每個元素需要呼叫的函式。

js // 回撥函式的引數 1. currentValue(必須),陣列當前元素的值 2. index(可選), 當前元素的索引值 3. arr(可選),陣列物件本身

thisValue(可選): 當執行回撥函式時this繫結物件的值，預設值為undefined

  • 方法返回值規則：
  • 如果陣列中檢測到有一個元素不滿足，則整個表示式返回 false，且剩餘的元素不會再進行檢測。
  • 如果所有元素都滿足條件，則返回 true。

eg：

js function isBigEnough(element, index, array) { return element >= 10; // 判斷陣列中的所有元素是否都大於10 } let result = [12, 5, 8, 130, 44].every(isBigEnough); // false let result = [12, 54, 18, 130, 44].every(isBigEnough); // true // 接受箭頭函式寫法 [12, 5, 8, 130, 44].every(x => x >= 10); // false [12, 54, 18, 130, 44].every(x => x >= 10); // true

3. some()

  • 定義：陣列中的是否有滿足判斷條件的元素

  • 語法：array.some(function(currentValue, index, arr), thisValue)

  • 引數：
  • function(必須): 陣列中每個元素需要呼叫的函式

js // 回撥函式的引數 1. currentValue(必須),陣列當前元素的值 2. index(可選), 當前元素的索引值 3. arr(可選),陣列物件本身

thisValue(可選): 當執行回撥函式時this繫結物件的值，預設值為undefined

方法返回值規則：

  1. 如果有一個元素滿足條件，則表示式返回true, 剩餘的元素不會再執行檢測。
  2. 如果沒有滿足條件的元素，則返回false。

js function isBigEnough(element, index, array) { return (element >= 10); //陣列中是否有一個元素大於 10 } let result = [2, 5, 8, 1, 4].some(isBigEnough); // false let result = [12, 5, 8, 1, 4].some(isBigEnough); // true

4.filter()

  • 定義: 返回一個新陣列, 其包含通過所提供函式實現的測試的所有元素。
  • 語法：let new_array = arr.filter(function(currentValue, index, arr), thisArg)
  • 引數：
  • function(必須): 陣列中每個元素需要呼叫的函式。

js // 回撥函式的引數 1. currentValue(必須),陣列當前元素的值 2. index(可選), 當前元素的索引值 3. arr(可選),陣列物件本身

thisValue(可選): 當執行回撥函式時this繫結物件的值，預設值為undefined

eg：

js let a = [32, 33, 16, 40]; let result = a.filter(function (value, index, array) { return value >= 18; // 返回a陣列中所有大於18的元素 }); console.log(result,a);// [32,33,40] [32,33,16,40]

5.map()

  • 定義：建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果。
  • 語法：let new_array = arr.map(function(currentValue, index, arr), thisArg)
  • 引數：
  • function(必須): 陣列中每個元素需要呼叫的函式。

js // 回撥函式的引數 1. currentValue(必須),陣列當前元素的值 2. index(可選), 當前元素的索引值 3. arr(可選),陣列物件本身 * thisValue(可選): 當執行回撥函式時this繫結物件的值，預設值為undefined

eg:

js let a = ['1','2','3','4']; let result = a.map(function (value, index, array) { return value + '新陣列的新元素' }); console.log(result, a); // ["1新陣列的新元素","2新陣列的新元素","3新陣列的新元素","4新陣列的新元素"] ["1","2","3","4"]

6. reduce()

  • 定義：reduce() 方法對累加器和陣列中的每個元素（從左到右）應用一個函式，最終合併為一個值。

  • 語法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • 引數：

  • function(必須): 陣列中每個元素需要呼叫的函式。

js // 回撥函式的引數 1. total(必須)，初始值, 或者上一次呼叫回撥返回的值 2. currentValue(必須),陣列當前元素的值 3. index(可選), 當前元素的索引值 4. arr(可選),陣列物件本身

  • initialValue(可選): 指定第一次回撥 的第一個引數。

回撥第一次執行時:

  • 如果 initialValue 在呼叫 reduce 時被提供，那麼第一個 total 將等於 initialValue，此時 currentValue 等於陣列中的第一個值；
  • 如果 initialValue 未被提供，那麼 total 等於陣列中的第一個值，currentValue 等於陣列中的第二個值。此時如果陣列為空，那麼將丟擲 TypeError。
  • 如果陣列僅有一個元素，並且沒有提供 initialValue，或提供了 initialValue 但陣列為空，那麼回撥不會被執行，陣列的唯一值將被返回。

eg:

js // 陣列求和 let sum = [0, 1, 2, 3].reduce(function (a, b) { return a + b; }, 0); // 6 // 將二維陣列轉化為一維 將陣列元素展開 let flattened = [[0, 1], [2, 3], [4, 5]].reduce( (a, b) => a.concat(b), [] ); // [0, 1, 2, 3, 4, 5]

7.reduceRight() 從右至左累加

這個方法除了與reduce執行方向相反外，其他完全與其一致，請參考上述 reduce 方法介紹。

8. find() & findIndex() 根據條件找到陣列成員

find()定義：用於找出第一個符合條件的陣列成員，並返回該成員，如果沒有符合條件的成員，則返回undefined。

findIndex()定義：返回第一個符合條件的陣列成員的位置，如果所有成員都不符合條件，則返回-1。

語法：

js let new_array = arr.find(function(currentValue, index, arr), thisArg) let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)

引數：

  • function(必須): 陣列中每個元素需要呼叫的函式。

js // 回撥函式的引數 1. currentValue(必須),陣列當前元素的值 2. index(可選), 當前元素的索引值 3. arr(可選),陣列物件本身

  • thisValue(可選): 當執行回撥函式時this繫結物件的值，預設值為undefined
  • 這兩個方法都可以識別NaN,彌補了indexOf的不足.

eg：

js // find let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5 let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN // findIndex let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2 let b = [1, 4, -5, 10,NaN].findIndex((n) => Object.is(NaN, n)); // 返回索引4

9.keys()&values()&entries() 遍歷鍵名、遍歷鍵值、遍歷鍵名+鍵值

（ES6）

  • 定義：三個方法都返回一個新的 Array Iterator 物件，物件根據方法不同包含不同的值。

  • 語法：

js array.keys() array.values() array.entries()

  • 引數：無

eg:

```js for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

```

在for..of中如果遍歷中途要退出，可以使用break退出迴圈。

如果不使用for...of迴圈，可以手動呼叫遍歷器物件的next方法，進行遍歷:

js let letter = ['a', 'b', 'c']; let entries = letter.entries(); console.log(entries.next().value); // [0, 'a'] console.log(entries.next().value); // [1, 'b'] console.log(entries.next().value); // [2, 'c']

轉自：https://juejin.cn/post/6844903614918459406

「」