实战IT培训机构_黄色激情网站_IT培训班选大学生IT技术培训中心_黄色激情视频网站_中公优就业

400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】Array相關知識介紹

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

  • 發布: 優就業it培訓
  • 來源:
  • 2021-10-29 15:01:55
  • 閱讀()
  • 分享
  • 手機端入口

一、類數組

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

如函數中的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 

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

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

4...擴展運算符

  1. while (arr.some(Array.isArray)) { 
  2. arr = [].concat(...arr); 
文章“【Web前端基礎知識】Array相關知識介紹”已幫助

更多內容

>>本文地址:http://www.jecan.cn/zhuanye/2021/70625.html

THE END  

聲明:本站稿件版權均屬中公教育優就業所有,未經許可不得擅自轉載。

1 您的年齡

2 您的學歷

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

獲取測試結果
  • 大前端大前端
  • 大數據大數據
  • 互聯網營銷互聯網營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯網嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內設計室內設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網頁設計網頁設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開發VR/AR
  • 網絡安全網絡安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發智能機器人
 

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板: 高压包-点火器-高压发生器-点火变压器-江苏天网 | 粒米特测控技术(上海)有限公司-测功机_减速机测试台_电机测试台 | 仓储笼_仓储货架_南京货架_仓储货架厂家_南京货架价格低-南京一品仓储设备制造公司 | 凝胶成像系统(wb成像系统)百科-上海嘉鹏| LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 螺旋绞龙叶片,螺旋输送机厂家,山东螺旋输送机-淄博长江机械制造有限公司 | 品牌策划-品牌设计-济南之式传媒广告有限公司官网-提供品牌整合丨影视创意丨公关活动丨数字营销丨自媒体运营丨数字营销 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 烟台金蝶财务软件,烟台网站建设,烟台网络推广 | 冷轧机|两肋冷轧机|扁钢冷轧机|倒立式拉丝机|钢筋拔丝机|收线机-巩义市华瑞重工机械制造有限公司 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 布袋式除尘器|木工除尘器|螺旋输送机|斗式提升机|刮板输送机|除尘器配件-泊头市德佳环保设备 | 成都茶楼装修公司 - 会所设计/KTV装修 - 成都朗煜装饰公司 | 沈阳液压泵_沈阳液压阀_沈阳液压站-沈阳海德太科液压设备有限公司 | 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 作文导航网_作文之家_满分作文_优秀作文_作文大全_作文素材_最新作文分享发布平台 | 开业庆典_舞龙舞狮_乔迁奠基仪式_开工仪式-神挚龙狮鼓乐文化传媒 | 胶辊硫化罐_胶鞋硫化罐_硫化罐厂家-山东鑫泰鑫智能装备有限公司 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 破碎机锤头_耐磨锤头_合金锤头-鼎成机械一站式耐磨铸件定制服务 微型驱动系统解决方案-深圳市兆威机电股份有限公司 | 深圳品牌设计公司-LOGO设计公司-VI设计公司-未壳创意 | 防水套管厂家-柔性防水套管-不锈钢|刚性防水套管-天翔管道 | 深圳市宏康仪器科技有限公司-模拟高空低压试验箱-高温防爆试验箱-温控短路试验箱【官网】 | 丽陂特官网_手机信号屏蔽器_Wifi信号干扰器厂家_学校考场工厂会议室屏蔽仪 | 砍排机-锯骨机-冻肉切丁机-熟肉切片机-预制菜生产线一站式服务厂商 - 广州市祥九瑞盈机械设备有限公司 | 污水处理设备维修_污水处理工程改造_机械格栅_过滤设备_气浮设备_刮吸泥机_污泥浓缩罐_污水处理设备_污水处理工程-北京龙泉新禹科技有限公司 | 仿古瓦,仿古金属瓦,铝瓦,铜瓦,铝合金瓦-西安东申景观艺术工程有限公司 | 广东成考网-广东成人高考网| 蜂蜜瓶-玻璃瓶-玻璃瓶厂-玻璃瓶生产厂家-徐州贵邦玻璃制品有限公司 | ph计,实验室ph计,台式ph计,实验室酸度计,台式酸度计 | 阁楼货架_阁楼平台_仓库仓储设备_重型货架_广州金铁牛货架厂 | 冷却塔厂家_冷却塔维修_冷却塔改造_凉水塔配件填料公司- 广东康明节能空调有限公司 | 北京三友信电子科技有限公司-ETC高速自动栏杆机|ETC机柜|激光车辆轮廓测量仪|嵌入式车道控制器 | 酒瓶_酒杯_玻璃瓶生产厂家_徐州明政玻璃制品有限公司 | 铝合金脚手架厂家-专注高空作业平台-深圳腾达安全科技 | 工业铝型材生产厂家_铝合金型材配件批发精加工定制厂商 - 上海岐易铝业 | 湖州织里童装_女童男童中大童装_款式多尺码全_织里儿童网【官网】-嘉兴嘉乐网络科技有限公司 | 杭州高温泵_热水泵_高温油泵|昆山奥兰克泵业制造有限公司 | 电竞馆加盟,沈阳网吧加盟费用选择嘉棋电竞_售后服务一体化 | 冷藏车厂家|冷藏车价格|小型冷藏车|散装饲料车厂家|程力专用汽车股份有限公司销售十二分公司 | 净化板-洁净板-净化板价格-净化板生产厂家-山东鸿星新材料科技股份有限公司 | 深圳市万色印象美业有限公司|