3.
分解パラメータJS関数パラメータの中で、私たちが特に気に入っているのは、分解の機能です。インラインパラメータのオブジェクトまたは配列を分解できます。この機能により、パラメータオブジェクトからいくつかの属性を抽出すると非常に便利になります
function greet({ name }) {
return `Hello, ${name}!`;
}
const person = { name: '前端小智' };
greet(person); // => 'Hello, 前端小智!'
{ name }是应用于对象解构的参数。
当然也可以结合默认参数:
function greetWithDefault({ name = '无名氏' } = {}) {
return `Hello, ${name}!`;
}
greetWithDefault(); // => 'Hello, 无名氏!'
{name = 'Unknown'} = {}デフォルトは空のオブジェクトです。
さまざまなタイプの分解を組み合わせたすべての関数を使用できます。たとえば、同じパラメータにオブジェクトと配列の破棄を使用してみましょう。
function greeFirstPerson([{ name }]) {
return `Hello, ${name}!`;
}
const persons = [{ name: '王小智' }, { name: '王大治'}];
greeFirstPerson(persons); // => 'Hello, 王小智!'
[{name}]の分解はより複雑で、配列の最初の項目を抽出してから、オブジェクトからname属性を読み取ります。
4.引数オブジェクト
JS関数のもう1つの優れた機能は、変数パラメーターを使用して同じ関数を呼び出す機能です。このようにして、argumentsオブジェクトを使用して、渡されたすべてのパラメーターを取得できます。
引数オブジェクトは、すべての(矢印以外の)関数で使用できるローカル変数です。引数オブジェクトを使用して、関数内の関数のパラメーターを参照できます。
たとえば、関数のパラメータを合計するには、次のようにします。
function sumArgs() {
console.log(arguments); // { 0: 5, 1: 6, length: 2 }
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
sumArgs(5, 6); // => 11
引数は、関数に渡されるパラメーターに対応する配列のようなオブジェクトです。
問題は、各関数スコープが独自の引数オブジェクトを定義することです。したがって、外部関数スコープの引数にアクセスするには、追加の変数が必要になる場合があります。
function outerFunction() {
const outerArguments = arguments;
return function innerFunction() {
// outFunction arguments
outerArguments[0];
};
}
4.1矢印関数の場合
特別な場合があります。矢印w関数には引数がありません。
const sumArgs = () => {
console.log(arguments);
return 0;
};
// throws: "Uncaught ReferenceError: arguments is not defined"
sumArgs();
しかし、この問題はそうではありません。残りのパラメーターに、矢印関数のすべてのパラメーターにアクセスさせることができます。来て見てください。
5.残りのパラメーター
残りのパラメーター構文を使用すると、無数のパラメーターを配列として表すことができます。
いつものように、見に来てください。
function sumArgs(...numbers) {
console.log(numbers); // [5, 6]
return numbers.reduce((sum, number) => sum + number);
}
sumArgs(5, 6); // => 11
…numbersは残りのパラメーターであり、残りのパラメーターの真の配列になります[5,6]。数値は配列であるため、(配列のようなオブジェクトのパラメーターではなく)配列独自のメソッドreduceを使用できます。
残りのパラメーターのすべてのパラメーターを収集したくない場合は、通常のパラメーターと残りのパラメーターを組み合わせることができます。
function multiplyAndSumArgs(multiplier, ...numbers) {
console.log(multiplier); // 2
console.log(numbers); // [5, 6]
const sumArgs = numbers.reduce((sum, number) => sum + number);
return multiplier * sumArgs;
}
multiplyAndSumArgs(2, 5, 6); // => 22
乗数は通常のパラメーターであり、最初のパラメーターの値を取得します。次に、残りのパラメータ...番号が残りのパラメータを受け取ります。残りのパラメータと引数オブジェクト
の違い
残りのパラメータと引数オブジェクトには、主に3つの違いがあります。
残りのパラメーターには、対応する仮パラメーターのない実際のパラメーターのみが含まれ、argumentsオブジェクトには、関数に渡されるすべての実際のパラメーターが含まれます。
引数オブジェクトは実際の配列ではなく、残りのパラメーターは実際の配列インスタンスです。つまり、sort、map、forEach、popなどのすべての配列メソッドを直接使用できます。
引数オブジェクトには、いくつかの追加のプロパティ(呼び出し先プロパティなど)があります。