锐客直播_锐客直播app官方正版下载_锐客直播直播视频在线观看免费版下载

400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】Array相關(guān)知識介紹

【W(wǎng)eb前端基礎(chǔ)知識】Array相關(guān)知識介紹

  • 發(fā)布: 優(yōu)就業(yè)it培訓(xùn)
  • 來源:
  • 2021-10-29 15:01:55
  • 閱讀()
  • 分享
  • 手機(jī)端入口

一、類數(shù)組

類數(shù)組不是數(shù)組,類數(shù)組指擁有l(wèi)ength屬性,其它屬性(索引)為非負(fù)整數(shù)(對象中的索引會被當(dāng)做字 符串來處理且不具有數(shù)組所具有的方法;

如函數(shù)中的arguments:

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

類數(shù)組轉(zhuǎn)換為數(shù)組主要有一下方法:

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. ...擴(kuò)展運(yùn)算符

  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 

二、數(shù)組遍歷API

1.map

map不修改原數(shù)組,根據(jù)傳入的函數(shù),映射出一個全新的數(shù)組

  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

遍歷數(shù)組,不可中斷,沒有返回值

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

3.some

遍歷數(shù)組,檢查是否有符合條件的數(shù)據(jù),至少有一個則返回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

遍歷數(shù)組,檢查是否所有數(shù)據(jù)都符合條件,是則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()方法接收一個回調(diào)函數(shù)作為第一個參數(shù),回調(diào)函數(shù)又接受四個參數(shù),分別是;

1、 previousValue =>初始值或上一次回調(diào)函數(shù)疊加的值;

2、 currentValue => 本次回調(diào)(循環(huán))將要執(zhí)行的值;

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

4、 arr => 數(shù)組本身;

reduce()方法返回的是最后一次調(diào)用回調(diào)函數(shù)的返回值;

  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

返回符合條件的數(shù)據(jù)內(nèi)容

  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

顧名思義,過濾,按照傳入的規(guī)則過濾不符合條件的數(shù)據(jù),將符合條件的數(shù)據(jù)放入一個新數(shù)組

  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}] 

三、多維數(shù)組扁平化

以下以這段數(shù)據(jù)為例:

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.正則表達(dá)式

在字符串中匹配到'['或者']' ,將其去除,但是這樣做會將所有的數(shù)組元素變?yōu)樽址愋�,而且�?shù)組元素中 還不能包含'['或者']'

  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); 

4...擴(kuò)展運(yùn)算符

  1. while (arr.some(Array.isArray)) { 
  2. arr = [].concat(...arr); 
文章“【W(wǎng)eb前端基礎(chǔ)知識】Array相關(guān)知識介紹”已幫助

更多內(nèi)容

>>本文地址:http://uj2y2uok.com/zhuanye/2021/70625.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個方向的工作?

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運(yùn)營全域電商運(yùn)營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計室內(nèi)設(shè)計
  • 平面設(shè)計平面設(shè)計
  • 電商設(shè)計電商設(shè)計
  • 網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計
  • 全鏈路UI/UE設(shè)計UI設(shè)計
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運(yùn)營新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開發(fā)智能機(jī)器人
 

快速通道fast track

近期開班時間TIME