首页 > 编程语言 >2022 年你需要掌握的 7 种关于 JavaScript 的数组方法(下)

2022 年你需要掌握的 7 种关于 JavaScript 的数组方法(下)

时间:2022-11-09 15:58:46浏览次数:48  
标签:2022 car price JavaScript builtIn 数组 cars brand

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()?

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

总结

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

标签:2022,car,price,JavaScript,builtIn,数组,cars,brand
From: https://www.cnblogs.com/baoxinyu/p/16874020.html

相关文章

  • 2022 年了,我才开始学 TypeScript ,晚吗?(7.5k字总结)
    2022年了,我才开始学TypeScript,晚吗?(7.5k字总结)原文地址https://mp.weixin.qq.com/s/sbt8SDmke7QoSXtwYucDcA前言其实早在初学前端时,就有大致了解过typescript,但后......
  • 数组数据转为树状结构
    代码letarr=[{id:3,parent:2},{id:1,parent:null},{id:2,parent:1},]letroot=arr.map(i=>{ letchildren=arr.filte......
  • AICon 2022 | 来杭州和 OpenMLDB 见面吧
    9月26日,9:00-18:00,由LFAI&DATA基金会主办的AICON2022将在杭州举行。OpenMLDB项目发起人、第四范式技术副总裁郑曌受邀参与「AI发展战略圆桌讨论」与其他业界......
  • javascript基础知识之闭包和递归
    一,什么是闭包,会出现什么问题?如何避免?1、函数里面包含的子函数,子函数访问父函数的局部变量2、通过return将子函数暴露在全局作用域,子函数就形成闭包3、通过闭包,父函数的局......
  • 力扣-560-和为K的子数组
    和为K的子数组…首先子数组和子串一样,都是连续的又是dp的感觉…好像又用不到dp虽然不是dp的思路,但是感觉写出来跟dp很像intsubarraySum(vector<int>&nums,intk){......
  • JS实现数组去重(重复的元素只保留一个)
    JS实现数组去重(重复的元素只保留一个)1.遍历数组法它是最简单的数组去重方法(indexOf方法)实现思路:新建一个数组,遍历去要重的数组,当值不在新数组的时候(indexOf为-1)就加入该......
  • 使用Javascript查找图像上的坐标
    下面的代码在页面标题中。GetCoordinates函数使用window.event方法查找单击鼠标时的坐标。它还需要考虑任何滚动和图像在文档中的位置,以便坐标始终相对于图像的左上角。......
  • vue运行或打包报错Ineffective mark-compacts near heap limit Allocation failed-Jav
    vue运行或打包报错:Ineffectivemark-compactsnearheaplimitAllocationfailed-JavaScriptheapoutofmemory问题:用npmrundev启动项目或者npmrunbuild打包会报em......
  • 用JavaScript实现按钮的事件委托并且区分按钮
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • [CSP-S 2022]数据传输 题解
    提示:我这个方法比其它解法还要麻烦,目前最简洁的解法是dottle的解法,推荐阅读,我仅在此说明我的思路。给定\(n\)个点的树,点\(i\)的点权为\(a_i\),给定整数\(k\)。称......