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

上一篇 / 下一篇  2022-10-18 16:45:30

查看( 412 ) / 评论( 0 ) / 评分( 0 / 0 )
　　填javascript:;" onClick="javascript:tagshow(event, '%B2%E2%CA%D4');" target="_self">测试行业问卷，不仅能获得价值398元的测试资料，还可以参与我们的抽奖活动，赶快参与一下吧。链接：http://vote.51testing.com/

　　介绍
　　数组非常适合存储相关数据，并且通常用作组织信息的一种方式。 我们中的大多数人每天都在使用它们，但是您知道 JavaScript 中还内置了一些非常简洁的数组方法吗？
　　这些方法使我们的生活变得更加轻松，将多行代码优化为一个简单的命令。 无论您是刚开始使用数组还是已经感觉自己是专家，本文都将帮助您在使用它们时变得更有效率。
　　filter（）
　　如果您想根据特定条件过滤数组，您可能需要 filter() 方法。 这是一个有用的函数，它将返回一个包含您感兴趣的所有项目的新数组。
　　它需要一个函数作为参数，它将为数组中的每个元素调用。 如果函数返回 true，则该元素将保留在数组中； 否则，它将从数组中删除。
　　例子
　　我们已从后端请求数据，并希望根据对象数组具有的属性进行客户端过滤。 在这种情况下，我们已从 JokeAPI 请求笑话，并希望过滤类别属性等于 Programming 的笑话。
　　const response = {
　　    "error": false,
　　    "amount": 4,
　　    "jokes": [
　　        {
　　            "category": "Programming",
　　            "type": "single",
　　            "joke": "Judge: \"I sentence you to the maximum punishment...\"\nMe (thinking): \"Please be death, please be death...\"\nJudge: \"Learn Java!\"\nMe: \"Damn.\"",
　　            "id": 45,
　　            "safe": true,
　　            "lang": "en"
　　        },
　　        {
　　            "category": "Christmas",
　　            "type": "twopart",
　　            "setup": "How will Christmas dinner be different after Brexit?",
　　            "delivery": "No Brussels!",
　　            "id": 251,
　　            "safe": false,
　　            "lang": "en"
　　        },
　　        {
　　            "category": "Christmas",
　　            "type": "twopart",
　　            "setup": "What do Santa's little helpers learn at school?",
　　            "delivery": "The elf-abet!\n",
　　            "id": 248,
　　            "safe": true,
　　            "lang": "en"
　　        },
　　        {
　　            "category": "Christmas",
　　            "type": "twopart",
　　            "setup": "Why couldn't the skeleton go to the Christmas party?",
　　            "delivery": "Because he had no body to go with!",
　　            "id": 252,
　　            "safe": true,
　　            "lang": "en"
　　        }
　　    ]
　　}
　　const programmingJokes = response.jokes.filter((joke) => 
　　   joke.category === "Programming"
　　);
　　console.log("programmingJokes: ", programmingJokes);
　　programmingJokes: [
　　  {
　　    "category": "Programming",
　　    "type": "single",
　　    "joke": "Judge: \"I sentence you to the maximum punishment...\"\nMe (thinking): \"Please be death, please be death...\"\nJudge: \"Learn Java!\"\nMe: \"Damn.\"",
　　    "id": 45,
　　    "safe": true,
　　    "lang": "en"
　　  },
　　]
　　map（）
　　map() 方法转换数组中的每一项，对其应用一个函数并将结果存储在一个新数组中，而不实际更改初始数组。
　　例子
　　我们已从后端请求数据，并希望从该数据中提取信息。 在这种情况下，我们从 RandomDataAPI 请求随机用户数据，并希望将每个人的年龄提取到一个数组中。
　　const response = [
　　  {
　　    "id": 7433,
　　    "uid": "4c2c1731-2c3c-4983-b39f-0f988791e98f",
　　    "password": "L903JpXGAj",
　　    "first_name": "Dalene",
　　    "last_name": "Kuhn",
　　    "username": "dalene.kuhn",
　　    "email": "dalene.kuhn@email.com",
　　    "avatar": "https://robohash.org/autmagnisunt.png?size=300x300&set=set1",
　　    "gender": "Agender",
　　    "phone_number": "+964 771-857-9446 x77784",
　　    "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": "+689 743-128-5476 x530",
　　    "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": "+675 552-834-4168 x39534",
　　    "age": 21,
　　  }
　　]
　　const arrayOfAges = response.map(person person.age);
　　console.log("arrayOfAges: ", arrayOfAges)
　　arrayOfAges: [25, 30, 21]
　　reduce（）
　　reduce() 方法通过对每个元素应用一个函数并累积结果，将数组缩减为单个值。 这是查找总数或查找所有项目平均值的好方法。
　　例子
　　我们有一个包含每月存款的数组，我们想知道所有存款的总和。
　　const depositsArray = [{
　　      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: '$',},
　　];
　　  
　　const sumOfDeposits = depositsArray.reduce((total, transaction) => 
　　   total + transaction.deposit, 0
　　);
　　  
　　console.log('depositsArray: ', depositsArray);
　　console.log('sumOfDeposits: ', sumOfDeposits);
　　depositsArray: [{...}, {...}, {...}, {...}, {...}]
　　sumOfDeposits: 55
　　some（）
　　some() 方法检查数组中的至少一个元素是否满足由提供的函数实现的测试。 如果它确实满足测试，它将返回true； 否则，它将返回 false。
　　例子
　　我们已从后端请求用户，并想知道其中一个是否已被标记为机器人。
　　const response = [
　　  {
　　    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,
　　  },
　　];
　　const isNotValidUsers = response.some((user) => user.isBot === false);
　　console.log("isNotValidUsers: ", isNotValidUsers)
　　isNotValidUsers: true
　　every（）
　　every() 方法检查数组中的每个元素是否满足由提供的函数实现的测试。 如果是，它将返回 true； 否则，它将返回 false
　　例子
　　我们的购物车中有一份产品清单，想检查是否有库存。
　　const response = [
　　    {
　　      "id": 1,
　　      "title": "iPhone 9",
　　      "price": 549,
　　      "discountPercentage": 12.96,
　　      "rating": 4.69,
　　      "stock": 94
　　    },
　　    {
　　      "id": 2,
　　      "title": "Apple Watch",
　　      "price": 300,
　　      "discountPercentage": 10,
　　      "rating": 4.40,
　　      "stock": 20
　　    },
　　     {
　　      "id": 3,
　　      "title": "Apple Headphones",
　　      "price": 600,
　　      "discountPercentage": 7,
　　      "rating": 4.65,
　　      "stock": 2
　　    },
　　]
　　const hasStock = response.every((item) => item.stock > 0);
　　console.log("hasStock: ", hasStock);
　　hasStock: true
　　结论
　　数组是任何编程语言中最基本和最重要的数据结构之一。 在学习 JavaScript 时，了解如何使用这些数组方法更有效地操作和存储数据会很有帮助。 这些方法包括 filter()、map()、reduce()、some() 和 every()，它们可以帮助您提高代码效率。

收藏 举报

TAG: 软件开发 Javascript JavaScript

 

评分：0

我来说两句

Open Toolbar