javascript 함수형 프로그래밍 프로그래머의 toolset_javascript 기술

지금까지 나온 샘플 코드를 잘 살펴보면, 여기에 나온 메소드 중 일부가 익숙하지 않은 것을 발견할 수 있습니다. map(), filter(), Reduce() 함수는 모든 언어의 함수형 프로그래밍에 중요한 함수입니다. 루프와 명령문을 사용하지 않고도 더 깔끔한 코드를 작성할 수 있습니다.

map(), filter() 및 Reduce() 함수는 함수형 프로그래머 도구 세트의 핵심 부분을 구성합니다. 이 도구 세트에는 함수형 접근 방식의 중심이 되는 일련의 순수 고차 함수가 포함되어 있습니다. 실제로 이는 순수 함수와 고차 함수의 전형적인 형태입니다. 함수를 입력으로 사용하고 출력 결과를 반환하며 부작용이 발생하지 않습니다.

그러나 이는 브라우저의 ECMAScript 5.1 구현 표준이며 배열에서만 작동합니다. 호출될 때마다 새 배열이 생성되어 반환되지만 기존 배열은 변경되지 않습니다. 함수를 입력으로 사용하며 종종 익명 함수를 콜백 함수로 사용합니다. 배열을 반복하고 배열의 각 요소에 함수를 적용합니다!

myArray = [1,2,3,4];
newArray = myArray.map(function(x) {return x*2});
console.log(myArray); // Output: [1,2,3,4]
console.log(newArray); // Output: [2,4,6,8]

또 다른 점은 배열에서만 작동하고 객체와 같은 다른 반복 가능한 데이터 구조에서는 작동할 수 없다는 것입니다. 걱정하지 마십시오. Underscore.js, Lazy.js, stream.js 등과 같이 더욱 강력한 map(), filter() 및 Reduce()를 구현하는 라이브러리가 많이 있습니다.

콜백

이전에 콜백을 사용해 본 적이 없다면 개념이 다소 혼란스러울 수 있습니다. 특히 Javascript에서 Javascript는 함수를 선언하는 여러 가지 방법을 제공합니다.

콜백 함수는 사용하기 위해 다른 함수에 전달하는 데 사용됩니다. 이는 객체 전달과 같은 논리를 전달하는 방법입니다.

var myArray = [1,2,3];
function myCallback(x){return x+1};
console.log(myArray.map(myCallback));

더 간단한 작업을 위해 익명 기능을 사용할 수 있습니다.

console.log(myArray.map(function(x){return x+1}));

콜백은 함수형 프로그래밍에만 사용되는 것이 아니라 Javascript에서 많은 작업을 수행할 수 있습니다. 예를 들어, jQuery의 AJAX 호출에 대한 callback() 함수는 다음과 같습니다.

function myCallback(xhr) {
 console.log(xhr.status);
 return true;
}
$.ajax(myURI).done(myCallback);

함수를 호출하는 것이 아니라 함수를 전달하는 것이므로 여기서는 함수 이름만 사용합니다.

$.ajax(myURI).fail(myCallback(xhr)); 
// 或者
$.ajax(myURI).fail(myCallback());

함수를 호출하면 어떻게 되나요? 이 예에서 myCallback(xhr)은 실행을 시도하고 콘솔은 "정의되지 않음"을 인쇄하며 true를 반환합니다. ajax()가 호출을 완료하면 이름을 기반으로 찾은 콜백 함수가 "true"가 되고 오류가 보고됩니다.

즉, 콜백 함수에 전달할 매개변수를 지정할 수 없습니다. 콜백 함수에 원하는 매개변수를 전달하기 위해 ajax() 함수가 필요한 경우 반환 함수를 익명 함수로 래핑할 수 있습니다. 🎜>

function myCallback(status) {
 console.log(status);
 return true;
}
$.ajax(myURI).done(function(xhr) {
 myCallback(xhr.status)
});

