前言
文本翻译至 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方法
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。