JavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)

青灯夜游
リリース: 2022-08-08 10:48:24
転載
5962 人が閲覧しました

JS は弱い型指定言語であるため、param キーワードを使用して仮パラメータが C# のような可変パラメータであることを宣言できません。では、この変数パラメータを js で実装するにはどうすればよいでしょうか?以下の記事ではJavaScript関数の変数パラメータの実装方法について解説していきますので、皆様のお役に立てれば幸いです。

JavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)

JS 変数パラメータの実装 1: 引数

引数とは何ですか?可変パラメータを実装するにはどうすればよいですか?

arguments は、関数に渡される引数に対応する配列のようなオブジェクトです。

ES5 では、引数オブジェクトを使用して変数パラメーターを実装できます。

引数オブジェクトの長さは、仮パラメータの数ではなく実際のパラメータの数によって決まります。仮パラメータは、関数内のメモリ空間で再度開かれる変数ですが、引数オブジェクトのメモリ空間とは重なりません。引数と値の両方が存在する場合、2 つの値は同期されますが、どちらか一方に値がない場合、この値のないケースでは値は同期されません。

ログイン後にコピー
  • パラメータは不確かなので、書き留めないでください。

  • 呼び出し時に N 個の複数のパラメータを記述することも、配列を直接渡すこともできます。

実行効果:

JavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)

要約:

1. 関数からわかる定義では、変数パラメータの引数が関数内で使用されている場合、仮パラメータを記述する必要はありません

2。関数を呼び出すとき、複数の実パラメータ

argumentsオブジェクトを渡すことができます。関数に直接接続できるのは、すべての (アロー以外の) 関数で使用できるローカル変数です。引数オブジェクトを使用して、関数内で関数の引数を参照できます。このオブジェクトには関数に渡される各引数が含まれており、最初の引数のインデックスは 0 です。たとえば、関数に 3 つの引数が渡された場合、次のように参照できます:

arguments[0] arguments[1] arguments[2]
ログイン後にコピー

パラメータも設定できます:

arguments[0] = 'value';
ログイン後にコピー

argumentsはオブジェクトですが、Arrayではありません。これはArrayに似ていますが、length 属性とインデックス要素を除いてArrayプロパティを持ちません。たとえば、pop メソッドはありません。ただし、実際のArray:

したがって、次のようなコードがよく見られます:

// 由于arguments不是 Array,所以无法使用 Array 的方法,所以通过这种方法转换为数组 var args = [].slice.call(arguments); // 方式一 var args = Array.prototype.slice.call(arguments); // 方式二 // 下面是 es6 提供的语法 let args = Array.from(arguments) // 方式一 let args = [...arguments]; // 方式二
ログイン後にコピー

arguments# プロパティ

    ##arguments.callee: 現在実行中の関数へのポイント (厳密モード、ECMAScript バージョン 5 (
  • ES5) )arguments.callee()) の使用禁止
  • argunments.length: 現在の関数
  • arguments に渡される引数の数を指します. caller: 残りのパラメーター、デフォルト パラメーター、および破棄された割り当てパラメーターと結合された

#引数が削除されました

#1) strict In モードでは、残りのパラメータ、デフォルトパラメータ、および破棄された割り当てパラメータの存在は、

argumentsオブジェクトの動作を変更しませんが、非厳密モードでは異なります。

function func(a) { arguments[0] = 99; // 更新了arguments[0] 同样更新了a console.log(a); } func(10); // 99 // 并且 function func(a) { a = 99; // 更新了a 同样更新了arguments[0] console.log(arguments[0]); } func(10); // 99
ログイン後にコピー

2) そうでない場合厳密モード

の関数には、残りのパラメーター、デフォルト パラメーター、および構造化代入が含まれていないため、argumentsオブジェクトの値がパラメーターの値を追跡します (およびその逆) 。次のコードを見てください:

function func(a = 55) { arguments[0] = 99; // updating arguments[0] does not also update a console.log(a); } func(10); // 10 // function func(a = 55) { a = 99; // updating a does not also update arguments[0] console.log(arguments[0]); } func(10); // 10 function func(a = 55) { console.log(arguments[0]); } func(); // undefined
ログイン後にコピー

JS 変数パラメータの実装 2: 残りのパラメータ (...)


残りのパラメータは ES6 で導入されました。標準 (形式は

...変数名

)、関数の追加パラメータを取得するために使用されます。残りのパラメータと一致する変数は配列であり、追加のパラメータがその配列に入れられます。可変長パラメータを扱うのに非常に適しています。Rest は、渡されるパラメーターの数の不一致の問題を解決するためのものです。これは、追加のパラメーターを受け入れて配列に入れることを意味します。Rest パラメーター自体は配列であり、配列関連のすべてのメソッドは次のことができます。利用される。

変数パラメーターの実装構文:

function f(a, b, ...theArgs) { // ... }
ログイン後にコピー

    theArgs は "..." で始まり、配列であり、その値は次から取得されます。実際の呼び出し元は [0, theArgs.length) を渡します (インデックス範囲: 0 ~ theArgs.length-1)
Note

:残りのパラメータの後に他のパラメータを置くことはできません (つまり、最後のパラメータのみにすることができます)。そうでない場合は、エラーが報告されます。

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?! // error }
ログイン後にコピー

JavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)

残りのパラメータとパラメータ (引数) オブジェクトを区別する

    残りのパラメータは使用されません変数にはそれぞれ別の名前が付けられ、パラメータ オブジェクトには関数に渡されるすべてのパラメータが含まれます。
  • #パラメータ オブジェクトは実数の配列ではなく、残りのパラメータは実数です。配列インスタンス。たとえば、配列の sort、map、forEach、pop メソッドは直接使用できます
  • パラメータ オブジェクトには独自の追加特性 (呼び出し先属性など) があります

Rest参数的引入减少样式代码

//以前函数 function f(a, b) { var args = Array.prototype.slice.call(arguments, f.length); // … } // 等效于现在 function f(a, b, ...args) { }
ログイン後にコピー

Rest参数可以被解构(通俗一点,将rest参数的数据解析后一一对应)不要忘记参数用[] 括起来,因为它数组嘛

function f(...[a, b, c]) { return a + b + c; } f(1) //NaN 因为只传递一个值,其实需要三个值 f(1, 2, 3) // 6 f(1, 2, 3, 4) // 6 (第四值没有与之对应的变量名)
ログイン後にコピー

示例

1、计算参数和

function sumAll(...args) { // args 是数组的名称 let sum = 0; for (let arg of args) sum += arg; return sum; } console.log( sumAll(1) ); // 1 console.log( sumAll(1, 2) ); // 3 console.log( sumAll(1, 2, 3) ); // 6
ログイン後にコピー

JavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)

2、每个参数乘以2

function multiply(multiplier, ...theArgs) { return theArgs.map(function(element) { return multiplier * element; }); } var arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6]
ログイン後にコピー

JavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)

3、排序

function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); return sortedArgs; } //好像一位和两位混合不能进行排序,这需要看一下为甚?主要第一个为主 console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
ログイン後にコピー

JavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)

对比:参数对象arguments不能排序

function sortArguments() { //arguments是参数对象不能直接使用sort()方法,因为不是数组实例,需要转换 var sortedArgs = arguments.sort(); return sortedArgs; // this will never happen } // 会抛出类型异常,arguments.sort不是函数 console.log(sortArguments(5, 3, 7, 1));
ログイン後にコピー

JavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)

【相关推荐:javascript学习教程编程视频

以上がJavaScript 関数が変数パラメーターを実装する方法について詳しく説明します。 (概要の共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!