JavaScript で関数を定義する方法の概要

この記事では主にJavaScript関数の定義に関する情報を紹介しますので、必要な方は参考にしてください

JavaScriptでは、関数を定義する方法は次のとおりです:

function abs(x) {
 if (x >= 0) {
  return x;
 } else {
  return -x;
 }
}

上記のabsの定義() 関数は次のとおりです。

• 関数は、これが関数定義であることを示します。

• (x)

  関数のパラメータがリストされます。

• { ... } の間のコードは関数本体であり、複数のステートメントを含めることも、ステートメントを含めないこともできます。

• 関数本体内のステートメントが実行される場合、return が実行されると、関数が実行され、結果が返されることに注意してください。したがって、

  条件判断

  やループを通じて、非常に複雑なロジックを関数内に実装することができます。

return文がない場合、関数実行後に結果が返されますが、結果は不定となります。

JavaScript関数もオブジェクトであるため、上で定義したabs()関数は実際には関数オブジェクトであり、関数名absは関数を指す変数とみなすことができます。

それで、関数を定義する 2 番目の方法は次のとおりです:

var abs = function (x) {
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
};

このように、関数 (x) { ... } は関数名を持たない

匿名関数

です。ただし、この無名関数は変数 abs に代入されているため、変数 abs を介して関数を呼び出すことができます。

上記の 2 つの定義は完全に同等です。2 番目のメソッドでは、完全な構文に従って関数本体の最後に ; を追加して、代入ステートメントの終わりを示す必要があることに注意してください。

関数を呼び出す

関数を呼び出すときは、次の順序でパラメータを渡すだけです:

abs(10); // 返回10
abs(-9); // 返回9

JavaScriptでは呼び出しに影響を与えることなく任意の数のパラメータを渡すことができるため、渡されるパラメータは定義されたパラメータよりも大きいです。 関数内でこれらのパラメータは必要ありませんが、より多くのパラメータがあっても問題はありません:

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

定義されたパラメータよりも渡されるパラメータの数が少ない場合でも問題はありません:

abs(); // 返回NaN

このとき、abs(x)関数のパラメータxは未定義で受信され、NaNと評価されます。

未定義の受信を避けるために、パラメータを確認できます:

function abs(x) {
  if (typeof x !== 'number') {
    throw 'Not a number';
  }
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
}

arguments

JavaScript には自由なキーワード引数もあります。これは関数内でのみ機能し、常に渡される現在のすべてのパラメータを指します。関数の呼び出し元によって。 argument は Array に似ていますが、Array ではありません:

function foo(x) {
  alert(x); // 10
  for (var i=0; i<arguments.length; i++) {
    alert(arguments[i]); // 10, 20, 30
  }
}
foo(10, 20, 30);

引数を使用すると、呼び出し元によって渡されたすべてのパラメーターを取得できます。つまり、関数がパラメーターを定義していない場合でも、パラメーターの値を取得できます:

function abs() {
  if (arguments.length === 0) {
    return 0;
  }
  var x = arguments[0];
  return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9

実際、引数は、渡されるパラメーターの数を決定するために最も一般的に使用されます。次のような記述があるかもしれません:

// foo(a[, b], c)
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
function foo(a, b, c) {
  if (arguments.length === 2) {
    // 实际拿到的参数是a和b，c为undefined
    c = b; // 把b赋给c
    b = null; // b变为默认值
  }
  // ...
}

中央のパラメータ b を「オプション」パラメータに変更するには、引数によってのみ判断し、その後パラメータを再調整して値を割り当てることができます。

残りのパラメータ

JavaScript関数では任意の数のパラメータを受け取ることができるため、すべてのパラメータを取得するには引数を使用する必要があります:

function foo(a, b) {
  var i, rest = [];
  if (arguments.length > 2) {
    for (i = 2; i<arguments.length; i++) {
      rest.push(arguments[i]);
    }
  }
  console.log(&#39;a = &#39; + a);
  console.log(&#39;b = &#39; + b);
  console.log(rest);
}

定義されたパラメータaとb以外のパラメータを取得するには、引数を使用する必要があり、最初の 2 つのパラメーターを除外するには、ループをインデックス 2 から開始する必要があります。追加の残りパラメーターを取得するためだけに、これは非常に面倒です。

ES6 標準では、rest パラメータが導入されています。上記の関数は次のように書き換えることができます:

function foo(a, b, ...rest) {
  console.log('a = ' + a);
  console.log('b = ' + b);
  console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

rest パラメータは最後にのみ記述でき、先頭に... が付けられています。入力パラメータが最初にバインドされていることを確認します。 a と b を定義すると、追加のパラメータが配列の形式で変数 REST に与えられるため、引数なしですべてのパラメータを取得します。

渡されたパラメータに通常定義されたパラメータが入力されていなくても問題ありません。残りのパラメータは空の配列を受け取ります（未定義ではないことに注意してください）。

rest パラメータは新しい ES6 標準であるため、ブラウザがそれをサポートしているかどうかをテストする必要があります。残りのパラメーターを使用して sum() 関数を作成し、任意の数のパラメーターを受け取り、その合計を返してください:

フォームの先頭

'use strict';
// 测试:
var i, args = [];
for (i=1; i<=100; i++) {
  args.push(i);
}
if (sum() !== 0) {
  alert(&#39;测试失败: sum() = &#39; + sum());
} else if (sum(1) !== 1) {
  alert(&#39;测试失败: sum(1) = &#39; + sum(1));
} else if (sum(2, 3) !== 5) {
  alert(&#39;测试失败: sum(2, 3) = &#39; + sum(2, 3));
} else if (sum.apply(null, args) !== 5050) {
  alert(&#39;测试失败: sum(1, 2, 3, ..., 100) = &#39; + sum.apply(null, args));
} else {
  alert(&#39;测试通过!&#39;);
}

return ステートメントには注意してください

JavaScript について話しました行末に自動的にセミコロンを追加する仕組み。これにより、return ステートメントで大きな落とし穴に陥る可能性があります:

function foo() {
  return { name: 'foo' };
}
foo(); // { name: 'foo' }

return ステートメントを 2 行に分割した場合:

function foo() {
  return
    { name: 'foo' };
}
foo(); // undefined

注意してください。JavaScript エンジンが行末にセミコロンを自動的に追加します。上記のコードは実際には次のようになります。

function foo() {
  return; // 自动添加了分号，相当于return undefined;
    { name: 'foo' }; // 这行语句已经没法执行到了
}

したがって、複数行を記述する正しい方法は次のとおりです。

function foo() {
  return { // 这里不会自动加分号，因为{表示语句尚未结束
    name: 'foo'
  };

练习

定义一个计算圆面积的函数area_of_circle()，它有两个参数：

r: 表示圆的半径；

pi: 表示π的值，如果不传，则默认3.14

以上がJavaScript で関数を定義する方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。