JavaScriptの配列オブジェクトと引数インスタンスの詳細な説明-jsチュートリアル-php.cn

JavaScriptの配列オブジェクトと引数インスタンスの詳細な説明

巴扎黑

リリース： 2017-08-16 10:55:50

オリジナル

1342 人が閲覧しました

配列のようなオブジェクト

いわゆる配列のようなオブジェクト:

長さ属性といくつかのインデックス属性を持つオブジェクト

例:

var array = [&#39;name&#39;, &#39;age&#39;, &#39;sex&#39;];
  
var arrayLike = {
    0: &#39;name&#39;,
    1: &#39;age&#39;,
    2: &#39;sex&#39;,
    length: 3
}

ログイン後にコピー

それなのに、なぜそれは配列のようなオブジェクトと呼ばれますか? オブジェクトはどこにありますか?
次に、これら 2 つのオブジェクトを、読み取りと書き込み、長さの取得、およびトラバースの 3 つの側面から見てみましょう。似てませんか？

配列オブジェクトは配列メソッドを使用できますか?例:

console.log(array[0]); // name
console.log(arrayLike[0]); // name
  
array[0] = &#39;new name&#39;;
arrayLike[0] = &#39;new name&#39;;

ログイン後にコピー

ただし、上記のコードはエラーを報告します: arrayLike.push は関数ではありません
結局のところ、それは依然として配列クラスです...

配列を呼び出しますMethod
配列クラスの場合配列メソッドを任意に使いたい場合はどうすればよいですか？
直接呼び出すことはできないので、Function.callを使って間接的に呼び出すことができます:

console.log(array.length); // 3
console.log(arrayLike.length); // 3

ログイン後にコピー

Array-like to object
上記の例では、Array-likeをオブジェクトに変換するメソッドto array についてはさらに 3 つ追加します:

for(var i = 0, len = array.length; i < len; i++) {
   ……
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    ……
}

ログイン後にコピー

それでは、なぜ配列のようなオブジェクトについて説明するのでしょうか。そして、クラス配列にはどのような応用があるのでしょうか?

配列のようなオブジェクトと言えば、Arguments オブジェクトは配列のようなオブジェクトです。クライアント側 JavaScript では、一部の DOM メソッド (document.getElementsByTagName() など) も配列のようなオブジェクトを返します。

Arguments オブジェクト
次に、Arguments オブジェクトに焦点を当てます。
Arguments オブジェクトは、関数のパラメーターやその他のプロパティを含む関数本体でのみ定義されます。関数本体では、引数は関数の Arguments オブジェクトを指します。
例:

arrayLike.push(&#39;4&#39;);

ログイン後にコピー

出力結果は次のとおりです:

配列のインデックス属性と長さ属性に加えて、呼び出し先属性もあることがわかります。 . 次に1つずつ紹介していきます。 longent属性属性オブジェクトの長さ属性、例：
rreee
callee属性引数オブジェクトのcallee属性、それを通して関数自体を通して呼び出すことができます。
callee を使用した古典的なクロージャインタビューの質問の解決策について話しましょう:

var arrayLike = {0: &#39;name&#39;, 1: &#39;age&#39;, 2: &#39;sex&#39;, length: 3 }
  
Array.prototype.join.call(arrayLike, &#39;&&#39;); // name&age&sex
  
Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] 
// slice可以做到类数组转数组
  
Array.prototype.map.call(arrayLike, function(item){
    return item.toUpperCase();
}); 
// ["NAME", "AGE", "SEX"]

ログイン後にコピー

次に、引数オブジェクトについて注意すべきいくつかの点について話しましょう: JavaScriptの配列オブジェクトと引数インスタンスの詳細な説明

引数とその対応パラメータのバインド

var arrayLike = {0: &#39;name&#39;, 1: &#39;age&#39;, 2: &#39;sex&#39;, length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 
// 4. apply
Array.prototype.concat.apply([], arrayLike)

ログイン後にコピー

パラメータが渡されない場合、実際のパラメータと引数の値は共有されません
。また、上記は非厳密モードですが、厳密モードの場合、実際のパラメータと引数は共有されません。
パラメータの受け渡し

ある関数から別の関数へのパラメータの受け渡し

function foo(name, age, sex) {
    console.log(arguments);
}
  
foo(&#39;name&#39;, &#39;age&#39;, &#39;sex&#39;)

ログイン後にコピー

強力な ES6

ES6 の... 演算子を使用して、簡単に配列に変換できます。

function foo(b, c, d){
    console.log("实参的长度为：" + arguments.length)
}
  
console.log("形参的长度为：" + foo.length)
  
foo(1)
  
// 形参的长度为：3
// 实参的长度为：1

ログイン後にコピー

アプリケーション

JavaScript 特別シリーズである次のシリーズでは、jQuery の拡張実装、関数のカリー化、再帰などにおける引数の応用例を実際に見ていきます。シナリオ。この記事では詳細には触れません。
これらのシナリオを要約すると、当面考えられるシナリオは以下のとおりです:

可変長のパラメータ
関数のカリー化
再帰呼び出し
関数のオーバーロード ...

以上がJavaScriptの配列オブジェクトと引数インスタンスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。