javascript： 陣列詳細操作方法及解析合集（9個改變8個不變12個遍歷）

小太陽xdq發表於2018-12-22
JavaScript陣列

 

改變原陣列的方法(9個):

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

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

pop() 刪除一個陣列中的最後的一個元素

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

引數: 無。

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

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

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

引數: 無。

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

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

定義：push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。

引數: item1, item2, …, itemX ,要新增到陣列末尾的元素

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

unshift()

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

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

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

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

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

引數: 無

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

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

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

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

引數:

  1. index：必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。
  2. howmany：必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。
  3. item1, …, itemX： 可選。向陣列新增的新專案。

返回值: 如果有元素被刪除,返回包含被刪除專案的新陣列。

eg1:刪除元素

 
1
2
3
4
5
6
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: 刪除並新增

 
1
2
3
4
5
6
7
8
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: 不刪除只新增:

 
1
2
3
4
5
6
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. 新增是在開始的元素前面新增的

sort() 陣列排序

定義: sort()方法對陣列元素進行排序，並返回這個陣列。

引數可選: 規定排序順序的比較函式。

預設情況下sort()方法沒有傳比較函式的話，預設按字母升序，如果不是元素不是字串的話，會呼叫toString()方法將元素轉化為字串的Unicode(萬國碼)位點，然後再比較字元。

 
1
2
3
4
5
6
// 字串排列 看起來很正常
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];

比較函式的兩個引數：

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

  • 若比較函式返回值<0，那麼a將排到b的前面;
  • 若比較函式返回值=0，那麼a 和 b 相對位置不變；
  • 若比較函式返回值>0，那麼b 排在a 將的前面；

對於sort()方法更深層級的內部實現以及處理機制可以看一下這篇文章深入瞭解javascript的sort方法

sort排序常見用法：

1、陣列元素為數字的升序、降序:

 
1
2
3
4
5
6
7
8
9
10
11
12
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];

2、陣列多條件排序

 
1
2
3
4
5
6
7
8
9
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}]

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

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

 
1
2
3
4
5
6
7
8
9
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"}]

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

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

語法:

array.copyWithin(target, start = 0, end = this.length)
引數:

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

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

瀏覽器相容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支援

eg:

 
1
2
3
4
5
6
7
// -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. 讀了幾個元素就從開始被替換的地方替換幾個元素

ES6: fill() 填充陣列

定義: 使用給定值，填充一個陣列。

引數:

第一個元素(必須): 要填充陣列的值

第二個元素(可選): 填充的開始位置,預設值為0

第三個元素(可選)：填充的結束位置，預設是為this.length

 

 
1
2
3
4
[`a`, `b`, `c`].fill(7)
// [7, 7, 7]
[`a`, `b`, `c`].fill(7, 1, 2)
// [`a`, 7, `c`]

不改變原陣列的方法(8個):

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

join() 陣列轉字串

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

語法:

array.join(str)
引數:

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

 
1
2
3
let a= [`hello`,`world`];
let str=a.join(); // `hello,world`
let str2=a.join(`+`); // `hello+world`

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

 
1
2
3
4
5
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]字串。

toLocaleString() 陣列轉字串

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

語法:

array.toLocaleString()
引數：無。

 
1
2
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。

toString() 陣列轉字串 不推薦

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

語法:

array.toString()
引數: 無。

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

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

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

slice() 淺拷貝陣列的元素

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

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

語法:

