在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法

求知编程学院 2021-02-23 12:30:56
javascript rails volkswagen


在新的一年我们学习这些有用的方法

JavaScript 为我们提供了许多处理数组的不同方法。我们将在几分钟内为您介绍 7 个基本且常用的数据方法,以提高您的 JS 开发技能。

1. Array.map()

当你在数组上使用 map() 方法的时候,它将在原始的数组创建一个新的数组。

这个 map() 方法接受一个参数,这个参数是个函数,这个函数可以去循环或遍历数组中的每个元素,也可以对里面的每个元素进行修改,然后组合返回出一个新的数组。

当你想在一个数组中把它的元素修改或更新,然后存储成一个新的数组的时候,这个 .map() 方法就会派上用场。

假设我们有一个包含汽车品牌的数组:

const cars = ["Porsche", "Audi", "BMW", "Volkswagen"];

当然,我们认为所有的车都很酷,我们想添加一些文字来表达这一点。 我们可以使用 .map() 方法:

const coolCars = cars.map((car) => `${car} is a pretty cool car brand!`);
// 结果:
[
"Porsche is a pretty cool car brand!",
"Audi is a pretty cool car brand!",
"BMW is a pretty cool car brand!",
"Volkswagen is a pretty cool car brand!",
];

这里, 这个 map() 方法用于创建新的修改后的数组

太棒了! 那个 map() 方法创建了一个新数组,并将文本添加到每个元素。

有时候数组包含对象(object),我们又应该如何操作呢?

让我们看下面的例子,给这个汽车添加价格属性,变成对象的情况:

const carsWithPrice = [
{ brand: "Porsche", price: 100000 },
{ brand: "Audi", price: 80000 },
];
const carsWithPriceAndTax = cars.map((carObject) => {
return {
// Return the original car object
...carObject,
// but also add a new value containing the price with tax
priceWithTax: carObject.price * 1.2,
};
});
// 结果:
[
{ brand: "Porsche", price: 100000, priceWithTax: 120000 },
{ brand: "Audi", price: 80000, priceWithTax: 96000 },
];

使用 map() 方法以创建包含含税价格的新数组

总之,map() 方法是一种非常常用的方法,用于创建新数组、修改其内容并保持原始数组不变。

何时使用 Array.map()?

当您想要修改现有数组的内容并将结果存储为新数组的时候。

2. Array.filter()

你几乎猜到这个方法是什么的。

这个 .filter() 方法允许您根据特定条件获取数组中的元素。

就像 map() 方法一样,它将返回一个新数组并保持原始数组不变。

例如,使用汽车的例子,我们可以用基于汽车价格高于某个值来过滤数组。

在这里,我们有所有可用的汽车:

const cars = [
{ brand: "Porsche", price: 100000 },
{ brand: "Audi", price: 80000 },
{ brand: "Toyota", price: 30000 },
];

现在,假设所有价值 40,000 或更多的汽车都很贵。

我们可以使用 filter() 方法所有 “便宜” 和 “昂贵” 的汽车。

const expensiveCars = cars.filter((car) => car.price >= 40000);
const cheapCars = cars.filter((car) => car.price < 40000);
// 结果 - 贵车
[
{ brand: "Porsche", price: 100000 },
{ brand: "Audi", price: 80000 },
];
// 结果 - 便宜车
[{ brand: "Toyota", price: 30000 }];

使用过滤方法从数组中过滤 "便宜"、"昂贵"的汽车

检查数组的每个元素,看它是否符合标准,如果通过测试,它将在新数组中返回。

何时使用 Array.filter()?

当您想要从数组中删除不符合特定条件/条件的元素时。

3. Array.reduce()

现在这个可能有点难以理解。

简而言之,在数组中调用 .reduce() 方法,它会通过执行一个函数或方法来循环遍历数组中的每个元素,最终返回出一个值。

