【Web前端基礎知識】Array相關知識介紹

一、類數組

類數組不是數組，類數組指擁有length屬性，其它屬性(索引)為非負整數(對象中的索引會被當做字 符串來處理且不具有數組所具有的方法;

如函數中的arguments：

1. let arg = null; 
2. function fun(a,b,c,d){ 
3. arg = arguments; 
4. } 
5. fun(1,2,3,4) 
6. console.log(arg); //Arguments(4) [1, 2, 3, 4, callee: ƒ , 
7. Symbol(Symbol.iterator): ƒ] 
8. arg.slice() //ncaught TypeError: Cannot read property 'slice' of null 

類數組轉換為數組主要有一下方法：

1.Array.prototype.slice.call()

1. Array.prototype.slice.call(arg)   // [1, 2, 3, 4] 
2. Array.prototype.slice.call(arg).indexOf()   //-1 

2.Array.from()

1. Array.from(arg) //[1, 2, 3, 4] 
2. Array.from(arg).indexOf() //-1 

3. ...擴展運算符

1. [...arg] //[1, 2, 3, 4] 
2. [...arg].indexOf() //-1 

4.concat+apply

1. Array.prototype.concat.apply([], arg) //[1, 2, 3, 4] 
2. Array.prototype.concat.apply([], arg).indexOf() //-1 

二、數組遍歷API

1.map

map不修改原數組，根據傳入的函數，映射出一個全新的數組

1. let arr = [1 ,2 ,3]; 
2. let res = arr.map((value)=>{ 
3. return value + 1; 
4. }) 
5. console.log(res) //[2, 3, 4] 

2.foreach

遍歷數組，不可中斷，沒有返回值

1. let arr = [1 ,2 ,3]; 
2. arr.forEach((value)=>{ 
3. console.log(value) //分別打印1，2，3 
4. }); 

3.some

遍歷數組，檢查是否有符合條件的數據，至少有一個則返回true ，一個都沒有返回false

1. let arr = [1 ,2 ,3]; 
2. let res = arr.some((value)=>{ 
3. return value > 2 
4. }); 
5. console.log(res) //true 
6. let arr = [1 ,2 ,3]; 
7. let res = arr.some((value)=>{ 
8. return value > 3 
9. }); 
10. console.log(res) //false 

4.every

遍歷數組，檢查是否所有數據都符合條件，是則true ，否則false

1. let arr = [1 ,2 ,3]; 
2. let res = arr.every((value)=>{ 
3. return value > 0 
4. }); 
5. console.log(res) //true 
6. let arr = [1 ,2 ,3]; 
7. let res = arr.every((value)=>{ 
8. return value > 1 
9. }); 
10. console.log(res) //false 

5.reduce

reduce()方法接收一個回調函數作為第一個參數，回調函數又接受四個參數，分別是;

1、 previousValue =>初始值或上一次回調函數疊加的值;

2、 currentValue => 本次回調(循環)將要執行的值;

3、 index=>“currentValue”的索引值;

4、 arr => 數組本身;

reduce()方法返回的是最后一次調用回調函數的返回值;

1. let arr = [1 ,2 ,3]; 
2. let res = arr.reduce((sum, value)=>{ 
3. return sum + value; 
4. }); 
5. console.log(res)   //6 

6.find

返回符合條件的數據內容

1. let arr = [ 
2.  
3. {id:1, {id:2, {id:3,value:3}, 
4.  
5. value:4}, 
6.  
7. value:5}, 
8.  
9. ]; 
10.  
11. let res = arr.find((current)=>{ 
12.  
13. return current.value > 4; 
14.  
15. }); 
16.  
17. console.log(res) //{id: 3, value: 5} 

7.filter

顧名思義，過濾，按照傳入的規則過濾不符合條件的數據，將符合條件的數據放入一個新數組

1. let arr = [ 
2. value:3}, 
3. value:4}, 
4. value:5}, 
5. ]; 
6. let res = arr.filter((current)=>{ 
7. return current.value > 3; 
8. }); 
9. console.log(res) //[{id:2, value:4}, {id:3, value:5}] 

三、多維數組扁平化

以下以這段數據為例：

let arr = [1, [2, 3], [[4, 5, 6], 7, 8]]

1.flat

es6的flat ，但是一次只能拆分一層

1. arr.flat() //[1, 2, 3, [4, 5, 6], 7, 8] 

2.正則表達式

在字符串中匹配到'['或者']' ，將其去除，但是這樣做會將所有的數組元素變為字符類型，而且數組元素中 還不能包含'['或者']'

1. <P>JSON.stringify(arr).replace(/(\[|\])/g,</P> 
2. <P>"5", "6", "7", "8"]'').split(',')//["1", "2", "3", "4",</P> 

3.普通的遞歸

1. let result = []; 
2. let fn = function(ary) { 
3. for(let i = 0; i < ary.length; i++) { let item = ary[i]; 
4. if (Array.isArray(ary[i])){ 
5. fn(item); 
6. } else { 
7. result.push(item); 
8. } 
9. } 
10. } 

4...擴展運算符

1. while (arr.some(Array.isArray)) { 
2. arr = [].concat(...arr); 
3. }