array.slice(begin, end);
引數:

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

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

 
1
2
3
4
5
6
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`] [`改變拷貝的陣列`]

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

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

 
1
2
3
4
5
6
7
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()是淺拷貝，對於複雜的資料型別淺拷貝，拷貝的只是指向原陣列的指標，所以無論改變原陣列，還是淺拷貝的陣列，都是改變原陣列的資料。

cancat

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

語法：

var newArr =oldArray.concat(arrayX,arrayX,……,arrayX)
引數：

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

eg1:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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的語法更簡潔易懂，所以現在合併陣列我大部分採用…來處理，…運算子可以實現cancat的每個栗子，且更簡潔和具有高度自定義陣列元素位置的效果。

 
1
2
3
let a = [2, 3, 4, 5]
let b = [ 4,...a, 4, 4]
console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]

indexOf() 查詢陣列是否存在某個元素，返回下標

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

語法:

array.indexOf(searchElement,fromIndex)
引數:

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

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

嚴格相等的搜尋:

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

注意：indexOf()不能識別NaN

eg:

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

使用場景：

  1. 陣列去重
  2. 根據獲取的陣列下標執行操作，改變陣列中的值等。
  3. 判斷是否存在，執行操作。

lastIndexOf() 查詢指定元素在陣列中的最後一個位置

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

語法:

arr.lastIndexOf(searchElement,fromIndex)
引數:

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

fromIndex(可選): 逆向查詢開始位置，預設值陣列的長度-1，即查詢整個陣列。

關於fromIndex有三個規則:

  1. 正值。如果該值大於或等於陣列的長度，則整個陣列會被查詢。
  2. 負值。將其視為從陣列末尾向前的偏移。(比如-2，從陣列最後第二個元素開始往前查詢)

  3. 負值。其絕對值大於陣列長度，則方法返回 -1，即陣列不會被查詢。

 
1
2
3
4
5
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

ES7 includes() 查詢陣列是否包含某個元素 返回布林

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

語法：

array.includes(searchElement,fromIndex=0)
引數：

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

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

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

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

eg:

 
1
2
3
4
5
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 負值絕對值超過陣列長度，搜尋整個陣列

相容性(MDN): chrome47, Firefox 43,Edge 14,Opera 34, Safari 9,IE 未實現。

遍歷方法(12個):

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

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

關於遍歷：

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

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

語法：

array.forEach(function(currentValue, index, arr), thisValue)
引數:

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

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

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

關於forEach()你要知道：

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

下面類似語法同樣適用這些規則

1. 對於空陣列是不會執行回撥函式的
2. 對於已在迭代過程中刪除的元素，或者空元素會跳過回撥函式
3. 遍歷次數再第一次迴圈前就會確定，再新增到陣列中的元素不會被遍歷。
4. 如果已經存在的值被改變，則傳遞給 callback 的值是遍歷到他們那一刻的值。

eg:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
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
// 回撥函式也接受接頭函式寫法

every 檢測陣列所有元素是否都符合判斷條件

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

語法：

array.every(function(currentValue, index, arr), thisValue)
引數:(這幾個方法的引數，語法都類似)

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

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

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

方法返回值規則:

  1. 如果陣列中檢測到有一個元素不滿足，則整個表示式返回 false，且剩餘的元素不會再進行檢測。
  2. 如果所有元素都滿足條件，則返回 true。=

eg:

 
1
2
3
4
5
6
7
8
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

some 陣列中的是否有滿足判斷條件的元素

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

語法：

array.some(function(currentValue, index, arr), thisValue)
引數:(這幾個方法的引數，語法都類似)

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

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

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

方法返回值規則：

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

  2. 如果沒有滿足條件的元素，則返回false。

 
1
2
3
4
5
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

filter 過濾原始陣列，返回新陣列

定義: 返回一個新陣列, 其包含通過所提供函式實現的測試的所有元素。

語法：

let new_array = arr.filter(function(currentValue, index, arr), thisArg)
引數:(這幾個方法的引數，語法都類似)

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

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

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

eg:

 
1
2
3
4
5
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]

map 對陣列中的每個元素進行處理，返回新的陣列

定義：建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果。

語法：

let new_array = arr.map(function(currentValue, index, arr), thisArg)
引數:(這幾個方法的引數，語法都類似)

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

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

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

eg:

 
1
2
3
4
5
6
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"]

reduce 為陣列提供累加器，合併為一個值

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

語法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
引數：

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

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

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

回撥第一次執行時:

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

eg:

 
1
2
3
4
5
6
7
8
9
10
11
// 陣列求和
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]

reduceRight 從右至左累加

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

ES6：find()& findIndex() 根據條件找到陣列成員

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

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

這兩個方法

語法：

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

引數:(這幾個方法的引數，語法都類似)

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

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

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

這兩個方法都可以識別NaN,彌補了indexOf的不足.

eg:

 
1
2
3
4
5
6
// 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

瀏覽器相容(MDN):Chrome 45,Firefox 25,Opera 32, Safari 8, Edge yes,

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

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

語法：

 
1
2
3
array.keys()
array.values()
array.entries()

引數：無。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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方法，進行遍歷:

 
1
2
3
4
5
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`]

entries()瀏覽器相容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 7.1

keys()瀏覽器相容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 8,

注意:目前只有Safari 9支援,，其他瀏覽器未實現，babel轉碼器也還未實現

相關文章