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

求知久久技术 2021-02-23 12:34:49
javascript 数组 掌握 需要 组方


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

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://www.cnblogs.com/hfpp2012/p/14435355.html

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云