'JavaScript 함수형 프로그래밍'_javascript 기술을 읽고 난 후의 생각-JS 튜토리얼-php.cn

'JavaScript 함수형 프로그래밍'_javascript 기술을 읽고 난 후의 생각

WBOY

풀어 주다： 2016-05-16 15:46:36

원래의

1071명이 탐색했습니다.

이 글은 제가 함수형 표현을 배우면서 이해한 내용 중 일부를 기록하여 기억력을 깊게 하고 나중에 복습할 수 있도록 정리하고 기록했습니다.

최근 예약판매 중인 '자바스크립트 함수형 프로그래밍' 책을 보고 결심했습니다. 주된 목적은 제가 아직 함수형 프로그래밍이 무엇인지 이해하지 못한다는 것입니다. 제가 학습하는 과정에서 주변 사람들이 프로세스 지향 프로그래밍과 객체 지향 프로그래밍에 대해 이야기하는 것을 항상 들어왔지만, 함수형 프로그래밍은 거의 없습니다. 다른 학생들에게 뒤처지지 않기 위해, 제가 읽으며 얻은 지식을 노트로 공유하고 기록하고 싶었습니다.

JS와 함수형 프로그래밍

이 책은 함수형 프로그래밍이 무엇인지 대답하기 위해 간단한 문장을 사용합니다.

함수형 프로그래밍은 함수를 사용하여 값을 추상 단위로 변환한 후 소프트웨어 시스템을 구축하는 데 사용됩니다.
이 문장을 읽고도 아직 함수형 프로그래밍이 무엇인지, 왜 함수형 프로그래밍을 사용해야 하는지 잘 모르는 학생들이 있을 것 같습니다. 다음 예제 중 다수에서는 밑줄을 사용합니다.

함수를 추상 단위로 사용

추상 메소드는 세부사항을 숨기는 기능을 의미합니다. 책에서 출력 연령 값을 감지하는 함수(주로 오류 및 경고에 대해 보고)를 예로 들어 보겠습니다.

function parseAge(age) {
  if (!_.isString(age))
    throw new Error("Expecting a string");
  var a;
  console.log("Attempting to parse an age");

  a = parseInt(age, 10);
  if (_.isNaN(a)) {
    console.log(["Could not parse age: "].join());
    a = 0;
  }

  return a;
}

로그인 후 복사

위 함수는 연령 입력 여부를 확인하는 함수로, 문자열 형식이어야 합니다. 다음 단계는 이 기능을 실행하는 것입니다:

parseAge("42"); //=> 42
parseAge(42); //=> Error:Expecting a string
parseAge("hhhh"); //=> 0

로그인 후 복사

위의 parsAge 함수는 문제 없이 잘 작동합니다. 출력 오류=정보 및 경고가 표시되는 방식을 변경하려면 해당 코드 줄과 출력 모드를 다른 곳에서 변경해야 합니다. 책에 제시된 방법은 이를 다양한 기능으로 추상화하여 달성됩니다.

function fail(thing) {
  throw new Error(thing);
}

function warn(thing) {
  console.log(["WARNING:", thing].join(''));
}

function note(thing) {
  console.log(["NOTE:", thing].join(''));
}

로그인 후 복사

그런 다음 위 함수를 사용하여 parsAge 함수를 재구성합니다.

funciton parseAge(age) {
  if (!_.isString(age))
    fail("Expecting a string");
  var a;

  note("Attempting to parse an age");
  a = parseInt(age, 10);

  if (_.isNaN(a)) {
    warn(["Could not parse age:", age].join(""));
    a = 0;
  }

  return a;
}

로그인 후 복사

오류를 보고하는 코드를 다른 함수에 넣어도 리팩토링된 parsAge는 이전 코드와 크게 달라지지 않았습니다. 하지만 차이점은 이제 오류, 메시지, 경고를 보고하는 아이디어가 추상화되었다는 것입니다. 오류, 메시지 및 경고 보고도 완전히 개선되었습니다.

이것이 하는 일은 동작이 단일 함수에 포함되어 있기 때문에 유사한 동작을 제공하는 새로운 함수로 함수를 대체하거나 완전히 다른 동작으로 직접 대체할 수 있다는 것입니다.

캡슐화 및 은폐

이 제목은 이해하기 쉽습니다. 예를 들면 다음과 같습니다. 우리는 글로벌 오염을 피하기 위해 iife를 자주 사용합니다. 이는 캡슐화와 은폐의 좋은 예입니다. iife를 사용하여 작성한 일부 변수와 메소드를 숨기는 목적은 글로벌 환경을 오염시키는 것이 아닙니다. 또한 클로저를 사용하여 데이터를 숨깁니다.

클로저도 함수이기 때문이죠. 그리고 그것은 지금 함수형 프로그래밍을 배우는 것과 많은 관련이 있습니다. 하지만 이전에 배운 객체지향 캡슐화를 잊지 마세요. 결국 둘 중 누가 더 낫다고 말할 수는 없습니다. 하지만 모두 마스터한다면 나쁘지는 않습니다. 오래된 속담처럼: 수요를 살펴보세요.

함수를 행동의 단위로 사용

