數(shù)組非常適合存儲(chǔ)相關(guān)數(shù)據(jù)，并且通常用作組織信息的一種方式。 我們中的大多數(shù)人每天都在使用它們，但是您知道 JavaScript 中還內(nèi)置了一些非常簡潔的數(shù)組方法嗎？
介紹
數(shù)組非常適合存儲(chǔ)相關(guān)數(shù)據(jù)，并且通常用作組織信息的一種方式。 我們中的大多數(shù)人每天都在使用它們，但是您知道 JavaScript 中還內(nèi)置了一些非常簡潔的數(shù)組方法嗎？
這些方法使我們的生活變得更加輕松，將多行代碼優(yōu)化為一個(gè)簡單的命令。 無論您是剛開始使用數(shù)組還是已經(jīng)感覺自己是專家，本文都將幫助您在使用它們時(shí)變得更有效率。
filter（）
如果您想根據(jù)特定條件過濾數(shù)組，您可能需要 filter() 方法。 這是一個(gè)有用的函數(shù)，它將返回一個(gè)包含您感興趣的所有項(xiàng)目的新數(shù)組。
它需要一個(gè)函數(shù)作為參數(shù)，它將為數(shù)組中的每個(gè)元素調(diào)用。 如果函數(shù)返回 true，則該元素將保留在數(shù)組中； 否則，它將從數(shù)組中刪除。
例子
我們已從后端請(qǐng)求數(shù)據(jù)，并希望根據(jù)對(duì)象數(shù)組具有的屬性進(jìn)行客戶端過濾。 在這種情況下，我們已從 JokeAPI 請(qǐng)求笑話，并希望過濾類別屬性等于 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() 方法轉(zhuǎn)換數(shù)組中的每一項(xiàng)，對(duì)其應(yīng)用一個(gè)函數(shù)并將結(jié)果存儲(chǔ)在一個(gè)新數(shù)組中，而不實(shí)際更改初始數(shù)組。
例子
我們已從后端請(qǐng)求數(shù)據(jù)，并希望從該數(shù)據(jù)中提取信息。 在這種情況下，我們從 RandomDataAPI 請(qǐng)求隨機(jī)用戶數(shù)據(jù)，并希望將每個(gè)人的年齡提取到一個(gè)數(shù)組中。
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() 方法通過對(duì)每個(gè)元素應(yīng)用一個(gè)函數(shù)并累積結(jié)果，將數(shù)組縮減為單個(gè)值。 這是查找總數(shù)或查找所有項(xiàng)目平均值的好方法。
例子
我們有一個(gè)包含每月存款的數(shù)組，我們想知道所有存款的總和。
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: 55some（）
some() 方法檢查數(shù)組中的至少一個(gè)元素是否滿足由提供的函數(shù)實(shí)現(xiàn)的測試。 如果它確實(shí)滿足測試，它將返回true； 否則，它將返回 false。
例子
我們已從后端請(qǐng)求用戶，并想知道其中一個(gè)是否已被標(biāo)記為機(jī)器人。
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)
every（）
every() 方法檢查數(shù)組中的每個(gè)元素是否滿足由提供的函數(shù)實(shí)現(xiàn)的測試。 如果是，它將返回 true； 否則，它將返回 false
例子
我們的購物車中有一份產(chǎn)品清單，想檢查是否有庫存。
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);
結(jié)論
數(shù)組是任何編程語言中最基本和最重要的數(shù)據(jù)結(jié)構(gòu)之一。 在學(xué)習(xí) JavaScript 時(shí)，了解如何使用這些數(shù)組方法更有效地操作和存儲(chǔ)數(shù)據(jù)會(huì)很有幫助。 這些方法包括 filter()、map()、reduce()、some() 和 every()，它們可以幫助您提高代碼效率。
