JavaScriptの擬似配列と配列の使い方と違い

JavaScriptの擬似配列と配列の使い方と違い

擬似配列と配列

JavaScript では、5 つのプリミティブ データ型を除き、関数を含め、その他すべてはオブジェクトです。

オブジェクトと配列の関係

違いについて話す前に、JavaScript のプロトタイプ継承という別の知識について触れておく必要があります。

JavaScript の組み込みコンストラクターはすべて Object.prototype から継承します。

この前提の下では、new Array() または [] を使用して作成された配列オブジェクトは Object.prototype のプロパティ値を持つことがわかります。

var obj = {}; // Object.prototype のプロパティ値を持ちます var arr = [];
//Array.prototypeのプロパティはObject.prototypeから継承されるため、配列リテラルを使用して配列が作成されます。
//するとArray.prototypeとObject.prototypeの両方のプロパティ値を持つことになります

オブジェクトと配列の最初の違いは、オブジェクトには配列の Array.prototype プロパティ値がないことです。

配列とは何か

配列には、オブジェクトにはない基本的な機能であるインデックスがあります。コードの一部を見てみましょう。

var obj = {};
var arr = [];
 
obj[2] = 'a';
arr[2] = 'a';
 
console.log(obj[2]); // => a
console.log(arr[2]); // => a
console.log(obj.length); // => 未定義
console.log(arr.length); // => 3
  • オブジェクトはデータにアクセスするための通常のキーと値のペアであるため、obj[2]は「a」を出力します。
  • ただし、arr[2]は「a」を出力します。配列はインデックスによってデータを格納およびアクセスします。arr[2]が「a」を出力する理由は、データがすでに配列arrのインデックス2に格納されているためです。
  • obj.lengthは配列の特性を持たず、objは属性の長​​さを保存しないので、当然undefinedを出力します。
  • 配列の場合、長さは配列の組み込みプロパティであり、配列はインデックスの長さに応じて長さの値を変更します。
  • arr.length が 1 ではなく 3 を出力するのはなぜですか?
    • 配列に要素を追加する場合、連続したインデックスに従って追加されるわけではないため、配列のインデックスは不連続になり、インデックスの長さが要素数よりも大きくなります。

疑似配列とは何ですか?

  1. 長さプロパティがあり、その他のプロパティ(インデックス)は非負の整数です(オブジェクト内のインデックスは文字列として扱われるため、非負の整数の文字列として理解できます)
  2. 配列が持つメソッドを持たない

疑似配列は、配列のような長さ属性を持ち、さらに 0、1、2、3 などの属性も持つオブジェクトです。配列のように見えますが、配列ではありません。例:

var 偽の配列 = {
  "0": "最初",
  "1": "秒",
  "2": "3番目",
  長さ: 3
};
 
(var i = 0; i < fakeArray.length; i++) {
  コンソールにログ出力します。
}
 
Array.prototype.join.call(fakeArray,'+');

一般的な疑似配列は次のとおりです。

  • 関数内の引数
  • DOM オブジェクトのリスト (document.getElementsByTags によって取得されるリストなど)
  • jQuery オブジェクト (例: $("div") )

疑似配列はオブジェクトですが、実際の配列は配列です。

疑似配列の目的は、通常のオブジェクトが次のような配列の多くのメソッドを通常どおりに使用できるようにすることです。

var arr = Array.prototype.slice.call(引数);
 
Array.prototype.forEach.call(引数, 関数(v) {
  // 引数オブジェクトをループします });

// 押す
//いくつかの
// 毎
// フィルター
// マップ
// ...

上記は、配列プロトタイプ メソッドを借用するときに配列リテラルを使用することで簡略化できます。

var obj = {
  0: 'あ'、
  1: 'b'、
  2: 'c'、
  長さ: 3
}

;[].push.call(obj, 'd')

コンソールログ([].slice.call(obj))

;[].forEach.call(obj, 関数(num, インデックス) {
  コンソール.log(数値)
})

両者の違い

1. 長さ:

  • 真の配列は可変長である
  • 擬似配列の長さは不変である

2. 方法の使用:

  • 真の配列は配列メソッドを使用できる
  • 擬似配列では配列メソッドを使用できません

まとめ

オブジェクトには配列プロパティ値がありません。プロトタイプの型は Object ですが、配列の型は Array です。
配列はインデックスに基づいて実装され、長さは自動的に更新され、オブジェクトはキーと値のペアです。オブジェクトを使用すると、疑似配列を作成でき、疑似配列では配列のほとんどのメソッドを正常に使用できます。

要約する

JavaScript の擬似配列と配列の使い方と違いについての記事はこれで終わりです。JavaScript の擬似配列と配列に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • HTMLCollection/NodeList/疑似配列を js の配列に変換するコード
  • JavaScript 擬似配列の実装方法
  • JavaScript 擬似配列の使用例の分析
  • 擬似配列を配列に変換する JS Array.from() メソッドの例

<<:  Tomcat サービスに Java 起動コマンドを追加する方法

>>:  MySQL データベース内の数十億のデータを素早くクリーンアップする方法

推薦する

JavaScript 関数構文の説明

目次1. 通常の機能2. 矢印関数3. データパケットJSON 4. オブジェクト5. 約束6. 非...

React ページ ターナーの実装 (フロント エンドとバックエンドを含む)

目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...

Linuxシステムにおける仮想デバイスファイルのさまざまな実用的な使用法の詳細な説明

みなさんこんにちは。私は梁旭です。ご存知のとおり、Linux ではデバイス ファイルも含めすべてがフ...

Javascript 非同期プログラミング: Promise を本当に理解していますか?

目次序文基本的な使い方文法エラー処理プロミスチェーン呼び出し非同期と待機よく使われる方法1. Pro...

uniapp パッケージ化されたアプレット レーダー チャート コンポーネントの完全なコード

効果画像:実装コードは以下のとおりですビュー <canvas id="radar-c...

MySQL に接続されている IP アドレスを表示する方法の例

具体的な方法:まずコマンドプロンプトを開きます。次に、[ mysql -u root -p ] コマ...

CSS3 の Flex レイアウトの詳細な分析

Flexbox レイアウト モジュールは、コンテナー内のスペースをより効率的に配分する方法を提供する...

dockerでビルドしたnacos1.3.0の実装

1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...

WEB中国語フォントアプリケーションガイド

Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...

Linux でユーザーを完全に削除する 2 つの方法

Linux 操作実験環境: Centos7 仮想マシンまず、共通ユーザーgubeiqingを作成しま...

リモート接続を許可するようにMySQLを変更する方法

MySQLリモート接続の問題に関しては、会社で働いているときに誰かのコンピュータに保存されているMy...

MySQL ステートメントに一重引用符またはバックスラッシュを含む値を挿入する方法

序文この記事では主に、シングルクォートやバックスラッシュを含む値を挿入するMySQLステートメントに...

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...

Linux で誤って削除したメッセージ ファイルを復元する方法

プロセスで使用されていて、誤って削除されたファイルがある場合、それらを回復することができます。プロセ...