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 データベース内の数十億のデータを素早くクリーンアップする方法

推薦する

Vue ページ スタック マネージャーの詳細

目次2. 試した方法2.1 キープアライブ2.2 ネストされたルートを持つ CSS 3. 機能説明4...

Vue で PC アドレスをモバイル アドレスにリダイレクトする方法

要件:PC側とモバイル側は2つの独立したプロジェクトです。2つのプロジェクトの内容は基本的に同じで、...

Linux の PHP に XML 拡張機能をインストールする詳細な手順

PHP Linux に XML 拡張機能をインストールする1. PHPインストールソースパッケージを...

Linux システムで crontab を使用して MySQL データベースを定期的にバックアップする方法

システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...

スパンの最小高さを定義するソリューションは効果がありません

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

HTML 描画ユーザー登録ページ

この記事では、HTML描画ユーザー登録ページの具体的な実装コードを参考までに共有します。具体的な内容...

親子コンポーネントの通信を解決するための3つのVueスロット

目次序文環境の準備カテゴリコンポーネントアプリのコンポーネント1. デフォルトスロット2. 名前付き...

上部の固定divは半透明効果に設定できます

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

MySQL 5.7.20 共通ダウンロード、インストール、設定方法と簡単な操作スキル(解凍版無料インストール)

早朝に MySQL 5.7.19 のインストールを終えたばかりですが、午前中に MySQL が最新バ...

実際のプロジェクトでElementUIを使用する手順の詳細な説明

目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...

js 属性オブジェクトの hasOwnProperty メソッドの使用

オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...

webpackコード断片化の実装

目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...

Linux の特別な権限 SUID、SGID、SBIT の詳細な説明

序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...

nginx での listen ディレクティブの例の分析

プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...