在 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. Mybatis profile depth
  2. 深入理解Java虚拟机是怎么实现synchronized的?
  3. On the relationship among object, class, abstract class, interface and inheritance in Java
  4. Spring security real combat dry goods: the core logic of oauth2 login to obtain token
  5. In depth understanding of how Java virtual machine implements synchronized?
  6. 关于Java中的对象、类、抽象类、接口、继承之间的联系
  7. Spring Security 实战干货:OAuth2登录获取Token的核心逻辑
  8. On the relationship among object, class, abstract class, interface and inheritance in Java
  9. Spring security real combat dry goods: the core logic of oauth2 login to obtain token
  10. Spring事务
  11. 解决Docker MySQL无法被宿主机访问的问题
  12. Spring Boot 构建一个RESTful Web服务
  13. Spring transactions
  14. Solve the problem that docker MySQL cannot be accessed by the host
  15. Build a restful web service with spring boot
  16. Java中针对Yaml格式数据操作记录
  17. Java for yaml format data operation record
  18. Spring Authorization Server 全新授权服务器整合使用
  19. Java 集合处理/ 空值处理/ 异常处理,使用心得分享!
  20. Integrated use of new authorization server of spring authorization server
  21. Java collection processing / null value processing / exception processing, use experience sharing!
  22. mysql Innodb_flush_log_at_trx_commit 和 sync_binlog
  23. mysql Innodb_ flush_ log_ at_ trx_ Commit and sync_ binlog
  24. 不能回滚的Redis事务还能用吗
  25. 不能回滚的Redis事务还能用吗
  26. Can redis transactions that cannot be rolled back be used
  27. 23种java设计模式
  28. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  29. Docker overlay 清理空间
  30. 「Linux」- 安装 Opera 浏览器 @20210223
  31. java的byte和C#的byte的不同之处
  32. Can redis transactions that cannot be rolled back be used
  33. 23 Java design patterns
  34. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  35. Docker overlay cleaning space
  36. "Linux" - install opera browser @ 20210223
  37. Differences between Java byte and C byte
  38. SAP UI5 JavaScript文件的lazy load - 懒加载
  39. Java 在Excel中添加筛选器并执行筛选
  40. LiteOS:盘点那些重要的数据结构
  41. Lazy load lazy load of SAP ui5 JavaScript files
  42. Add filter and execute filter in excel by Java
  43. Liteos: inventory those important data structures
  44. HDFS依然是存储的王者
  45. [MySQL]事务的MVCC原理与幻读
  46. 93.7%的程序员!竟然都不知道Redis为什么默认16个数据库?
  47. Java 集合处理/ 空值处理/ 异常处理,使用心得分享!
  48. Spring Authorization Server 全新授权服务器整合使用
  49. Spring Security 实战干货:OAuth2登录获取Token的核心逻辑
  50. Java中各种锁的原理解析
  51. java的byte和C#的byte的不同之处
  52. Java 在Excel中添加筛选器并执行筛选
  53. HDFS is still the king of storage
  54. Mvcc principle and unreal reading of [MySQL] transaction
  55. 93.7% of programmers! Why does redis default to 16 databases?
  56. Java collection processing / null value processing / exception processing, use experience sharing!
  57. Integrated use of new authorization server of spring authorization server
  58. Spring security real combat dry goods: the core logic of oauth2 login to obtain token
  59. Principle analysis of various locks in Java
  60. Differences between Java byte and C byte