JavaScript関数とは何ですか

青灯夜游
リリース: 2021-10-19 11:46:47
オリジナル
7986 人が閲覧しました

JavaScript では、関数は「関数」を指します。これは、(特定の関数を使用して) 特定のタスクを実行し、再利用できるコード ブロックのセットです。関数は自動的には実行されず、関数を通じて呼び出す必要があります。名前. 走ること。関数は変数、オブジェクト、配列に格納し、パラメータとして他の関数に渡すことができます。

JavaScript関数とは何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JS 関数 (関数) は、(特定の関数を使用して) 特定のタスクを実行するコード ブロックのセットであり、再利用できます。関数は自動的には実行されず、実行するには関数名を通じて呼び出す必要があります。

関数は変数、オブジェクト、配列に格納することもでき、関数をパラメーターとして他の関数に渡したり、他の関数から返すこともできます。

JavaScript では、組み込み関数の使用に加えて、独自の関数 (カスタム関数) を作成し、必要に応じてこの関数を呼び出すこともできます。これにより、コードの繰り返しの記述が回避されるだけでなく、コードにも利点が生じます。 .その後のメンテナンス。

JS 関数の定義

JS 関数の宣言は、function キーワードで始まり、その後に作成する関数の名前が続きます。関数を区切るにはスペースを使用してください。キーワードと関数名。関数名の後に角かっこ () があり、その角かっこは関数で使用されるパラメーターを定義するために使用されます (複数のパラメーターを区切るにはカンマを使用します)。関数には最大 255 個のパラメーターを含めることができます。最後に中括弧 { }、中括弧内の関数本体は、以下に示すように、関数本体 (つまり、関数を実装するコード) を定義するために使用されます。

function functionName(parameter_list) {
    // 函数中的代码
}
ログイン後にコピー

サンプル コードは次のとおりです。

function sayHello(name){
    document.write("Hello " + name);
}
ログイン後にコピー

上の例では、関数sayHelloが定義されています()。この関数はパラメータ名を受け取る必要があり、この関数を呼び出すとページに「Hello...」が出力されます。

JS による関数の呼び出し

関数を定義すると、現在のドキュメント内のどこからでもそれを呼び出すことができます。関数の呼び出しは非常に簡単で、alert()、write() のように関数名の後に括弧を追加するだけです。関数を定義するときに関数名の後のかっこ内にパラメータを指定した場合、関数を呼び出すときに対応するパラメータをかっこ内に指定する必要があることに注意してください。

サンプル コードは次のとおりです。

function sayHello(name){
    document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('PHP中文网');
ログイン後にコピー

ヒント: JavaScript では大文字と小文字が区別されるため、関数を定義するときは関数キーワードを小文字にし、関数を同じサイズで呼び出す必要があります。宣言時と同様に関数を呼び出すように記述します。

パラメータのデフォルト値

関数を定義するときに、関数のパラメータのデフォルト値を設定できるため、この関数を呼び出すときに、パラメーターが指定されていない場合は、次の例に示すように、このデフォルト値がパラメーター値として使用されます。

function sayHello(name = "World"){
    document.write("Hello " + name);
}
sayHello();                 // 输出:Hello World
sayHello('PHP中文网');     // 输出:Hello PHP中文网
ログイン後にコピー

JS 関数の戻り値

関数を使用する場合は、return ステートメントを使用して値 (関数の実行結果) を返すことができます。この値は、配列、オブジェクト、文字列など、任意の型にすることができます。値を返す関数の場合、変数を使用して関数の戻り値を受け取ることができます。サンプル コードは次のとおりです:

function getSum(num1, num2){
    return num1 + num2;
}
var sum1 = getSum(7, 12);      // 函数返回值为:19
var sum2 = getSum(-5, 33);     // 函数返回值为:28
ログイン後にコピー

ヒント: return ステートメントは通常、関数の最後に定義されます。関数が return ステートメントまで実行されると、実行は直ちに停止され、関数が呼び出された場所に戻って実行が続行されます。

また、関数の戻り値は 1 つだけです。複数の値を返したい場合は、次の例に示すように、値を配列に入れてその配列を返すことができます。 ##

function division(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient]
    return arr;
}
var res = division(100, 4)
document.write(res[0]);         // 输出:100
document.write(res[1]);         // 输出:4
document.write(res[2]);         // 输出:25
ログイン後にコピー

JS 関数式

関数式は変数の宣言に非常によく似ています。これは関数宣言の別の形式です。構文形式は次のとおりです:

var myfunction = function name(parameter_list){
    // 函数中的代码
};
ログイン後にコピー

パラメータ 説明は次のとおりです:

  • myfunction: 等号の後に関数を呼び出すために使用できる変数名;

  • name: 関数名、省略可能 (通常の状況ではこれも省略します)、省略した場合、関数は匿名関数になります;

  • parameter_list: パラメーターですリストにあるように、関数には最大 255 個のパラメータを含めることができます。

サンプル コードは次のとおりです。

// 函数声明
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
// 函数表达式
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
ログイン後にコピー

上の例の 2 つの関数は同等であり、その関数、戻り値、および呼び出しメソッドは同じです。

注: 関数宣言では、右中括弧の後にセミコロンを置く必要はありませんが、関数式を使用する場合は、式の最後にセミコロンを付ける必要があります。 。

関数宣言と関数式は非常によく似ていますが、次の例に示すように、動作は異なります。

declaration();          // 输出: function declaration
function declaration() {
    document.write("function declaration");
}
expression();           // 报错:Uncaught TypeError: undefined is not a function
var expression = function() {
    document.write("function expression");
};
ログイン後にコピー
上の例に示すように、関数式の場合関数が定義される前に呼び出された場合、例外 (エラー) がスローされますが、関数宣言は正常に実行できます。これは、JavaScript がプログラムの実行前に関数宣言を解析するため、関数宣言の前後で関数を呼び出すことが可能であるためです。関数式は変数に無名関数を割り当てるため、プログラムが式を実行する前は関数が定義されていないことと同等であり、呼び出すことができません。

[推奨学習:

JavaScript 上級チュートリアル]

以上がJavaScript関数とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート