記事ディレクトリ

働き

働き

プログラミング中、多くの場所で同じコードを使用する必要があります。たとえば、ユーザー登録、ログイン、ログアウト、およびログアウトのコードスニペットは、多くの場合、異なるWebページに存在します。

これらの関数を使用するたびにコードを書き直すのは扱いにくいので、関数を使用できます。

関数は、コードの一部をコードブロックにカプセル化し、このコードに名前（関数名）を付けることができます。このコードを使用する必要がある場合は、関数名を指定するだけで済みます。

関数を作成すると、コードを繰り返さずに何度でも呼び出すことができます。

alert()実際、これまでのすべてのレッスンでprompt()、、confirm()などの関数を使用してきました。
これらの関数はJavaScript、組み込み関数を使用するためのものであり、独自の関数を作成することもできます。

多くの場合、関数を「メソッド」と呼びます。関数とメソッドは同じ意味で使用されることが多く、基本的に2つの間に違いはありません。

関数定義

関数定義では、新しいキーワードを使用する必要がありfunctionます。関数定義の構文規則は次のとおりです。

function funcName(para1,para2,para3,...){
    
    
	//函数体
}

functionキーワードはJavaScript、このコードの意味が関数を作成することであり、関数の名前がでありfuncName、括弧がパラメーターリストで{}あり、コンテンツが関数本体であることをエンジンに通知します。

例えば：

//函数定义的时候不执行
function pow(a,b){
    
    
	let temp = a;
	while(--b){
    
    
		a *= temp;
	}
	console.log(a);
}

上記のコードは、計算する $a^b$ powと呼ばれる関数を作成します $a^{b}$ 。行数は、定義されている場合は実行されず、呼び出された場合にのみ実行されます。

たとえば、 $2^3を計算します$ 関数を定義した後、以下に示すようにpow、実装を簡単に使用できpow(2,3)

注意：ここでのべき関数の計算方法はpow完全ではありません。たとえば、b = -1の場合、無限ループになります。

さらに指数計算が必要な場合は、次のようにpow関数を繰り返し呼び出すことができます。

//函数定义
function pow(a,b){
    
    
	let temp = a;
	while(--b){
    
    
		a *= temp;
	}
	console.log(a);
}
//函数调用
pow(2,3)//2的3次方
pow(3,4)//3的4次方
pow(4,5)//4的5次方

実行結果は以下のとおりです。

この例は、関数の主な用途の1つである、コードの重複を回避することを明確に示しています。

ローカル変数

ローカル変数は関数内で定義された変数{}であり、これらの変数は関数内でのみ使用できます。

たとえば、前のレッスンforのステートメント内の変数i

例えば：

function doSomething(a,b){
    
    
	let val = prompt('请输入点什么',0);
	console.log(val);
}
doSomething();
alert(val);//ERROR，这里不能使用val

実行結果は以下のとおりです。

変数valは関数内で定義されているため、関数内でのみ使用でき、関数内で定義された変数を外で使用することはできません。

外部変数

関数の外部は関数本体の内部で定義された変数にアクセスできませんが、関数本体の内部は関数本体の外部で定義された外部変数にアクセスできます。

栗を取る：

let val = prompt("请输入点什么",9);
function doSomething(){
    
    
	console.log(val);//使用函数体外的变量没有问题
}
doSomething();

コードの実行結果は次のとおりです。

ユーザーが入力したとき、彼は9を入力しました

内部変数名と外部変数名

内部変数と外部変数の名前が同じ場合は、内部変数が優先されます。

栗を取る：

let num = 1;
function doSomething(){
    
    
	let num = 2;
	console.log(num);//这里使用的是内部变量
}
doSomething();

コード実行結果：

変数がすべての関数の外部で宣言されている場合、この変数はグローバル変数です
。プログラムで宣言されているグローバル変数が多すぎると、プログラムの最適な実行につながりません。

パラメータ

関数本体は完全に自律的ではありません。多くの場合、関数本体コードの実行を開始するには特定の入力が必要です。この入力はパラメーターです。

例えば：

function bless(name,senc){
    
    
	console.log(`祝${
      
      name}${
      
      senc}`)
}

コード実行結果：

上記の例ではbless、行数の2つのパラメーター、つまり名前nameと祝福の単語を渡して、他の人とsenc同じように任意の単語を祝福できるようにします。

関数本体内の変数を変更すると、それに応じて外部変数も変更されますか？

例えば：

let a = 1;
let b = 2;
function exchange(a,b){
    
    
	let temp = a;
	a = b;
	b = temp;
}
console.log(`a=${
      
      a},b=${
      
      b}`);

コード実行結果：

a外部変数sumの値は変更されていないことがわかりますb。

