技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

関数

各関数は Function 型のインスタンスであり、他の参照型と同様に、Function にもプロパティとメソッドがあります。関数はオブジェクトであり、関数名は関数オブジェクトへのポインタであり、必ずしも関数自体に厳密にバインドされているわけではありません。

関数定義の関数宣言定義

function sum (n1,n2){
return n1+n2;
}

関数定義の関数式

let sum = function(n1,n2){
return n1+n2;
};

関数定義 アロー関数

let sum = (n1,n2)=>{
return n1+n2;
};

関数定義コンストラクター

let sum = new Function("n1","n2","return n1+n2");
/*这个构造函数接收任意多个字符串参数，
最后一个参数始终会被当成函数体，
而之前的参数都是新函数的参数*/

アロー関数

アロー関数は、関数式を使用できる場所ならどこでも使用できます。

let sum = (a,b)=>{
return a+b;
};
let sum1 = function(a,b){
return a+b;
};
//箭头函数适合嵌入函数的场景
let arr = [1,2,3];
console.log(arr.map(function(i) {return i+1;}));
console.log(arr.map((i)=>{return i+1;}));
//二者结果一样，但是箭头函数更为简洁
 
//如果只有一个参数，括号可以不用。只有没有参数，或者多个参数的情况下，才使用括号
 
let double = (x)=>{return 2*x;};
let triple = x => {return 3*x};
 
//箭头函数也可以不使用大括号，但这样会改变函数的行为。使用大括号就说明包含函数体，可以在一
//个函数中包含多条语句，跟常规函数一样。如果不使用，后面只能有一行代码。
 
let double = (x)=>{return 2*x;};
let triple = x=>3*x;
 

アロー関数の構文は単純ですが、適さない状況も多くあります。アロー関数は引数、super、new.target を使用できず、コンストラクターとしても使用できません。さらに、アロー関数にはプロトタイプ属性がありません。

アロー関数のパラメータ

関数はアロー構文を使用して定義されているため、関数に渡されるパラメーターには、arguments キーワードを使用してアクセスすることはできません。定義された名前付きパラメーターを介してのみアクセスできます。

function foo() { 
 console.log(arguments[0]); 
} 
foo(5); // 5 
let bar = () => { 
 console.log(arguments[0]); 
}; 
bar(5); // ReferenceError: arguments is not defined

関数名

関数には複数の名前を付けることができます。

function sum(num1, num2) { 
 return num1 + num2; 
} 
console.log(sum(10, 10)); // 20 
let anotherSum = sum; 
console.log(anotherSum(10, 10)); // 20 
sum = null; 
console.log(anotherSum(10, 10)); // 20

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

関数定義のパラメータの後に = を使用することで、パラメータにデフォルト値を割り当てることができます。

function makeKing(name = 'Henry') { 
 return `King ${name} VIII`; 
} 
console.log(makeKing('Louis')); // 'King Louis VIII' 
console.log(makeKing()); // 'King Henry VIII'

デフォルトのパラメータ値はプリミティブ値やオブジェクト型に限定されず、呼び出し関数によって返される値も使用できます

let romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI']; 
let ordinality = 0; 
function getNumerals() { 
 // 每次调用后递增
 return romanNumerals[ordinality++]; 
} 
function makeKing(name = 'Henry', numerals = getNumerals()) { 
 return `King ${name} ${numerals}`; 
} 
console.log(makeKing()); // 'King Henry I'
console.log(makeKing('Louis', 'XVI')); // 'King Louis XVI' 
console.log(makeKing()); // 'King Henry II' 
console.log(makeKing()); // 'King Henry III'

パラメータの展開と収集

ES6 では、コレクション データを非常に簡潔に操作および結合するために使用できる新しい拡張演算子が追加されています。スプレッド演算子にとって最も役立つシナリオは、関数定義内のパラメーター リストであり、言語の弱い型指定と可変長パラメーターを最大限に活用できます。スプレッド演算子は、関数呼び出し時にパラメーターを渡したり、関数パラメーターを定義したりするために使用できます。

拡張パラメータ

let values = [1, 2, 3, 4]; 
function getSum() { 
 let sum = 0; 
 for (let i = 0; i < arguments.length; ++i) { 
 sum += arguments[i]; 
 } 
 return sum; 
} 
//不使用扩展操作符实现累加
console.log(getSum.apply(null,values));
 
//使用扩展操作符
console.log(getSum(...values));

パラメータを収集する

収集されたパラメータの前に名前付きパラメータがある場合は、残りのパラメータのみが収集されます。そうでない場合は、空の配列が取得されます。パラメータの収集結果は可変であるため、最後のパラメータとしてのみ使用できます。

 
function getProduct(...values,lastValue){}//不可以
function ignoreFirst(firstValue,...values){console.log(values)}//可以
ignoreFirst(); // [] 
ignoreFirst(1); // [] 
ignoreFirst(1,2); // [2] 
ignoreFirst(1,2,3); // [2, 3]

関数宣言と関数式

コードが実行される前に、JavaScript エンジンは関数宣言を読み取り、実行コンテキストで関数定義を生成します。関数式は、実行コンテキストで関数定義が生成される前に、コードがその行まで実行されるまで待機する必要があります。

// 没问题 
console.log(sum(10, 10)); 
function sum(num1, num2) { 
 return num1 + num2; 
}
/*函数声明提升*/
 
 
// 会出错
console.log(sum(10, 10)); 
let sum = function(num1, num2) { 
 return num1 + num2; 
};