实战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

主站蜘蛛池模板: 西安耀程造价培训机构_工程预算实训_广联达实作实操培训 | 淘剧影院_海量最新电视剧,免费高清电影随心观看 | 液晶拼接屏厂家_拼接屏品牌_拼接屏价格_监控大屏—北京维康 | 布袋式除尘器|木工除尘器|螺旋输送机|斗式提升机|刮板输送机|除尘器配件-泊头市德佳环保设备 | SMC-ASCO-CKD气缸-FESTO-MAC电磁阀-上海天筹自动化设备官网 | vr安全体验馆|交通安全|工地安全|禁毒|消防|安全教育体验馆|安全体验教室-贝森德(深圳)科技 | 肉嫩度仪-凝胶测试仪-国产质构仪-气味分析仪-上海保圣实业发展有限公司|总部 | 保定市泰宏机械制造厂-河北铸件厂-铸造厂-铸件加工-河北大件加工 | 金属检测机_金属分离器_检针验针机_食品药品金属检探测仪器-广东善安科技 | 杭州公司变更法人-代理记账收费价格-公司注销代办_杭州福道财务管理咨询有限公司 | 拉曼光谱仪_便携式|激光|显微共焦拉曼光谱仪-北京卓立汉光仪器有限公司 | 小学教案模板_中学教师优秀教案_高中教学设计模板_教育巴巴 | 京马网,京马建站,网站定制,营销型网站建设,东莞建站,东莞网站建设-首页-京马网 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 塑木弯曲试验机_铜带拉伸强度试验机_拉压力测试台-倾技百科 | 二手回收公司_销毁处理公司_设备回收公司-找回收信息网 | 仿古建筑设计-仿古建筑施工-仿古建筑公司-汉匠古建筑设计院 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 点胶机_点胶阀_自动点胶机_智能点胶机_喷胶机_点胶机厂家【欧力克斯】 | 地磅-电子地磅维修-电子吊秤-汽车衡-无人值守系统-公路治超-鹰牌衡器 | 商用绞肉机-熟肉切片机-冻肉切丁机-猪肉开条机 - 广州市正盈机械设备有限公司 | 复合土工膜厂家|hdpe防渗土工膜|复合防渗土工布|玻璃纤维|双向塑料土工格栅-安徽路建新材料有限公司 | 超声波反应釜【百科】-以马内利仪器 | 宁夏活性炭_防护活性炭_催化剂载体炭-宁夏恒辉活性炭有限公司 | 北京发电机出租_发电机租赁_北京发电机维修 - 河北腾伦发电机出租 | 承插管件_不锈钢承插管件_锻钢高压管件-温州科正阀门管件有限公司 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 不锈钢闸阀_球阀_蝶阀_止回阀_调节阀_截止阀-可拉伐阀门(上海)有限公司 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | 桁架楼承板-钢筋桁架楼承板-江苏众力达钢筋楼承板厂 | 双工位钻铣攻牙机-转换工作台钻攻中心-钻铣攻牙机一体机-浙江利硕自动化设备有限公司 | NM-02立式吸污机_ZHCS-02软轴刷_二合一吸刷软轴刷-厦门地坤科技有限公司 | 办公室家具_板式办公家具定制厂家-FMARTS福玛仕办公家具 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 杭州成人高考_浙江省成人高考网上报名 | 光纤测温-荧光光纤测温系统-福州华光天锐光电科技有限公司 | 除甲醛公司-甲醛检测治理-杭州创绿家环保科技有限公司-室内空气净化十大品牌 | 酒糟烘干机-豆渣烘干机-薯渣烘干机-糟渣烘干设备厂家-焦作市真节能环保设备科技有限公司 | 户外环保不锈钢垃圾桶_标识标牌制作_园林公园椅厂家_花箱定制-北京汇众环艺 | 免费网站网址收录网_海企优网站推荐平台 |