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

主站蜘蛛池模板: 郑州宣传片拍摄-TVC广告片拍摄-微电影短视频制作-河南优柿文化传媒有限公司 | 定制异形重型钢格栅板/钢格板_定做踏步板/排水沟盖板_钢格栅板批发厂家-河北圣墨金属制品有限公司 | 包塑软管|金属软管|包塑金属软管-闵彬管业 | 净气型药品柜-试剂柜-无管道净气型通风柜-苏州毕恩思 | 废水处理-废气处理-工业废水处理-工业废气处理工程-深圳丰绿环保废气处理公司 | 对夹式止回阀_对夹式蝶形止回阀_对夹式软密封止回阀_超薄型止回阀_不锈钢底阀-温州上炬阀门科技有限公司 | 【MBA备考网】-2024年工商管理硕士MBA院校/报考条件/培训/考试科目/提前面试/考试/学费-MBA备考网 | 气动球阀_衬氟蝶阀_调节阀_电动截止阀_上海沃托阀门有限公司 | 清水混凝土修复_混凝土色差修复剂_混凝土色差调整剂_清水混凝土色差修复_河南天工 | 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 | 安徽净化板_合肥岩棉板厂家_玻镁板厂家_安徽科艺美洁净科技有限公司 | 一体化污水处理设备,一体化污水设备厂家-宜兴市福源水处理设备有限公司 | 扬尘监测_扬尘监测系统_带证扬尘监测设备 - 郑州港迪科技有限公司 | 华东师范大学在职研究生招生网_在职研究生招生联展网 | 汽车水泵_汽车水泵厂家-瑞安市骏迪汽车配件有限公司 | 超声波焊接机,振动摩擦焊接机,激光塑料焊接机,超声波焊接模具工装-德召尼克(常州)焊接科技有限公司 | 糖衣机,除尘式糖衣机,全自动糖衣机,泰州市长江制药机械有限公司 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 匀胶机旋涂仪-声扫显微镜-工业水浸超声-安赛斯(北京)科技有限公司 | 建大仁科-温湿度变送器|温湿度传感器|温湿度记录仪_厂家_价格-山东仁科 | 塑胶跑道施工-硅pu篮球场施工-塑胶网球场建造-丙烯酸球场材料厂家-奥茵 | 综合管廊模具_生态,阶梯护坡模具_检查井模具制造-致宏模具厂家 | 超声波乳化机-超声波分散机|仪-超声波萃取仪-超声波均质机-精浩机械|首页 | 净化车间装修_合肥厂房无尘室设计_合肥工厂洁净工程装修公司-安徽盛世和居装饰 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 铁艺,仿竹,竹节,护栏,围栏,篱笆,栅栏,栏杆,护栏网,网围栏,厂家 - 河北稳重金属丝网制品有限公司 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 3d打印服务,3d打印汽车,三维扫描,硅胶复模,手板,快速模具,深圳市精速三维打印科技有限公司 | 杭州双螺杆挤出机-百科 | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 不锈钢发酵罐_水果酒发酵罐_谷物发酵罐_山东誉诚不锈钢制品有限公司 | 都江堰招聘网-都江堰人才网 都江堰人事人才网 都江堰人才招聘网 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 衬氟止回阀_衬氟闸阀_衬氟三通球阀_衬四氟阀门_衬氟阀门厂-浙江利尔多阀门有限公司 | 不锈钢酒柜|恒温酒柜|酒柜定制|酒窖定制-上海啸瑞实业有限公司 | 天津热油泵_管道泵_天津高温热油泵-天津市金丰泰机械泵业有限公司【官方网站】 | 济南电缆桥架|山东桥架-济南航丰实业有限公司 | 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 儋州在线-儋州招聘找工作、找房子、找对象,儋州综合生活信息门户! | 深圳办公室装修-写字楼装修设计-深圳标榜装饰公司 | 民用音响-拉杆音响-家用音响-ktv专用音响-万昌科技 | 热镀锌槽钢|角钢|工字钢|圆钢|H型钢|扁钢|花纹板-天津千百顺钢铁贸易有限公司 | 航空铝型材,7系铝型材挤压,硬质阳*氧化-余润铝制品 |