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

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

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

总结

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

在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法的更多相关文章

  1. JDBC 基本操作

    1. 简介 JDBC(Java DataBase Connectivity) 是有一些接口和类构成的API JDBC是J2SE的一部分, 又java.sql: javax.sql包组成.   应用程序 ...

  2. ACM学习

    转:ACM大量习题题库   ACM大量习题题库 现在网上有许多题库,大多是可以在线评测,所以叫做Online Judge.除了USACO是为IOI准备外,其余几乎全部是大学的ACM竞赛题库.   US ...

  3. (转载)ACM训练计划,先过一遍基础再按此拼搏吧!!!!

    ACM大量习题题库 ACM大量习题题库 现在网上有许多题库,大多是可以在线评测,所以叫做Online Judge.除了USACO是为IOI准备外,其余几乎全部是大学的ACM竞赛题库. USACO ht ...

  4. jqu

    1 /*2 * 说明:3 * 本源代码的中文注释乃Auscarlin呕心沥血所作.旨在促进jQuery的传播以及向广大jQuery爱好者提供一个进阶4 *的途径,以让各位更加深入地了解jQuery,学 ...

  5. 另一个ACM之路建议

    ACM联系建议 一位高手对我的建议: 一般要做到50行以内的程序不用调试.100行以内的二分钟内调试成功.acm主要是考算法的 ,主要时间是花在思考算法上,不是花在写程序与debug上. 下面给个计划 ...

  6. 品Spring:真没想到,三十步才能完成一个bean实例的创建

    在容器启动快完成时,会把所有的单例bean进行实例化,也可以叫做预先实例化. 这样做的好处之一是,可以及早地发现问题,及早的抛出异常,及早地解决掉. 本文就来看下整个的实例化过程.其实还是比较繁琐的. ...

  7. JS 原生面经从入门到放弃 篇幅较长,建议收藏

    前言 是时候撸一波 JS 基础啦,撸熟了,银十速拿 offer; 本文不从传统的问答方式梳理,而是从知识维度梳理,以便形成知识网络; 包括函数,数组,对象,数据结构,算法,设计模式和 http. 函数 ...

  8. InfoQ一波文章:AdaSearch/JAX/TF_Serving/leon.bottou.org/Neural_ODE/NeurIPS_2018最佳论文

    和 Nested Partition 有相通之处? 伯克利提出 AdaSearch:一种用于自适应搜索的逐步消除方法 在机器学习领域的诸多任务当中,我们通常希望能够立足预先给定的固定数据集找出问题的答 ...

  9. Image Processing and Computer Vision_Review:Local Invariant Feature Detectors: A Survey——2007.11

    翻译 局部不变特征探测器:一项调查 摘要 -在本次调查中,我们概述了不变兴趣点探测器,它们如何随着时间的推移而发展,它们如何工作,以及它们各自的优点和缺点.我们首先定义理想局部特征检测器的属性.接下来 ...

  10. &lt;JavaScript&gt;如何阅读《JavaScript高级程序设计》(一)

    题外话 最近在看<JavaScript高级程序设计>这本书,面对着700多页的厚书籍,心里有点压力,所以我决定梳理一下..探究一下到底怎么读这本书.本书的内容好像只有到ES5...所以只能 ...

随机推荐

  1. FMDB 排它锁

    -------------------------------------基本操作------------------------------------- #import "ViewCon ...

  2. 每天一个Linux命令

    每天一个Linux命令(1):ls命令 每天一个Linux命令(2):cd命令 每天一个Linux命令(3):pwd命令 每天一个 Linux 命令(4):mkdir 每天一个 Linux 命令(5) ...

  3. Java反编译利器-Jad, Jode, Java Decompiler等及其IDE插件

    转自:http://blog.csdn.net/superbeck/article/details/5189231 对于长年使用Java的程序员,大部分应该都会或多或少的使用到反编译软件.毕竟,不可能 ...

  4. SSDB

    一个高性能的支持丰富数据结构的 NoSQL 数据库, 用于替代 Redis. 特性 替代 Redis 数据库, Redis 的 100 倍容量 LevelDB 网络支持, 使用 C/C++ 开发 Re ...

  5. 汉字编码:GB2312, GBK, GB18030, Big5

    前一篇博文:ANSI是什么编码?中有这样一段小故事: 话说计算机是由美国佬搞出来的嘛,他们觉得一个字节(可以表示256个编码)表示英语世界里所有的字母.数字和常用特殊符号已经绰绰有余了(其实ASCII ...

  6. linux下简单文本处理

    1. 根据第二列的数据来确定第一列的值 awk '{if(a!=$0)i++;print i,$0;a=$0}' arr >arr.out 2. 补齐长度 seq arr.out|awk '{p ...

  7. C++中,引用作为函数参数

    引用作为函数参数 C++之所以增加引用类型, 主要是把它作为函数参数,以扩充函数传递数据的功能. ———————————————————— c++,函数传参:(1)将变量名作为实参和形参.这时传给形参 ...

  8. 软工+C(6): 最近发展区/脚手架

    // 上一篇:工具和结构化 // 下一篇:野生程序员 教育心理学里面有提到"最近发展区"这个概念,这个概念是前苏联发展心理学家维果茨基(Vygotsky)提出的,英文名词是Zone ...

  9. history.go(-1)在不同浏览器中的解析

    今天遇到个问题: <a href="#" onclick="history.go(-1)">后退</a> 点击"后退" ...

  10. unittest单元测试框架之测试环境的初始化与还原(fixture)(五)

    1.方法一:针对每条测试用例进行初始化与还原 import unittest from UnittestDemo.mathfunc import * class TestMathFunc(unitte ...