Array.map() 的函数式编程

Question

我最近一直在阅读有关 Functional Programming and Immutable Objects in Javascript. What is the functional programming way of using map 方法的内容？

假设我想将数组中的值加倍。我能做到：

var arr1 = [{a: 1}, {a: 2}, {a: 3}];
arr1.map(function(el){
    el.a = el.a*2;
    return el;
});

// arr1 => [{a: 2}, {a: 4}, {a: 6}]

但这似乎违反了函数式编程和不变性的规则，回调将直接修改数组的元素。以下是 'correct' 的方法吗？

var arr1 = [{a: 1}, {a: 2}, {a: 3}];
var arr2 = angular.copy(arr1);

var arr2 = angular.copy(arr1).map(function(el){
  el.a = el.a*2;
  return el;
});

arr1 = arr2;

// arr1 => [{a: 2}, {a: 4}, {a: 6}]

还是我想多了？ Fiddle 是 here.

Answer 1

您可以使用 pure function，它不会通过简单的 return 某些东西而不是将某些东西分配给数据元素来改变输入对象。

var arr1 = [{a: 1}, {a: 2}, {a: 3}],
    arr2 = arr1.map(function (el) {
        return  el.a * 2;
    });

console.log(arr2);
console.log(arr1);

Return 一个包含新对象的数组

var arr1 = [{a: 1}, {a: 2}, {a: 3}],
    arr2 = arr1.map(function (el) {
        return  { a: el.a * 2 };
    });

console.log(arr2);
console.log(arr1);

Answer 2

您将需要使用不改变其参数的纯函数。因此，如果您想要具有双倍值的对象，则必须创建新对象：

 var arr1 = [{a: 1}, {a: 2}, {a: 3}];
 console.log(arr1);
 var arr2 = arr1.map(function(el) {
    return {a: el.a*2};
 });
 console.log(arr2);

Answer 3

解构赋值会使这变得非常好。无论哪种方式，您都必须创建一个新对象，否则 arr1 中的对象将被修改。

let arr1 = [{a: 1}, {a: 2}, {a: 3}];
let arr2 = arr1.map(({a}) => ({a: a * 2}))

console.log(arr1); // [{a: 1}, {a: 2}, {a: 3}]
console.log(arr2); // [{a: 2}, {a: 4}, {a: 6}]

Array.map() 的函数式编程

Functional programming for Array.map()

javascript

functional-programming

immutability