在 ES6 中使用 Array 的新方法 filter() 和 map() 避免遇到的问题

在前端开发中，我们经常需要对数组进行处理，以满足我们的需求。在 ES6 中，我们可以使用 Array 的两个新方法 filter() 和 map()，它们可以帮助我们更加方便地处理数组，避免遇到一些问题。

filter() 方法

filter() 方法是 ES6 Array 中的新方法，它可以返回一个新的数组，该数组由满足条件的原数组元素组成。filter() 方法接受一个回调函数作为参数，这个回调函数会被调用数组中的每个元素，如果该元素满足条件，返回 true，否则返回 false。

下面是一个示例的代码，我们需要过滤出数组 arr 中大于 10 的元素：

let arr = [1, 2, 3, 4, 5, 10, 15, 20];

let filteredArr = arr.filter(item => item > 10);

console.log(filteredArr); // [15, 20]

这个代码中，我们使用了箭头函数作为回调函数，并将其传递给 filter() 方法。箭头函数中的 item 表示数组中的每个元素，如果 item 大于 10，那么这个元素就会加入新数组 filteredArr 中。

使用 filter() 方法可以避免我们使用 for 循环来遍历数组，这样可以使我们的代码更加简洁高效。

map() 方法

map() 方法也是 ES6 Array 中的新方法，它可以返回一个新的数组，该数组由原数组经过函数处理后的结果组成。map() 方法接受一个回调函数作为参数，这个回调函数会被调用数组中的每个元素，将其传入该函数进行处理，将处理后的结果形成新的数组返回。

下面是一个示例的代码，我们需要将数组 arr 中的元素全部加倍输出：

let arr = [1, 2, 3, 4, 5];

let doubledArr = arr.map(item => item * 2);

console.log(doubledArr); // [2, 4, 6, 8, 10]

这个代码中，我们使用了箭头函数作为回调函数，并将其传递给 map() 方法。箭头函数中的 item 表示数组中的每个元素，我们将 item 乘以 2，然后将处理后的结果加入新数组 doubledArr 中。

使用 map() 方法可以使我们的代码更加简洁高效，而且可以使我们的代码逻辑更加清晰。

总结

在 ES6 中，Array 的两个新方法 filter() 和 map() 可以帮助我们更加方便地处理数组，让我们的代码更加简洁高效。我们可以通过这篇文章来学习和了解这两个方法的用法和示例代码，在实际开发中多加练习，将会对我们的工作产生巨大的帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6595484aeb4cecbf2d978f82