那个 reduce() 方法将回调函数作为其第一个参数,并将可选的初始值作为其第二个参数。如果未提供初始值,则使用数组的第一个值。这个回调函数将提供 accumulatorcurrentValue 参数用于执行 reduce 计算。

我知道这可能有点复杂,但没关系。

这里有一个简单的例子来展示 reduce() 方法:

假设我们想要获取数组中所有数字的总值。

const numbers = [13, 65, 29, 81, 47];

然后,我们可以使用 reduce () 方法将所有这些值加在一起。

const total = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue,
0
);
// 结果 - 总数:
235;

使用 reduce 方法将数组的所有值相加

使用的另一种 reduce() 函数的方式是展平数组,已经有很多方法可以做到这一点,这就是其中之一。

const flattened = [
[0, 1],
[2, 3],
[4, 5],
].reduce((accumulator, currentValue) => accumulator.concat(currentValue), [])[
// Result - Flattened:
(0, 1, 2, 3, 4, 5)
];

使用 reduce 方法展平数组

何时使用 Array.reduce()?

当您想要通过操作数组的值将数组转换为单个值的时候。

4. Array.forEach()

现在这是一个经典。

那个 forEach() 方法的工作原理很像常规 for 循环。

它在数组上循环并对每个项目执行一个函数。 .forEach() 的第一个参数是个函数,这个函数的参数,包含数组的元素的当前值和索引。

让我们看一个汽车的例子:

const cars = [
{ brand: "Porsche", price: 100000 },
{ brand: "Audi", price: 80000 },
{ brand: "Toyota", price: 30000 },
];

我们可以遍历数组中的元素汽车,用 console.log 语句把汽车的品牌名和价格输出来。

cars.forEach((car) => {
console.log(`The ${car.brand} will cost you ${car.price} before taxes`);
});
// 结果:
("The Porsche will cost you 100000 before taxes");
("The Audi will cost you 80000 before taxes");
("The Toyota will cost you 30000 before taxes");

使用 forEach 方法去循环所有的汽车,然后用文本输出它的品牌名和价格。

何时使用 Array.forEach()?

当您想要简单地循环任何数组的每个元素而不构造新数组时。

5. Array.find()

这个 .find() 方法很像我们之前说的 .filter() 方法。

就像 .filter() 方法,您将能够传递数组值必须匹配的条件。

两者的区别在于 .find() 将仅返回与您提供的条件匹配的第一个元素。

以汽车为例, 让我们使用 .find() 方法在数组中找到第一个最贵的汽车:

const cars = [
{brand: "Porsche", price: 100000},
{brand: "Audi", price: 80000},
{brand: "Toyota", price: 30000}
];
const expensiveCar = cars.find(car => car.price >= 40000);
// 结果 - 贵车:
{brand: "Porsche", price: 100000}

使用 .find() 方法查找数组中的第一辆 “昂贵” 汽车

何时使用 Array.find()?

当你想要找到满足条件的数组中的第一个值的时候

6. Array.every()

也许你已经可以猜测这种方法是做什么的。

这个 .every() 方法将检查数组中的所有元素是否通过提供的条件。

如果数组中的所有元素都通过条件,则该方法将返回 true。否则,它将返回 false

例如,我们可以使用 .every() 方法检查所有的车是否可以在 5 内年制造。

const cars = [
{ brand: "Porsche", price: 100000, builtIn: 2018 },
{ brand: "Audi", price: 80000, builtIn: 2019 },
{ brand: "Toyota", price: 30000, builtIn: 2019 },
];
const carsYoungerThanFiveYears = cars.every((car) => car.builtIn >= 2016);
// Result - Younger than 5 Years:
true;

使用 .every() 方法来确定是否所有的汽车都是在 5 年内制造的

何时使用 Array.every()?

当您想要确定数组中的所有元素满足特定条件的时候。

7. Array.some()

.some() 方法有点像 .every() 方法,但并不是所有元素的条件都满足后才通过测试,而是只要有其中一个元素满足条件,就会通过测试的。

