2021年你需要的7个JS Array方法
Contents
前言
文本翻译至 2021年您将需要的7种JS数组方法
JavaScript 为我们提供了大量处理数组的不同方法。我们将在短短几分钟内为您介绍7个基本知识，以提高您的JS开发技能
正文
1.Array.map（）
当我们在数组上使用该 .map() 方法时，它都会在原数组基础尚返回一个新的修改版本。该 .map() 方法具有循环遍历您的数组并且修改的功能。
.map() 每当您要更新数组中的每一项并且需要返回新数组时，都可以使用该方法
假设我们有一个包含汽车品牌的数组：
const cars = ["Porsche", "Audi", "BMW", "Volkswagen"];当然，我们认为所有的汽车品牌都很酷，我们需要给每个品牌来加以表达，我们可以使用 .map() 方法。
const coolCars = cars.map（car =>`$ {car}是一个非常酷的汽车品牌！`）;
//结果：
[“保时捷是一个非常酷的汽车品牌！”，“奥迪是一个非常酷的汽车品牌！”，“宝马是一个非常酷的汽车品牌！”，“大众汽车是一个非常酷的汽车品牌！”]]
太棒了！该 .map() 方法创建了一个新数组并将描述文本添加到每个项目。
很高兴的事，我们还知道如果使用 .map() 方法处理包含对象的数组
让我们有一堆价格不含税的汽车，然后使用加上含税价格 .map()
const carsWithPrice = [
{brand: "保时捷", price: 100000},
{brand: "奥迪", price: 80000}
];
const carsWithPriceAndTax = cars.map(carObject => {
return {
// 返回原对象
...carObject,
// 返回新的含税的价格新值
priceWithTax: carObject.price * 1.2
}
});
// 结果:
[
{brand: "保时捷", price: 100000, priceWithTax: 120000},
{brand: "奥迪", price: 80000, priceWithTax: 96000}
];
总而言之，该.map() 方法是创建新数组，修改其内容并保持原始数组完整的一种极其通用的方法。
何时使用Array.map（）？
当您想要修改现有数组的内容并将结果存储为新变量时。
2. Array.filter（）
您几乎猜不到该方法会做什么。
该.filter()方法允许您根据特定条件获取数组中的项目。
就像该.map()方法一样，它将返回一个新数组，并保持原始数组不变。
例如，使用汽车示例，我们可以基于汽车的价格高于特定值来过滤数组。
在这里，我们有所有可用的汽车：
const cars = [
{brand: "保时捷", price: 100000},
{brand: "奥迪", price: 80000},
{brand: "丰田", price: 30000}
];现在，假设所有价值40,000或以上的汽车都非常昂贵。
我们可以使用该 .filter() 方法以两个不同的数组获取所有“便宜”和“昂贵”的汽车。
const expensiveCars = cars.filter(car => car.price >= 40000);
const cheapCars = cars.filter(car => car.price < 40000);
// 结果 - 昂贵的
[
{brand: "保时捷", price: 100000},
{brand: "奥迪", price: 80000}
];
// 结果 - 便宜的
[
{brand: "丰田", price: 30000}
];
检查数组的每个项目是否符合条件，如果通过测试，则将其返回到新数组中-太棒了！
何时使用
Array.filter（）？
当您要从数组中删除不符合特定条件/条件的项目时。
3. Array.reduce（）
就现在而言，理解这一点可能有点困难
简单地说，在数组的每个项目上执行函数后，在数组上调用 .reduce（）会将其减小为单个值。
该 .reduce() 方法将回调函数作为其第一个参数，并将可选的初始值作为其第二个参数。如果未提供初始值，则使用第一个数组值。回调函数提供了accumulator和 currentValue 参数，用于执行简单计算。
我知道这可能有点复杂，但是没关系。
下面用一个简单的事例来展示 .reduce() 方法的使用
假设我们要获取数组中所有数字的总和。
const numbers = [13, 65, 29, 81, 47];然后，我们可以使用 .reduce（）方法将所有这些值加在一起。
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// Result - Total:
235
使用该 .reduce() 方法的另一种用处是展平数组。已经有很多方法可以做到这一点，这就是其中一种。
const flattened = [[0, 1], [2, 3], [4, 5]].reduce(
( accumulator, currentValue ) => accumulator.concat(currentValue),
[]
)
// Result - Flattened:
[0, 1, 2, 3, 4, 5]
何时使用该方法
当您想要改变数组的值将数组转换为单个值时。
4. Array.forEach（）
这是一个经典的方法
该 .forEach() 方法非常类似于常规 for 循环。
它遍历一个数组并在每个项目上执行一个函数。 .forEach（） 的第一个参数是一个回调函数，其中包括循环的当前值和索引。
让我们看一个使用我们的汽车的例子：
const cars = [
{brand: "保时捷", price: 100000},
{brand: "奥迪", price: 80000},
{brand: "丰田", price: 30000}
];我们可以遍历所有内容，并 console.log 打印包含汽车品牌和价格的句子
cars.forEach(car => {
console.log(`The ${car.brand} will cost you ${car.price} before taxes`);
});
// Result:
"The Porsche will cost you 100000 before taxes"
"The Audi will cost you 80000 before taxes"
"The Toyota will cost you 30000 before taxes"
何时使用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);
// Result - Expensive Car:
{brand: "Porsche", price: 100000}
何时使用Array.find（）？
当需要获取通过显式定义的测试的数组的第一项时
6. Array.every（）
也许您已经可以猜到此方法会做什么。
该 .every()方法将检查数组中的每个元素是否通过提供的条件。
如果数组中的所有元素都符合条件，则该方法将返回 true。如果没有，它将返回 false。
例如，我们可以使用该方法检查过去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
何时使用Array.every（）？
当您要确认数组的每个项目都通过显式定义的条件时。
7. Array.some（）
该 .some() 方法与方法.every()类似，但是如果数组中的所有元素都通过测试，则返回 true，而不是如果数组中的至少一个元素通过测试，则返回 true 。
如果该 .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);
// Result - Older than 5 Years:
false
什么时候使用Array.some（）？
当需要获取通过显式定义的测试的数组的第一项时。
结论
JavaScript 给我们提供了很多处理数组的不同方法。使用这些方法，您将能够升级JS开发技能，并使您的代码库更具可维护性。
哎呀，也许您再也不需要碰for循环了。
希望您今天学到了新东西！
关于
本文首发于 2021年你需要的7个JS Array方法