Array.prototype.map()

map()은 이러한 함수의 선두주자로서 단순히 배열의 요소에 콜백 함수를 적용합니다.

구문: arr.map(콜백 [, thisArg]);

매개변수:

•callback(): 이 함수는 새 배열에 대한 요소를 생성합니다. 수신되는 매개변수: ◦ currentValue: 배열에서 현재 순회하는 요소
◦ index: 배열의 현재 요소 번호
◦ 배열: 현재 처리 중인 배열

•thisArg: 콜백 실행 시 콜백 함수의 this

역할을 하는 선택적 매개변수입니다.

예:

var
 integers = [1, -0, 9, -8, 3],
 numbers = [1, 2, 3, 4],
 str = 'hello world how ya doing?';
 
// 将整数映射为他们自己的绝对值
console.log(integers.map(Math.abs));

// 将数组中的元素与自己的位置序数相乘
console.log(numbers.map(function(x, i) {
 return x * i
}));
// 单词隔一个变一个大写
console.log(str.split(' ').map(function(s, i) {
 if (i % 2 == 0)
  return s.toUpperCase();
 else
  return s;
}));

Array.prototype.map 메소드는 Javascript의 배열 객체에 대한 표준 메소드이지만 자신의 객체를 쉽게 확장할 수 있습니다.

MyObject.prototype.map = function(f) {
  return new MyObject(f(this.value));
 }; 

Array.prototype.filter()

filter() 함수는 배열의 일부 요소를 필터링하는 데 사용됩니다. 콜백 함수는 true(새 배열에 유지) 또는 false(버리기)를 반환해야 합니다. map()을 사용하면 버리고 싶은 요소에 대해 null을 null로 반환하는 것과 유사한 작업을 수행할 수 있습니다. 그러나 filter() 함수는 null을 차지하도록 두는 대신 새 배열에서 이러한 불필요한 요소를 삭제합니다. 위치.

구문: arr.filter(콜백 [, thisArg]);

•callback(): 이 함수는 배열의 각 요소를 테스트하는 데 사용됩니다. true를 반환해야 하며, 그렇지 않으면 false를 반환합니다. 여기에는 다음과 같은 매개변수가 있습니다. ◦ currentValue: 배열

에서 현재 탐색되는 요소 ◦ index: 배열에 있는 현재 요소의 서수
◦ 배열: 현재 처리 중인 배열

•thisArg: 콜백 실행 시 콜백 함수의 this

역할을 하는 선택적 매개변수입니다.

예:

var myarray = [1, 2, 3, 4]
words = 'hello 123 world how 345 ya doing'.split(' ');
re = '[a-zA-Z]';
// 筛选整数
console.log([-2, -1, 0, 1, 2].filter(function(x) {
 return x > 0
}));
// 筛选所有含字母的单词
console.log(words.filter(function(s) {
 return s.match(re);
}));
// 随机移除数组中的元素
console.log(myarray.filter(function() {
 return Math.floor(Math.random() * 2)
}));

Array.prototype.reduce()

reduce()函数，有时也称为fold，它用于把数组中的所有值聚集到一起。回调需要返回组合对象的逻辑。 对于数字来说，它们往往会被加到一起或者乘到一起。对于字符串来说，它们往往是被追加到一起。

语法：arr.reduce(callback [, initialValue]);

参数
•callback()：此函数把两个对象合并成一个对象，并将其返回。参数有： ◦previousValue：上一次回调函数被调用时返回的值，或者是初始值（如果有的话）
◦currentValue：数组当前正在处理的元素
◦index：数组中当前元素的序数
◦array：当前正在处理的数组

•initialValue：可选。第一次回调所传入参数的初始值

例子

var numbers = [1, 2, 3, 4];

// 把数组中所有的值加起来
console.log([1, 2, 3, 4, 5].reduce(function(x, y) {
 return x + y
}, 0));

