小试 ES6（二）：组合操作符的魔法
ECMAScript 6（以下简称 ES6）作为 JavaScript 的最新版本，在前端开发中有着越来越广泛的应用。在我们上一篇文章中，我们介绍了 ES6 中的箭头函数、解构赋值等新特性，今天我们来聊聊 ES6 引入的一些组合操作符的魔法，例如数组的 map()、reduce() 和 filter() 等，它们的出现不仅优化了代码的性能和可读性，还可以减少代码的行数和提高代码的可维护性。
一、map() 方法
map() 方法是一个在数组上的高阶函数，它接受一个函数作为参数，函数的返回值将替换原数组中的元素，并返回新的数组。map() 方法的语法如下：
arr.map(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 表示一个函数，currentValue 表示当前遍历到的元素，index 表示当前元素的下标，array 表示当前数组。thisArg 是可选参数，表示 callback 函数中 this 的值。
下面看一个例子：
let arr = [1, 2, 3, 4];
let arr2 = arr.map(function(item){
return item * 2;
});
console.log(arr2); // [2, 4, 6, 8]上述例子中，arr 数组中的每个元素都被传递到 map() 方法中的回调函数中去了，返回值为元素值乘以 2 的结果。
二、reduce() 方法
reduce() 方法和 map() 方法类似，也是一个高阶函数，它接受一个函数作为参数，将数组中的元素转换成一个值，并返回该值。reduce() 方法的语法如下：
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
其中，callback 表示一个函数，accumulator 表示累计器，currentValue 表示当前遍历到的元素，index 表示当前元素的下标，array 表示当前数组。initialValue 是可选参数，表示 accumulator 的初始值。
下面看一个例子：
let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(accumulator, currentValue){
return accumulator + currentValue;
});
console.log(sum); // 10上述例子中，reduce() 方法中的回调函数首先将 accumulator 的值设置为 1，然后依次对数组中的元素求和，最终得到的结果为 10。
三、filter() 方法
filter() 方法是数组的一个高阶函数。它接受一个函数作为参数，将传入的函数作用于数组中的每个元素，将返回值为 true 的元素过滤出来，返回新的数组。filter() 方法的语法如下：
array.filter(callback(element[, index[, array]])[, thisArg])
其中，callback 表示一个函数，element 表示数组中每个元素，index 表示当前元素的下标，array 表示当前数组。thisArg 是可选参数，表示 callback 函数中 this 的值。
下面看一个例子：
let arr = [1, 2, 3, 4];
let arr2 = arr.filter(function(item){
return item > 2;
});
console.log(arr2); // [3, 4]上述例子中，filter() 方法中的回调函数依次对数组中的元素进行判断，如果元素值大于 2，则将其保留，最终得到的结果为 [3, 4]。
总结
通过以上的例子，我们可以看到 ES6 的组合操作符可以极大地简化我们的代码，同时提高了代码的可读性和可维护性。当然，实际应用中，我们可以将这些操作符组合使用，从而实现更加复杂的逻辑。因此，学习掌握这些组合操作符也是我们在前端开发中必不可少的一部分。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538fdaf7d4982a6eb2308c4