ホームページ ウェブフロントエンド jsチュートリアル 『JavaScript関数型プログラミング』を読んでの感想_JavaScriptスキル

『JavaScript関数型プログラミング』を読んでの感想_JavaScriptスキル

May 16, 2016 pm 03:46 PM

この記事は、記憶を深め、後で復習できるように整理して記録するために、関数式の学習中に理解した事柄の一部を記録します。

私は最近予約販売された「JavaScript 関数型プログラミング」という本を見て決心しました。主な目的は、関数型プログラミングが何なのかまだ理解していないことです。私自身が学習する過程で、周りの人がプロセス指向プログラミングやオブジェクト指向プログラミングについて話しているのを常に聞いてきましたが、関数型プログラミングはほとんどありません。他の学生に遅れをとらないように、読書から得た知識をノートに書いて共有し、記録したいと思いました。

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
ログイン後にコピー

上記の parseAge 関数は問題なく正常に動作します。出力エラー=情報と警告の表示方法を変更したい場合は、対応するコード行と他の場所の出力モードを変更する必要があります。この本で説明されている方法は、それらをさまざまな関数に抽象化することで実現されます。

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

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

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

ログイン後にコピー

次に、上記の関数を使用して parseAge 関数を再構築します。

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;
}

ログイン後にコピー

エラーを報告するコードを別の関数に入れると、リファクタリングされた parseAge は以前のものからあまり変わりません。ただし、違いは、エラー、メッセージ、警告を報告するという概念が抽象化されていることです。エラー、メッセージ、警告のレポートも完全に刷新されました。

これは、動作が単一の関数に含まれているため、その関数を同様の動作を提供する新しい関数で置き換えたり、まったく異なる動作で直接置き換えたりすることができます。

カプセル化と隠蔽

このタイトルは分かりやすいので、例を示します。私たちは地球規模の汚染を避けるためによく iife を使用します。これはカプセル化と隠蔽の良い例です。 iife を使用して作成した変数やメソッドの一部を非表示にすることで、地球環境を汚染することが目的ではありません。これもクロージャを使用してデータを非表示にします。

クロージャーも関数だからです。そして、それは今関数型プログラミングを学ぶことと大きく関係しています。ただし、以前に学んだオブジェクト指向のカプセル化を忘れないでください。結局のところ、どちらが優れているとは言えません。しかし、それらをすべてマスターすれば、悪いことではありません。古いことわざにあるように、需要に注目してください。

動作の単位として関数を使用する

データと動作を非表示にすること (通常、簡単な変更には不便です) は、関数を抽象的な単位として説明する方法にすぎません。もう 1 つのアプローチは、基本的な動作を保存してオフラインの個別ユニットに転送する簡単な方法を提供することです。

本の中の小さな栗、js 構文を使用して配列内の値にインデックスを付ける:

var arr = ['a', 'b', 'c'];
arr[1] //=> b
ログイン後にコピー

上記の配列内の値にインデックスを付けるのは簡単ですが、関数に入れずにこの動作を取得し、必要に応じて使用する方法はありません。配列内の値にインデックスを付ける単純な関数 nth を作成します:

function nth(a, index) {
  return a[index];
}
ログイン後にコピー

次に、次を実行します:

nth(arr, 1) //=> b
操作は成功しますが、空のオブジェクトが渡されるとエラーが報告されます。したがって、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 番目の関数抽象化を構築するのと同じ方法で、2 番目の抽象化を構築することもできます。

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的函数式编程。下面引用书上的总结:

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptは学ぶのが難しいですか? JavaScriptは学ぶのが難しいですか? Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は?
または:
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は? または: Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

JavaScriptの進化:現在の傾向と将来の見通し JavaScriptの進化:現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

See all articles