// 查找数组中最大的值
console.log(numbers.reduce(function(a, b) {
  return Math.max(a, b) // max()函数只能有两个参数
 }) 
);

其它函数

map()、filter()和reduce()函数在我们辅助函数的工具箱里并不孤单。这里还有更多的函数几乎在所有函数式应用里都会被使用。

Array.prototype.forEach

forEach()函数本质上是map()函数的非纯版本，它会遍历整个数组，并对每个元素应用回调。 然而这些回调函数不返回值。它是实现for循环的一个更纯粹的方式。

语法：arr.forEach(callback [, thisArg]);

参数：
•callback()：对数组中每一个元素所应用的。参数有： ◦currentValue：数组中当前正在处理的元素
◦index：数组中当前元素的序数
◦array：正在处理的数组

•thisArg：可选。回调函数中作为this的值

例子：

var arr = [1, 2, 3];
var nodes = arr.map(function(x) {
 var elem = document.createElement("div");
 elem.textContent = x;
 return elem;
});

// 对每一个元素的值输出日志
arr.forEach(function(x) {
 console.log(x)
});

// 把节点追加到DOM上
nodes.forEach(function(x) {
 document.body.appendChild(x)
});

Array.prototype.concat

如果不用for或while处理数组，你会经常需要把数组拼接起来。另一个Javascript内建函数concat就是专门干这事儿的。 concat函数会返回一个新数组但不改变旧数组。它可以把你传入的所有参数拼接到一起。
console.log([1, 2, 3].concat(['a','b','c']) // 拼接两个数组
// Output: [1, 2, 3, 'a','b','c']

它返回两个数组拼接成的数组，同时原来的那些数组没有被改变。这就意味着concat函数可以链式调用。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var x = arr1.concat(arr2, arr3);
var y = arr1.concat(arr2).concat(arr3));
var z = arr1.concat(arr2.concat(arr3)));
console.log(x);
console.log(y);
console.log(z);

变量x、y、z的值最后都是[1,2,3,4,5,6,7,8,9]。

Array.prototype.reverse

这个Javascript内建函数是用于数组变形的。reverse函数用于将一个数组反转，也就是第个一元素会跑到最后， 而最后一个元素变成了第一个元素。

然而，这个函数并不会返回一个新的数组，而是把原来的数组替换掉了。我们可以做个更好的。下面是一个纯的反转数组函数

var invert = function(arr) {
 return arr.map(function(x, i, a) {
  return a[a.length - (i + 1)];
 });
};
var q = invert([1, 2, 3, 4]);
console.log(q);

Array.prototype.sort

与map()、filter()和reduce()函数相似，排序函数sort()需要传入一个回调函数来定义数组如何排序。 但是，跟reverse()一样，它也会把原来的数组替换。这可不太好。
arr = [200, 12, 56, 7, 344];
console.log(arr.sort(function(a,b){return a–b}) );
// arr现在是: [7, 12, 56, 200, 344];

我们可以写一个纯函数的sort()，但是排序算法的源代码很麻烦。对于特别大的数组，应当根据特定的数据结构来选用适合的算法， 比如快速排序、合并排序、冒泡排序等等。

Array.prototype.every 和 Array.prototype.some

Array.prototype.every() 和 Array.prototype.some() 都是纯的高阶函数，它们是Array对象的方法， 通过回调函数根据数组各元素返回的布尔值（或相当于布尔的值）来进行测试。如果数组中所有的元素通过回调函数计算都返回True， every()函数就返回true；如果数组中有一个元素返回True，some()函数就返回True。

例子：

function isNumber(n) {
 return !isNaN(parseFloat(n)) && isFinite(n);
}
console.log([1, 2, 3, 4].every(isNumber)); // Return: true
console.log([1, 2, 'a'].every(isNumber)); // Return: false
console.log([1, 2, 'a'].some(isNumber)); // Return: true