关于翻译:2021年你需要的7个JS-Array方法

文本翻译至 2021 年您将须要的 7 种 JS 数组办法

JavaScript 为咱们提供了大量解决数组的不同办法。咱们将在短短几分钟内为您介绍 7 个基本知识，以进步您的 JS 开发技能

当咱们在数组上应用该 .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（）？

当您想要批改现有数组的内容并将后果存储为新变量时。

您简直猜不到该办法会做什么。

该 .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（）？

当您要从数组中删除不合乎特定条件 / 条件的我的项目时。

就当初而言，了解这一点可能有点艰难

简略地说，在数组的每个我的项目上执行函数后，在数组上调用 .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]

何时应用该办法

当您想要扭转数组的值将数组转换为单个值时。

这是一个经典的办法

该 .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（）？

当您只想遍历任何数组的每个我的项目而无需结构新数组时。

该 .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（）？

当须要获取通过显式定义的测试的数组的第一项时

兴许您曾经能够猜到此办法会做什么。

该 .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（）？

当您要确认数组的每个我的项目都通过显式定义的条件时。

该 .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 办法

关于翻译:2021年你需要的7个JS-Array方法

前言

注释

1.Array.map（）

2. Array.filter（）

3. Array.reduce（）

4. Array.forEach（）

5. Array.find（）

6. Array.every（）

7. Array.some（）

论断

对于