ジャバスクリプト基礎

このチュートリアルのソースコードをダウンロードできます.
Download the Source Code

関数の定義
この記事では、JavaScriptで独自のカスタム関数を定義することに注目します.
関数は値に包まれたコードの一部として見ることができます.この記事では、JavaScriptの機能を定義できる3つの方法についてお話します.
最初のメソッドは、関数を値として定義し、その値を名前にバインドします(前の記事で定義された変数のように).

let square = function(x) {
  return x*x;
};

この関数は、キーワードfunction , そして、それは入力としてパラメータのセットを取りますx .
関数は、キーワードを使用して出力を返す本体も必要ですreturn , または副作用のいくつかの種類があります.
最後に、値としての関数をsquare , この関数の実行/呼び出しに使用する必要があります.
また、semicolon ()最後に必要なのは、完全な文であり、ここでの値が関数である点を除けば、バインドを宣言する場合です.

console.log(square(10));
// -> 100

関数は1つ以上のパラメータを持つことができます.

const sleep = function() {
  console.log("zzzzzzzzzzzzzzzzzzzzzz");
};

var multiply3 = function(x, y, z) {
  return x * y * z;
};

ご覧の通り、関数は副作用だけで何も返さない可能性があります.
第2の方法は、わずかに短いですfunction キーワード、最後にセミコロンを必要としません.

function square(x) {
  return x * x;
}

このメソッドは、次のようにします.

sleep();
multiply3(2,3,4);

function sleep() {
  console.log("zzzzzzzzzzzzzzzzzzzzzz");
}

function multiply3(x, y, z) {
  return x * y * z;
}

ここでは、それらを呼び出す文の後に関数宣言を行います.今、我々はすべての機能を1つの場所に置くことができます.
最後に、矢印関数について話しましょう.キーワードの代わりにfunction , 関数を宣言するために矢印(=>)を使うことができます.

const square = (x) => {
  return x * x;
}

これはまったく同じだsquare() 我々が前に見た機能、そして、それは全く同じ働きます.ではJavaScriptはなぜ両方の矢印関数とfunction キーワード?場合によっては、短い機能を書くことができます.
関数が1つのパラメータを持つ場合、パラメーターリストの周りに括弧を省略できます.そして、関数本体に1つの文だけがあれば、巻き括弧とreturn キーワードも省略できます.
では、square() 関数は以下となります.

const square = x => x * x;

結合とスコープ
関数のトピックに深く入る前に、最初のメソッドに戻りましょう.あなたは、私たちが異なるキーワードを使用している例で機能を定義するのに気がついたかもしれません.let , const and var . どのような正確な違いは何ですか?
まず、スコープの概念を理解する必要があります.これは、バインディングがアクセス可能なプログラムの一部です.結合がどんな機能またはブロックの外ででも定義されるならばif ステートメントfor or while ループを設定します.これはグローバル結合と呼ばれます.
バインドを使用して関数またはブロック内で宣言された場合let or const , そのバインディングは、関数/ブロック内からのみアクセス可能です.ただし、キーワードを使用してvar , それから、そのバインディングも機能/ブロックの外からアクセスできます.

let x = 10;

if (true) {
  let y = 20;
  var z = 30;
  console.log(x + y + z); // -> all three variables are accessible here
  // -> 60
}

console.log(x + z); // -> you cannot "see" y from here, but z is still accessible

今、違いは何ですかlet and const ? 名前が示す通りconst 定数を意味します.バインディングが宣言されたらconst , 値を変更できませんlet ).


任意引数
JavaScriptは、関数に渡すパラメータの数になると非常に広範囲です.例えば、我々はsquare() 前に定義した関数.

function square(x) { return x * x; }
console.log(square(4, true, "qwerty"));

この例ではsquare() つ以上の引数を関数とし、単純に余分な引数を無視し、最初の1つの四角形を計算します.
また、引数が多すぎた場合、それらのパラメータが失われますundefined 代わりにエラーを与える.
もちろん、あなたが誤って間違いを犯すとき、誰もあなたにそれを話しません.したがって、技術的にも、あなたはそれに依存しないでください、それはあなたにいくつかの予期せぬ結果を与える可能性があります.代わりに、必要なパラメータの数や、関数への引数の数に注意してください.

パラメータ
しかし、どのように多くのパラメータを必要としない場合はどうですか?たとえば、一連の数で最大数を見つける関数をデザインしていますが、一連の数がどれだけあるかわからないので、引数の数を取る関数をデザインする必要があります.
このような関数を書くには、関数の最後のパラメータの前に3つのドットを置く必要があります.

function max(...numbers) {
  let result = -Infinity;
  for (let number of numbers) {
    if (number > result) {
      result = number;
    }
  }
  return result;
}

max(1, 2, 3, 4, 5, 6, 7);

さて、パラメータnumbers ( RESTパラメータと呼ばれます)配列にバインドされ、その配列の最大数を返します.
配列はアイテムのリストです、この場合、我々は持ちます[ 1, 2, 3, 4, 5, 6, 7 ] , and for (let number of numbers) この配列のすべての項目を反復処理する方法です.次の記事の配列を議論します.

再帰
最後に再帰の概念について話しましょう.再帰は関数が呼び出すときです.最も典型的な例は、我々が数のパワーを計算する方法です.

function power(base, exponent) {
  if (exponent == 0) {
    return 1;
  } else {
    return base * power(base, exponent - 1);
  }
}

5行目では、関数の値はパラメータbase and exponent - 1 .
私は、これが少し混乱しているが、心配しないでください、このコードを理解するために、いくつかの数字を差し込みましょう.計算しましょう10^5 (10は5のパワー).

最初のステップでは、単に数字をプラグインし、関数を返します10 * power(10, 4) . 次に計算する必要がありますpower(10, 4) . 数に接続し、我々は得る10 * power(10, 3) , はpower(10, 5) 等しい10 * 10 * power(10, 3) .
そして、我々が得るまで、同じステップを繰り返し続けます10 * 10 * 10 * 10 * 10 * power(10, 0) . だってpower(10, 0) リターン1 , 最終的に我々は得るpower(10, 5) 等しい10 * 10 * 10 * 10 * 10 .
これは、指数関数を定義する非常にエレガントな方法ですが、残念ながら、このメソッドはJavaScriptのループを使用するよりも約3倍遅いです.これはプログラマーが常に直面しているジレンマです.私たちはシンプルさとスピードのどちらかを選択する必要があります.なぜなら、ほとんどすべてのプログラムがより速くすることによって、高速化できるからです.プログラマが適切なバランスを決めるのは次第だ.