これは、関数に渡されるパラメーターが変数自体ではなく、変数のコピーであるためです。

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

関数を定義するときに、入力パラメーターのデフォルト値を設定できます。関数の呼び出し時にパラメーターが指定されている場合は、代わりにデフォルト値が使用されます。

例えば：

function bless(name,senc='身体健康'){
    
    
	console.log(`祝${
      
      name},${
      
      senc}.`);
}

bless('特朗普')；

コード実行結果：

senc上記の関数には2つのパラメーターが必要ですが、関数の定義時にデフォルト値が設定されているため、呼び出し時にパラメーターを渡しても使用には影響しません。

パラメータにデフォルト値を設定せず、対応するパラメータを渡さないとどうなりますか？

例えば：

function bless(name,senc){
    
    
	console.log(`祝${
      
      name},${
      
      senc}.`);
}

bless('特朗普')；

コードの実行結果は次のとおりです。

パラメータを渡さない場合、パラメータは。であることがわかりますundefined。

古いコードのデフォルトパラメータ

古いバージョンでパラメータのデフォルト値を使用する方法はJavaScript？

2つの方法があります：

if判断を使用する：

function doSomething(val){
    
    
	if(val === undefined){
    
    
		val = 'default val';
	}
	... ...
}

||演算子を使用

function doSomething(val){
    
    
	val = val || 'default val';
	... ...
}

ヌル合体演算子の適用

現代でもJavaScript、関数内でパラメーターを渡すかどうかを決定する必要があります。古いコードで一般的に使用されている上記の2つの方法に加えて、null値合体演算子を使用することもできます??。

例えば：

function doSomething(val){
    
    
	val = val ?? 'unknown';
	... ...
}

戻り値

パラメータは関数への入力であり、戻り値は関数の出力です。

戻り値returnでは、関数の計算結果を関数の本体に返すためにキーワードを使用する必要があります。

戻り値の最も一般的な例は、2つの数値の合計を計算することです。

let a = 1;
let b = 2;
function add(a,b){
    
    
	return a + b;
}

let res = add(a,b);

コード実行結果：

上記のコードは、2つの変数を追加し、結果を返す関数を作成します。

関数が呼び出されるとadd、戻り値が変数に割り当てられて戻り結果が得られますres。

null値を返すこともできます（何も返さない）：

function doSomething(){
    
    
	console.log('return nothing');
	return ;//什么都不返回，程序立即结束
	console.log('after return');
}

doSomething();

コードの実行結果は次のとおりです。

returnプログラムがすぐに終了し、次のコードは実行されなくなります。

関数は複数の戻り値を持つこともできます。

function mulReturn(score){
    
    
	if(score >= 60){
    
    
		return '及格';
	}else{
    
    
		return '不及格';
	}
}
console.log(mulReturn(30));

コード実行結果：

複数ありますがreturn、一度に選択されるのは1つだけです。

関数が何も返さないreturn ;か、returnステートメントを返さない場合、その戻り値は次のようになります。undefined

リターントラップ

return式が長い場合、次のように別の行に配置する可能性があります。

return
 (a + b + c + or + c * f(d) + f(e));

JavaScriptセミコロンのオートコンプリートメカニズムがreturn追加され;、関数が常にを返すため、これが当てはまることはありませんundefined。

長い戻り値の式を処理する必要がある場合はどうなりますか？

最良の方法は、括弧を使用することです。

return (
	a + b + c
	+ d + 
	e + f
);

そうすれば、プログラムに未知のエラーが発生することはありません~~

チップ

関数は通常動作であるため、名前を付けるときに「動詞+名詞」の方法を使用し、キャメルケースの名前を付けると、次のように簡潔で明確な関数名を取得できます。

getAge();
showMsg();
createForm();
checkInput();

関数の機能を単純化します。関数は次のように1つのことだけを行います。
- add(a,b)この関数は2つの数値の加算を実装するため、次のalert()ような関数を使用しないでください。
- checkInput()関数は入力の有効性をチェックする必要があり、そのvalid invalidような情報を出力するべきではありません。
関数名が短すぎると混乱する可能性があります。例：

function a(){
    
    ...}
function b(){
    
    ...}

ただし、このカテゴリには分類さJQueryれ$ません。

コメントから関数/コードを記述し、コード自体をシンプルで読みやすくする必要があります。

JavaScript関数、リターントラップ、関数定義、パラメーターの受け渡し、デフォルトパラメーター、ローカル変数、グローバル変数、戻り値、トリック

記事ディレクトリ

働き

関数定義

ローカル変数

外部変数

内部変数名と外部変数名

パラメータ

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

古いコードのデフォルトパラメータ

ヌル合体演算子の適用

戻り値

リターントラップ

チップ

おすすめ