当前位置: 首页 > 科技观察

五个必须知道的JavaScript数组方法,让你的生活更轻松

时间:2023-03-12 14:20:48 科技观察

介绍数组非常适合存储相关数据,通常用作组织信息的方式。我们大多数人每天都使用它们,但您知道JavaScript还内置了一些非常简洁的数组方法吗?这些方法使我们的生活更轻松,将多行代码优化为单个命令。无论您是刚刚开始使用数组还是已经感觉自己是专家,本文都将帮助您在使用数组时提高工作效率。filter()如果你想根据特定条件过滤一个数组,你可能需要filter()方法。这是一个有用的函数,它返回一个包含您感兴趣的所有项目的新数组。它以一个函数作为参数,该函数将为数组中的每个元素调用。如果函数返回真,元素将保留在数组中;否则,它将从数组中删除。示例我们已从后端请求数据,并希望根据对象数组具有的属性进行客户端过滤。在本例中,我们已从JokeAPI请求笑话,并希望过滤类别属性等于Programming的笑话。constresponse={"error":false,"amount":4,"jokes":[{"category":"Programming","type":"single","joke":"Judge:\"我判你到最大的惩罚...\"\n我(思考):\"请死,请死...\"\n法官:\"学习Java!\"\n我:\"Damn.\"","id":45,"safe":true,"lang":"en"},{"category":"Christmas","type":"twopart","setup":"圣诞大餐过后会有什么不同英国脱欧?”,“delivery”:“NoBrussels!”,“id”:251,“safe”:false,“lang”:“en”},{“category”:“Christmas”,“type”:“twopart”","setup":"圣诞老人的小帮手在学校都学什么?","delivery":"小精灵教唆!\n","id":248,"safe":true,"lang":"en"},{"约tegory":"Christmas","type":"twopart","setup":"为什么骷髅不能去参加圣诞晚会?","delivery":"因为他没有身体可以陪!","id":252,"safe":true,"lang":"en"}]}constprogrammingJokes=response.jokes.filter((joke)=>joke.category==="Programming");console.log("programmingJokes:",programmingJokes);programmingJokes:[{"category":"Programming","type":"single","joke":"Judge:\"我判你最高刑罚...\"\n我(思考):\"请死,请死...\"\n判断:\"学习Java!\"\n我:\"Damn.\"","id":45,"safe":true,"lang":"en"},]map()map()方法转换数组中的每个项目,对其应用一个函数并将结果存储在一个新数组中,而不实际更改初始数组示例我们有从后端请求数据并希望从该数据中提取信息。在这种情况下,我们从RandomDataAPI请求随机用户数据并希望将每个人的年龄提取到一个数组中。constresponse=[{“id”:7433,“uid”:“4c2c1731-2c3c-4983-b39f-0f988791e98f”,“密码”:“L903JpXGAj”,“first_name”:“Dalene”,“last_name”:“Kuhn”,"用户名":"dalene.kuhn","邮箱":"dalene.kuhn@email.com","头像":"https://robohash.org/autmagnisunt.png?size=300x300&set=set1","性别”:“Agender”,“phone_number”:“+964771-857-9446x77784”,“social_insurance_number”:“607847845”,“age”:25,},{“id”:3764,“uid”:“0c1c9485-2b90-4e68-a795-0e4925aa8344","password":"XjyI92Y1dl","first_name":"Laurence","last_name":"Lowe","username":"laurence.lowe","email":"laurence.lowe@email.com","avatar":"https://robohash.org/quinonomnis.png?size=300x300&set=set1","gender":"Agender","phone_number":"+689743-128-5476x530","social_insurance_number":"737935460","age":30,},{"id":9408,"uid":"4933cb5d-f4f5-4bc3-8d37-f4c9b3129923","password":"JrI8e4KVjs","first_name":"Gabriella","last_name":"Tillman","username":"gabriella.tillman","email":"gabriella.tillman@email.com","avatar":"https://robohash.org/repellatmaioresmolestiae.png?size=300x300&set=set1","gender":"Bigender","phone_number":"+675552-834-4168x39534","age":21,}]constarrayOfAges=response.map(personperson.age);console.log("arrayOfAges:",arrayOfAges)arrayOfAges:[25,30,21]reduce()reduce()方法通过对每个元素应用一个函数并累积结果,将数组缩减为单个值这是查找总数或查找所有项目的平均值的好方法。示例我们有一个包含每月存款的数组,我们想知道所有存款的总和。constdepositsArray=[{id:1231,deposit:5,currency:'$',},{id:1231,deposit:10,currency:'$',},{id:1231,deposit:20,currency:'$',},{id:1231,deposit:5,currency:'$',},{id:1231,deposit:15,currency:'$',},];constsumOfDeposits=depositsArray.reduce((total,transaction)=>total+transaction.deposit,0);console.log('depositsArray:',depositsArray);console.log('sumOfDeposits:',sumOfDeposits);depositsArray:[{...},{...},{...},{...},{...}]sumOfDeposits:55some()some()方法检查数组中的至少一个元素是否满足由提供的函数实现的测试。如果它确实满足测试,它将返回true;否则,它将返回false。示例我们已从后端请求用户,并想知道其中一个用户是否已被标记为机器人。constresponse=[{id:101,firstName:'Muhammad',lastName:'Ovi',age:25,isBot:false,},{id:102,firstName:'John',lastName:'Doe',age:30,isBot:true,},{id:103,firstName:'Chris',lastName:'Smith',age:27,isBot:false,},];constisNotValidUsers=response.some((user)=>user.isBot===false);console.log("isNotValidUsers:",isNotValidUsers)isNotValidUsers:trueevery()every()方法检查数组中的每个元素是否满足提供的函数所实现的测试。如果是,它将返回true;否则,它将返回false示例我们的购物车中有一个产品列表,想检查它们是否有货。constresponse=[{"id":1,"title":"iPhone9","price":549,"discountPercentage":12.96,"rating":4.69,"stock":94},{"id":2,"title":"AppleWatch","price":300,"discountPercentage":10,"rating":4.40,"stock":20},{"id":3,"title":"AppleHeadphones","price":600,"discountPercentage":7,"rating":4.65,"stock":2},]consthasStock=response.every((item)=>item.stock>0);console.log("hasStock:",hasStock);hasStock:true结论数组是任何编程语言中最基本和最重要的数据结构之一。在学习JavaScript时,了解如何使用这些数组方法更有效地操作和存储数据是很有帮助的。这些方法包括filter()、map()、reduce()、some()和every(),它们可以帮助您提高代码效率。