데이터와 동작을 숨기는 것(일반적으로 빠른 수정이 불편함)은 함수를 추상 단위로 말하는 방법일 뿐입니다. 또 다른 접근 방식은 기본 동작을 오프라인 개별 장치에 저장하고 전송하는 간단한 방법을 제공하는 것입니다.

책에 나오는 작은 밤나무, js 구문을 사용하여 배열의 값을 색인화하는 내용:

var arr = ['a', 'b', 'c'];
arr[1] //=> b

로그인 후 복사

위 배열의 값을 인덱싱하는 것은 간단하지만 함수에 넣지 않고서는 이 동작을 얻고 필요에 따라 사용할 수 있는 방법이 없습니다. 배열의 값을 인덱싱하는 간단한 함수 nth를 작성하세요.

function nth(a, index) {
  return a[index];
}

로그인 후 복사

그런 다음 다음을 실행하세요.

n번째(arr, 1) //=> 작업은 성공했지만 빈 개체가 전달되면 오류가 보고됩니다. 따라서 nth 주위에 함수 추상화를 구현하려면 다음 명령문을 설계할 수 있습니다. nth는 인덱스 액세스를 허용하는 데이터 유형에 저장된 유효한 함수를 반환합니다. 이 진술의 핵심은 인덱스 데이터 유형의 개념입니다. 유형을 결정하는 데 함수가 필요할 수도 있습니다.

function isIndexed(data) {
  return _.isArray(data) || _.isString(data);
}

로그인 후 복사

그럼 계속해서 n번째 기능을 개선해 보세요. isIndexed 함수는 특정 데이터가 문자열인지 배열인지 결정하기 위한 추상화를 제공하는 추상화입니다.

function nth(a, index) {
  if (!_.isNumber(index)) 
    fail("Expected a number as the index");
  if (!isIndexed(a))
    fail("Not supported on non-indexed type");
  if ((index < 0) || (index > a.length - 1))
    fail("Index value is out of bounds");

  return a[index];
}

로그인 후 복사

인덱스에서 객체를 추출하여 n번째 함수 추상화를 구성하는 것과 같은 방식으로 두 번째 추상화를 구성할 수도 있습니다.

function second(a) {
  return nth(a, 1);
}

로그인 후 복사

函数second允许在一个不同但相关的情况下，正确的使用nth函数：

second(arr); //=> b
通过上面的栗子，就知道。我们可以把每一步都抽象成一个函数，把每一个参数都抽象出来。虽然这样写感觉定义了许多函数。不过这样更加容易理解每一项的功能和流程。

数据抽象

JavaScript 的对象原型模型是一个丰富且基础的数据方案。
因为js没有类的原因，就有了许多模拟类的方法，且在ES6上也出现了class关键字。尽管类有许多长处，但很多的时候js应用程序的数据需求币类中的简单的要多。

基于类的对象系统的一个有理的论据是实现用户界面的历史使用。
js中的对象和数组已经能够满足我们对数据的操作了，且Underscore也是重点也是如何处理数组和对象。

实施和使用的简易性是使用js的核心数据结构进行数据建模的目的。这并不是说面向对象或者基于类的方法就完全没有用。处理集合为中心的函数式方式更加适合处理与人有关的数据，而面向对象的方法最适合模拟人。

js函数式初试

在开始函数式编程前，需要先定义两个常用且有用的函数：

function existy(x) {
  return x != null
}

function truthy(x) {
  return (x !== false) && existy(x);
}

로그인 후 복사

existy函数旨在定义事物之前的存在。js中就有两个值可以表示不存在：null和undefined。
truthy函数用来判断一个对象是否应该认为是true的同义词。

我们可以在很多地方使用到这两个函数，其实函数式理念来自于它们的使用。有些同学可能已经熟悉了许多js实现中的map forEach等方法。且Underscroe也提供了许多类似的方法，这也许就是选择Underscroe来辅助学习函数式编程的原因。

简单说下就是：

一个对”存在“的抽象函数的定义。
一个建立在存在函数之上的，对”真“的抽象函数定义。
通过其他函数来使用上面的两个函数，以实现更多的行为。

加速

大概了解了函数式编程之后。你可能会想这函数式编程不是很慢吗？比如前面获取数组索引，有必要定义一个函数来专门获取吗？直接用arr[index]绝对比那些函数来的快。

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

// 最快
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 较慢
_.each(arr, function (val, index) {
  console.log(index);
});

로그인 후 복사

但是我们在写代码的时候可能不会考虑的那么深，也许使用函数的确比原生要慢一些。但是大多数情况下也不会去在乎那么点时间，且现在有强大的v8引擎，大部分情况下的他都能很高效的编译和执行我们的js代码。所以我们没有必要在还没有写出正确的代码前考虑运算速度。

如果是我来选择的话，可能会更加关注与代码的风格。那种写法写的舒服看的舒服就使用哪一种，当然也是要保证基本的运算速度下，以不至于慢的离谱。看的舒服的代码比跑的快的代码可能更加有成就感。

总结

看完了第一章也是可以小结一下js的函数式编程。下面引用书上的总结：

确定抽象，并为其构建函数。
利用已有的函数来构建更加复杂的抽象。
通过将现有的函数传给其他的函数来构建更加复杂的抽象。
单是构建抽象还是不够的，如果能够把强大的数据抽象结合来实现函数式编程效果会更加好。

后面的章节读后感会慢慢的分享给大家，敬请关注。