只要 .some 方法找到成功的数组元素,就会停止遍历查找,就会返回 true,然后,如果直到找最后一个元素还没成功,就会返回 false

让我们再次使用我们的汽车数组,但是这次我们将检查一些汽车是否超过 5 年。

const cars = [
{ brand: "Porsche", price: 100000, builtIn: 2018 },
{ brand: "Audi", price: 80000, builtIn: 2019 },
{ brand: "Toyota", price: 30000, builtIn: 2019 },
];
const carsOlderThanFiveYears = cars.some((car) => car.builtIn < 2016);
// 结果 - 小于 5 年的:
false;

何时使用 Array.some()?

当你要在数组中查看是否有找到满足条件的元素的时候

总结

这些方法都很简单学习与理解,只要多写例子就好,我们可以经常在各种项目中应用到它们。

版权声明
本文为[求知编程学院]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/2417355/blog/4960287

  1. JS mechanism 3: stack, heap, garbage collection
  2. [grid compression evaluation] meshquan, meshopt, Draco
  3. Deep understanding of Vue modifier sync [Vue sync modifier example]
  4. WebView for front end engineers
  5. React form source code reading notes
  6. Deep thinking about modern package manager -- why do I recommend pnpm instead of NPM / yarn?
  7. On the sequence of event capture and event bubbling
  8. Help you build a systematic understanding of the front end scaffolding
  9. commander.js Principle analysis
  10. Common usage of nginx
  11. H5 jump to wechat app
  12. Front end algorithm interview must brush questions series [14]
  13. Thinking of cross end practice
  14. Vue server rendering principle analysis and introduction
  15. [KT] vscode plug in development example series (2)
  16. Design ideas of react and Vue framework
  17. JavaScript String.prototype.replaceAll 兼容性导致的问题
  18. JavaScript String.prototype.replaceAll Problems caused by compatibility
  19. 爱奇艺体育:体验Serverless极致扩缩容,资源利用率提升40%
  20. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  21. 对前端异常window error捕获的全面总结
  22. A comprehensive summary of front end exception window error capture
  23. 成功解决Problem while trying to mount target]\“. HTTP response code is 400
  24. Problem while trying to mount target] \ ". HTTP response code is 400
  25. 放弃okhttp、httpClient,选择了这个牛逼的神仙工具!贼爽
  26. 前端面试每日 3+1 —— 第679天
  27. How to add elements at the beginning of an array in JS?
  28. Give up okhttp and httpclient and choose this awesome immortal tool! Thief Shuang
  29. Front end interview daily 3 + 1 - day 679
  30. 【2021 第一期】日常开发 26 个常见的 JavaScript 代码优化方案
  31. Daily development of 26 common JavaScript code optimization schemes
  32. 前端的字符串时间如何自动转换为后端Java的Date属性,介绍springMVC中如何解决时间转换问题
  33. How to automatically convert the front-end string time to the back-end Java date attribute, and how to solve the time conversion problem in spring MVC are introduced
  34. 前端面试常考题:JS垃圾回收机制
  35. ReactDOM.render串联渲染链路(一)
  36. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  37. 粗涉Webpack
  38. Frequently asked questions in front end interview: JS garbage collection mechanism
  39. ReactDOM.render Serial rendering link (1)
  40. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  41. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  42. About webpack
  43. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  44. 详解vue静态资源打包中的坑与解决方案
  45. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  46. 字节跳动2021前端技术岗发布+最新内部面试题
  47. Detailed explanation of Vue static resource packaging and Solutions
  48. Understanding TCP, HTTP, socket, socket connection pool
  49. 2008-2021 front end technical post release + latest internal interview questions
  50. 4. Vue基本指令
  51. 4. Vue basic instruction
  52. Java 发起 http 请求
  53. Java initiates HTTP request
  54. 网站由http升级为https图文教程
  55. Upgrade the website from HTTP to HTTPS
  56. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  57. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  58. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  59. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  60. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?