jQuery の .makeArray() が複数の型を JS ネイティブ配列に変換する方法の分析例-jsチュートリアル-php.cn

jQuery の .makeArray() が複数の型を JS ネイティブ配列に変換する方法の分析例

黄舟

リリース： 2017-07-19 09:24:53

オリジナル

1390 人が閲覧しました

jQuery.makeArray(obj) 名前からその目的を推測するのは簡単です: 受信オブジェクトをネイティブ配列に変換するために使用する必要があります

公式 Web サイトの説明を見てください: 配列のようなオブジェクトをtrue JavaScript array.(配列のようなオブジェクトを JS のネイティブ配列に変換する)

それでは、どのようなオブジェクトを「配列のようなオブジェクト」と呼べるのでしょうか?この質問に急いで答えなくても、この記事を読めば理解できると思います。まず次の実験を見てみましょう

HTMLCollection をネイティブ Array に変換します

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>jQuery.makeArray demo</title>
		<style>
			p {
				color: red;
			}
		</style>
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	</head>
	<body>
		<p> First </p> <p> Second </p> <p> Third </p> <p> Fourth </p>
		<script>
			// Returns a NodeList
			var elems = document.getElementsByTagName("p");
			// Convert the NodeList to an Array
			var arr = jQuery.makeArray(elems);
			// Use an Array method on list of dom elements
			arr.reverse();
			$(arr).appendTo(document.body);
		</script>
	</body>
</html>

ログイン後にコピー

ここでは、 document.getElementsByTagName によって返されることがわかります。 Chrome の ("p") これは、公式 Web サイトで説明されている NodeList の代わりに HTMLCollection

です。特に NodeList と HTMLCollection の違いを探しました。HTMLCollection オブジェクトは NodeList オブジェクトに非常に似ていますが、前者は異なる可能性があります。後者には、数値インデックスを使用してのみアクセスできます (もちろん、NodeList も「配列のようなオブジェクト」です)

実験の結果、要素は名前と配列でインデックス付けできることがわかりました。結論: chrome の document.getElementsByTagName("p") で返される HTMLCollection です

HTMLCollection は elems.length を通して長さを取得でき、その要素には elems[0] を通してアクセスできます

のアクセス方法のような感じでしょうか？配列？実際には、これは単なる「配列のようなオブジェクト」ですが、js のネイティブ配列ではないため、(.pop() や .reverse( など) の配列のネイティブメソッドにはアクセスできません。 ))

その後、jQuery.makeArray(elems) 変換によってネイティブ JS 配列 arr が取得され、配列のネイティブメソッドを使用できるようになります。

jQuery でラップされた配列をネイティブ配列に変換します

HTMLCollection に加えて、他に何を変換できますか? jQuery でラップされた配列について聞いたことがありますか?

しかし、私はそれに遭遇したはずです。たとえば、$('p') を通じて p のグループを取得した場合、この p のグループは jQuery によってラップされた配列です

別の例では、を通じて取得されるものです。 map() 関数は jQuery によってラップされた配列でもあり、配列は length を使用して長さを取得し、添字インデックスを通じてアクセスすることもできます。また、jQuery でラップされた配列は jQuery によって提供されるメソッドを使用することもできます。

$.makeArray(obj) を通じてネイティブ配列に変換できます。たとえば、最も一般的な方法は、.map() 関数で jQuery 配列を取得し、それをネイティブ配列に変換してから、 join() による結果

もちろん、jQuery をラップします。配列をネイティブ配列に変換する一般的な方法には、.get() や .toArray() などがあります

json オブジェクトをネイティブ Array に変換します

この状況は少し複雑です。json オブジェクトは「配列のようなオブジェクト」ではないため、変換が必要です。

前に話したいくつかの「配列のようなオブジェクト」を覚えていますか?それらはすべて .length を通じて長さを取得でき、fakeArr.length、fakeArr[0] などの添え字インデックスを通じてアクセスできます

それでは、json を「配列」に変えることができます。「同様のオブジェクト」についてはどうでしょうか?

最初に設計してください:

json で fakeArr.length をサポートするには、長さのキーを使用してキーと値のペアを定義するだけで済みます。

サブスクリプトアクセスのサポートは簡単に解決できるようです。さらに、キーと値のペア数字をキーとして使用するだけです~

それから試してみてください:

var fakeArray = {0: "张三", 1: "李四", 2:"朱六", length:3};
var realArray = $.makeArray(fakeArray);
console.log(fakeArray)
console.log(realArray)
realArray.reverse();
console.log(realArray);

ログイン後にコピー

見ましたか?成功！ここでの realArray はすでに js のネイティブ配列であるため、reverse() などのネイティブメソッドを使用できます

変換プロセスでは長さが非常に重要であることに注意してください この長さは、変換された配列の長さも決定します。

If 上記の例の長さが 2 に指定されている場合、変換された配列には最初の 2 つの要素 (["Zhang San", "Li Si"] のみが含まれます)

上記の例の長さが4 として指定すると、変換された配列になります。配列は必要な配列ではなく、new Array().push(fakeArray) に似た配列になります

以上がjQuery の .makeArray() が複数の型を JS ネイティブ配列に変換する方法の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。