共计 4009 个字符，预计需要花费 11 分钟才能阅读完成。
前言
文本翻译至 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 办法
