機能

@serverSerrverlesskiy

プログラムアルゴリズムの多くの場所で同じコードを繰り返さないように、関数⚙️が必要です。最新のプログラムでは、関数が主要な「ブロック」です。.

Don’t repeat yourself

DRY (ロシア繰り返さないでください）は、さまざまな種類の情報の繰り返しを減らすことを目的としたソフトウェア開発の原則です。特に、抽象化レイヤーが多数あるシステムではそうです。関数はまさにこの設計原則に役立つデータのタイプです。.

関数名の選択

関数はアクションです！したがって、関数名は通常動詞です。コードを読むプログラマーが関数の機能を正しく理解できるように、シンプルで正確で、関数のアクションを説明する必要があります。

Choice

原則として、動詞の接頭辞が使用され、アクションの一般的な性質を示し、その後に説明が続きます。通常、開発チームには、これらのプレフィックスの意味に関する規則があります。

たとえば、関数⚙️で始まる "show" 通常何かを表示します。

関数⚙️で始まる..。

"get.."     – 値を返し、
"calc.."    – 何かを計算して、
"create.."  – 何かを作成し、
"check.."   – 何かをチェックしてブール値などを返します。

そのような名前の例：

showMessage(..)     // メッセージを表示します
getAge(..)          // 年齢を返します（ある値で）
calcSum(..)         // 合計を計算し、結果を返します
createForm(..)      // フォームを作成します（通常はそれを返します）
checkPermission(..) // true / falseを返すことによってアクセスをチェックします

プレフィックスのおかげで、関数の名前を一目見ただけで、そのコードが何をしているのか、そしてどのような値を返すことができるのかが明らかになります.

いずれにせよ、あなたとあなたのチームは、接頭辞が何を意味するのか、そして関数⚙️が接頭辞で何ができるのか、何ができないのかを正確に理解する必要があります。.

超短い関数名⚙️

頻繁に使用される関数名⚙️は、非常に短くなることがあります。

たとえば、フレームワークでは jQuery という名前の関数があります $. Lodashライブラリでは、メイン関数⚙️はアンダースコア名で表されます _

これらは例外です。基本的に、関数名は適度に短く、説明的である必要があります。 .

関数===コメント

cut

関数⚙️は短くする必要があり、1つのことだけを実行します。何か大きなものであれば、関数⚙️をいくつかの小さな関数に分割するのが理にかなっています。特にチームワークでは、このルールに従うことは間違いなく役に立ちます。

小さな関数⚙️は、テストとデバッグを容易にするだけでなく、そのような関数の存在そのもの⚙️は良いコメントとして役立ちます。

関数宣言

Announcement

関数⚙️を作成するには、関数宣言⚙️を使用します。

最初にキーワードが来る function, その後に関数の名前があり、括弧内のパラメーターのリストはコンマで区切られ（この例では空です）、最後に関数のコード⚙️（「関数の本体⚙️」とも呼ばれます）、中括弧の内側。

関数を書くこの古典的な方法は呼ばれます Function Declaration.

構文 :

function 名前(параметры) {
  ... тело ...  // アルゴリズム
  return итоговоеЗначение
}

注意 !

もし return 指定されていませんが、代わりに関数⚙️は⚙️を返します undefined デフォルトでは、関数は空のスタブで終了すると想定されています return, 内部スクリプトのみを実行する.

に JavaScript 従来の方法とは別に関数⚙️を作成する Function Declaration 次のものも使用できます。

Function Expression
Arrow Function(矢印関数)

Function Expression - これは、何らかの式（割り当てなど）の一部である関数⚙️の宣言です。

const 名前 = function (パラメーター) {
  // 指示
}

比較する Function Declaration и Function Expression:

// Function Declaration
function sum(num1, num2) {
  return num1 + num2
}

// Function Expression
const sum = function (num1, num2) {
  return num1 + num2
}

構文あり Arrow Function (矢印関数) この章の後半でお互いを知るようになります。これは、関数を記述するための単純化された最も一般的に使用される方法です。

関数呼び出し

関数⚙️を呼び出して実行するには、名前で参照してから2つの括弧を指定する必要があります myMessage():

// 関数宣言
function myMessage() {
  let str = 'Hello!'
}

myMessage() // 関数呼び出し

この例では、関数が呼び出されますが、値を返さないことに注意してください。

で機能する return

Return

関数が何かを返すために、キーワードがその本体に指定されています return (結果の終了点または戻り点）と戻り値。

Live Editor

function showNumberFive() {
  return 5
}

function showNumberFive() {
  return 5
}

Result

実験して、元の番号9️⃣をあなたの年数に置き換えてください.

Запомните!

関数を宣言してから呼び出すことにより、いずれの場合も、関数の本体でアルゴリズム（前述のアクション）の実行結果を取得します。.

別の関数内の関数

Matryoschka

関数内⚙️他の関数⚙️を配置できます。たとえば、関数⚙️ showNumberFive() 数字を返し、その値は関数呼び出し⚙️を介して出力されます learnJavaScript().

Live Editor

function learnJavaScript() {
  function showNumberFive() {
    return 5
  }
  return showNumberFive()
}

function learnJavaScript() {
  function showNumberFive() {
    return 5
  }
  return showNumberFive()
}

Result

このすべてを段階的に見ていきましょう。

キーワード function 次のコードがユーザー定義であること、つまり、組み込み関数ではなく、ユーザーが作成した関数であることをインタープリターに示します。
キャメルケースで書かれています showNumberFive この関数のカスタム名です。インタプリタにとって、一般に、この関数が何と呼ばれるかは正確には違いはありませんが、関数が何をするのかを明確に示す名前を付ける方がよいでしょう。
() 角かっこは、すべての関数の必須要素です。 1つ、2つ、またはそれ以上の変数が角かっこで囲まれている場合がありますこの場合、角かっこは何もありません.
中括弧内 {} 関数自体の本体を囲む必要があります-プログラムアルゴリズムの本質です。
関数自体の本体は通常、右側にインデントされています（Tabキーを使用）。これはプログラムの実行には必要ありませんが、コードの可読性を大幅に向上させるため、チームワークには必要です。
キーワード return つまり、この関数を呼び出すたびに、値がインタプリタに渡される、つまり「返される」ため、「関数の戻り値」と呼ばれます。

関数のパラメーターと引数

couple

もう1つの関数を宣言しましょう。ただし、括弧内に変数があります。関数に括弧内に変数も含まれている場合、それを仮パラメーターと呼びます（事前に定義されていないため、xの値がどうなるかはわかりません）。ほとんどの関数⚙️にはパラメーターがありますが、パラメーターがない関数⚙️に出くわすこともあります。

function addThree(x) {
  return x + 3
}

関数⚙️とそのパラメーターの宣言の後、特定の値（例：5）で「コードブロック」を呼び出す（実行する）ことができます。この割り当てを引数と呼びます。

addThree(5)

回答: 8

この例では、数値は関数の引数であり、関数⚙️に渡される特定の値です。関数⚙️が引数を受け取るとすぐに、その値を変数x（関数⚙️の仮パラメーター）に割り当てました。).

サンプルコード：

実験 :

Live Editor

function learnJavaScript() {
  function addThree(x) {
    return x + 3
  }

  return addThree(5)
}

function learnJavaScript() {
  function addThree(x) {
    return x + 3
  }

  return addThree(5)
}

Result

パラメータと引数の違い

Dedefencce

以下で構成されます。

引数 — これは、括弧内で呼び出すときに関数⚙️に「渡した」特定の値です。この値または値のセットは、この関数の正式なパラメーターに割り当てられます⚙️.

パラメータ — これは、関数宣言で指定され、関数呼び出し時に特定の値が割り当てられるのを待っている変数の名前です。パラメータに割り当てられた値は引数です。

多くのプログラマーはこれらの用語（引数とパラメーター）を同じ意味で使用しますが、私たちはその違いを理解しました。

例:

Mathematics

長方形の周囲の2つの辺で計算するための関数поを宣言してみましょう。そのパラメーターは2つの2️⃣数を値として期待します。複数のパラメーターがある場合は、コンマで区切る必要があることに注意してください。

Live Editor

function learnJavaScript() {
  function calcPrym(x, y) {
    return 2 * x + 2 * y
  }
  return calcPrym(7, 4)
}

function learnJavaScript() {
  function calcPrym(x, y) {
    return 2 * x + 2 * y
  }
  return calcPrym(7, 4)
}

Result

この関数⚙️を呼び出すときは、引数として2つの2️⃣番号を指定する必要があります-特定の長方形の辺の値（コンマで互いに区切られています）：

calcPrym(7, 8)

回答: 30

ああ、どうもありがとう、コンピューター ️！

他の値を関数⚙️に渡すことにより、他の長方形の周囲長もすぐに計算されます。

Еще раз!

関数の主な目的の1つ⚙️は、コードの重複を取り除くことですそして問題を解決するためにそれらを複数回呼び出す機能.

組み込み関数

Integration

console.log()

Secret

開発者のみがデバッグ情報をコンソールに出力（ログ）する方法（ユーザーはそれを見ることができません。ご存知のように、ほとんどの人はコンソール自体の存在にさえ気づいておらず、秘密についてさえも気づいていません。 "ログ」！）。

GoogleChromeブラウザのキーボードショートカットを押します🎹 Ctrl + Shift + I とタブで Console ダイヤル:

console.log('トップシークレット！開発者のみ!')

関数の名前⚙️が示すように、「ログ」（つまり、システム操作に関する情報）をコンソールに出力します。開発者は常にこの種の超能力を使用しています。たとえば、エラーメッセージが表示された場合、コンソールにこれが正確に表示されます。インタプリタは、必要なパラメータを読み取って修正できるように、システム操作に関する情報をコンソールに提供（「ログ」）しました。一言で言えば、とても便利なことです。あなたは1回か2回以上助けを求める必要があります2 console.log(), だからこの関数を覚えておいてください⚙️！

次のコマンドを1行ずつ入力します:

console.log('必要なメッセージを表示します')
console.log('いくつか入力してください ' + 'ストリング')
let myMessage = '引数として変数を使用することもできます!'
console.log(myMessage)

コンソールログで遊んでいる間に、別のトリックをお見せします。私たちの古き良き友人がそれを手伝ってくれます - バックスラッシュ!

彼の助けを借りて \n コードを分割できますコードを分割できます. 自分で試してください! 次のコマンドを 1 行ずつ入力します。:

console.log('任意のテキストを分割できます\n 多くのために\n 線.')
console.log('ここが最初です.\nしかし、2番目.\n3番目\n4番目\n5番目!')

このこと \n 実際、多くの有用な実用的なアプリケーションがあります。たとえば、エンコーディングで描画できます ASCII コンソールに負担します。コンソールでダイヤルインする:

console.log(" c___c\n /. .\\\n \\_T_/\n /' '\\\n(/ . \\)\n/';‑;'\\\n()/ \\()")

どうしてこうなったかは明らかだ?

全員 \n トランジションを新しい行に設定して、後続の文字が下に「降りる」ように見えるようにします。かわいいくまを描いて社会の発展に大きく貢献してきました！

Math.random()

Random

別の便利な組み込み関数⚙️: Math.random(). 注意, 以前のものとは異なり、この関数の名前は大文字で始まります 'M'. これには理由があり、大文字と小文字は JavaScript 内部コードによって異なる . すべての言語で , ロシア語、英語、または JavaScript, ルールには常にいくつかの例外があります。これもその一つです。あなたが遭遇する他のすべての変数と関数は、小文字で書くべきです。大文字と小文字が重要であることと、名前が Math.random() で始める math, その場合、機能付加しせん️が起動しません!

Live Editor

function learnJavaScript() {
  return Math.random()
}

function learnJavaScript() {
  return Math.random()
}

Result

毎回新しい番号！この関数は、0 から 1 の間のランダムな実数を返します。

方程式を近代化しましょう :

Live Editor

function learnJavaScript() {
  return Math.random() * 100
}

function learnJavaScript() {
  return Math.random() * 100
}

Result

突然 0 から 100 の範囲の乱数が必要になった場合、この関数は非常に便利です。

Math.floor()

Floor

この関数最もしせん️は、数値または数字を引数として取り、それらを切り捨てます。

Math.floor(10.7) // 10
Math.floor(4.8) // 4
Math.floor(14.19723) // 14

Live Editor

function learnJavaScript() {
  return Math.floor(10.7)
}

function learnJavaScript() {
  return Math.floor(10.7)
}

Result

Math.round()

rounding

Math.round(x) 逆も同様で、小数点以下の 10 分の 1 のない、最も近い整数に変換されます。

Math.round(10.7) // 11
Math.round(4.8) // 5
Math.round(14.19) // 14

Live Editor

function learnJavaScript() {
  return Math.round(10.7)
}

function learnJavaScript() {
  return Math.round(10.7)
}

Result

.toUpperCase() / .toLowerCase()

Words

В一部のメッセージに大文字の単語が多すぎることに気付いたことはありますか? さて、それは私たちが今学ぶことです。

組み込みのメソッドを使用して、任意の文字列を簡単に取得し、大文字の寒和菓子<0x96>️️️ 文字 (つまり、大文字/小文字) で区切られた新しいバージョンを返すことができます。 .toUpperCase() / .toLowerCase(). したがって、任意の文字列を小文字 (つまり、小文字) で返すことができます。

覚えておいてください `И, соответственно, можно вернуть любую строку в строчных буквах (то есть в нижнем регистре).

Помните, чтоしたがって、任意の文字列を小文字 (つまり、小文字) で返すことができます。

覚えておいてください`, この場合は一般それはこのように動作します的な文字列です。

, .toUpperCase() 大文字のほうれん草 :

Live Editor

function learnJavaScript() {
  return '私はピザが好きです!'.toUpperCase()
}

function learnJavaScript() {
  return '私はピザが好きです!'.toUpperCase()
}

Result

だが .toLowerCase() 小文字で:

Live Editor

function learnJavaScript() {
  return '聞いて、十分に理解してください.'.toLowerCase()
}

function learnJavaScript() {
  return '聞いて、十分に理解してください.'.toLowerCase()
}

Result

そして今、すべて一緒に！

Mix

さっき習った関数からちょっとしたカクテルを混ぜてみよう。

Live Editor

function learnJavaScript() {
  // randomNumber - 0から1までの乱数
  let randomNumber = Math.random()
  // 乱数に 100 を掛けて [0; 100] コンマを右に 2 桁シフトして
  let number100 = randomNumber * 100
  // 該当する Math.floor() 下側に丸める
  let task = '0 から 100 までの数値が選択されます。: '
  let numberBig = Math.floor(number100)
  // 結果の出力
  return task + numberBig
}

function learnJavaScript() {
  // randomNumber - 0から1までの乱数
  let randomNumber = Math.random()
  // 乱数に 100 を掛けて [0; 100] コンマを右に 2 桁シフトして
  let number100 = randomNumber * 100
  // 該当する Math.floor() 下側に丸める
  let task = '0 から 100 までの数値が選択されます。: '
  let numberBig = Math.floor(number100)
  // 結果の出力
  return task + numberBig
}

Result

うまくいけば、上記のどれもあなたにとって難しい作業ではなく、すべてを理解してくれることを願っています。そうでない場合は、時間をかけて各行とコメントを確認してください。

Arrow Function (アロー関数)

関数を作成するためのさらに単純で簡潔な構文があり、他の種類よりも優れていることがよくあります。

というわけで、古典的なバージョンの表記 <0xE2><0x9A><0xE2><0x9A><0x99>️ 関数:

Function Declaration:

function func1(arg1, arg2, ...argN) {
  return expression
}

Function Expression:

let func1 = function (arg1, arg2, ...argN) {
  return expression
}

このコード関数を作成します func1 引数付き arg1, .. argN と計算します expression - 右側のアルゴリズムの一連のアクションとその使用法、キーワードを介して計算結果を返す return.

アロー関数を適用してみましょう - Arrow functions:

let func1 = (arg1, arg2, ...argN) => expression

つまり、これはそのようなエントリの短いバージョンです。 .

どうやって !

=> нам заменила { return ... } 右側には、キーとなる野球紅紫風鍋️ という単語を書かないことを許可します。 function 左側から！

具体例を見てみましょう :

Live Editor

function learnJavaScript() {
  // 2つの数字を足す関数の元の形
  let calcSum1 = function (a, b) {
    return a + b
  }
  // アローフォーム（言葉なし `function` そして `return`)
  let calcSum2 = (a, b) => a + b

  return calcSum1(5, 2) + ' または ' + calcSum2(5, 2) // 7 または 7
}

function learnJavaScript() {
  // 2つの数字を足す関数の元の形
  let calcSum1 = function (a, b) {
    return a + b
  }
  // アローフォーム（言葉なし `function` そして `return`)
  let calcSum2 = (a, b) => a + b

  return calcSum1(5, 2) + ' または ' + calcSum2(5, 2) // 7 または 7
}

Result

どちらの選択肢も正しい! function 現代文ではほとんど使われていないので、「矢印関数セットシシュー」を使ってください。

1 つの引数のみ

only one

引数が 1 つしかない場合は、パラメーターを囲む括弧を省略して、表記をさらに短くすることができます。 let num2 = n => n * 2

Live Editor

function learnJavaScript() {
  // 2つの数字を足す関数の元の形:
  let num1 = function (n) {
    return n * 2
  }

  // 周りのブラケットを削除します n
  let num2 = (n) => n * 2 // prettier-ignore

  return num1(7) + ' или ' + num2(7) // 14
}

function learnJavaScript() {
  // 2つの数字を足す関数の元の形:
  let num1 = function (n) {
    return n * 2
  }

  // 周りのブラケットを削除します n
  let num2 = (n) => n * 2 // prettier-ignore

  return num1(7) + ' или ' + num2(7) // 14
}

Result

引数がない場合

引数がない場合は、二重を避けるために ==, 「空の括弧」で示されます` :

Live Editor

function learnJavaScript() {
  let messHello = () => 'Hello!'

  return messHello()
}

function learnJavaScript() {
  let messHello = () => 'Hello!'

  return messHello()
}

Result

「空の括弧」で示されます "アロー関数" 快適でとってもコンパクト！

自己実行関数(IIFE)

Start

Immediately Invoked Function Expression - これは JavaScript 定義された直後に実行される関数。 JavaScript 通常とアローに加えて、重要な役割を果たす匿名関数群シズ️も作成できます。 JavaScript.

匿名関数

Anonym

後なら function 名前があります - 関数には名前が付けられ、他のすべての場合は匿名です。多くの場合、匿名関数群しせん️は作成され、すぐに実行されます。もう 1 つの重要な違いは、名前付き関数が宣言されているのに対し、匿名関数は演算子を使用して作成されることです。 function.

コンソールに入力 Google Chrome 次のコード:

(function (num1, num2) {
  return num1 + num2
})(7, 4)

自己呼び出しは、関数の最後にある括弧によって作成されます。この括弧は、インタプリタにその関数の集合しす️をすぐに実行するように指示します。

結論

conclusion

アロー関数と通常の関数関数を理解することで、関数を変数オブジェクトに渡したり、コードをモジュール化してコードを再構築したりすることができます。この種の関数は、他の関数を作成して返すために使用することもできます。ここでは、次のシリーズで説明するクロージャーについてすでに説明しています。

問題?

Problem

に書き込みます Discord または電報チャット, また、私たちのニュース

質問と回答

question

宣言はどこに掲載されていますか？

.d.ts
.h
.js

宣言を設定するために使用されるコマンドはどれですか?

npm search -D @types/name
npm view -D @types/name
npm install -D @types/name

宣言を作成するには、どの構文を使用する必要がありますか?

declare 'libname' { ... }
module 'lib' { ... }
declare module 'libname' { ... }

関数はどのように宣言されますか?

function 名前 (コンマで区切られたパラメータ) { // 本体、関数コード }
procedure 名前 (パラメータ) { // 本体、関数コード }
let 名前 (パラメータ) {}

関数の結果の終了点または戻り点?

Esc
return
Hello

キーワード return 関数本体の内部:

義務的な
オプション
ちがう

機能が与えられる

function addThree(x) {
  return x + 3
}

addThree(20)

仮パラメータを定義します:

20
x
x + 3

機能が与えられる

function addThree(x) {
  return x + 3
}

addThree(20)

引数を定義します:

20
x
x + 3

組み込み関数はどこにありますか?

console.log()
myMessage()
return()

アロー関数はどの構文を使用しますか?

進む()
=>
go.矢印

アロー関数の使用は許可されますか?

コードを書くことはよりコンパクトで安全です
コードの構造を増やす
新しい変数の使用を許可する

自己実行機能は

定義した直後に実行される関数
内蔵機能 JavaScript
これは、一連のコマンドを実行する一般的な手順です。

このレッスンをどの程度学習したかを理解するために、モバイルアプリケーションこのトピックに関する私たちの学校。

Sumerian school

リンク:

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Dmitriy K.}

_{Dmitriy Vasilev}
💵

_Resoner2005
🐛 🎨 🖋

_Navernoss
🖋 🐛 🎨

Don’t repeat yourself​

関数名の選択​

関数===コメント​

関数宣言​

関数呼び出し​

で機能する return​

別の関数内の関数​

関数のパラメーターと引数​

サンプルコード：​

パラメータと引数の違い​

例:​

組み込み関数​

console.log()​

Math.random()​

Math.floor()​

Math.round()​

.toUpperCase() / .toLowerCase()​

そして今、すべて一緒に！​

Arrow Function (アロー関数)​

1 つの引数のみ​

引数がない場合​

自己実行関数(IIFE)​

匿名関数​

結論​

問題?​

質問と回答​

リンク:​

Contributors ✨​

Don’t repeat yourself

関数名の選択

関数===コメント

関数宣言

関数呼び出し

で機能する return

別の関数内の関数

関数のパラメーターと引数

サンプルコード：

パラメータと引数の違い

例:

組み込み関数

console.log()

Math.random()

Math.floor()

Math.round()

.toUpperCase() / .toLowerCase()

そして今、すべて一緒に！

Arrow Function (アロー関数)

1 つの引数のみ

引数がない場合

自己実行関数(IIFE)

匿名関数

結論

問題?

質問と回答

リンク:

Contributors ✨