JS配列インデックス検出におけるデータ型の問題の詳細な説明

JS配列インデックス検出におけるデータ型の問題の詳細な説明

WeChat アプレット プロジェクトを書いていたとき、その中に「都市選択」機能がありました。作者は<picker-view>コンポーネントを使用しました。このコンポーネントは、 value属性が配列形式で指定されているという点で特殊です。たとえば、 value="[1]"です。

当時はJS変数の型変換を理解していなかったので、コードに数行の判断を書きました。(これは厳密です)

val_one=typeof this.data.pIndex=="number"?[this.daya.pIndex]:this.data.pIndex とします。

(: プロジェクト内のアクセス要素は動的です!

上記の理由は、下付き文字がユーザーの選択に動的に従い、表示のために wxml のvalue属性にフィードバックされるようにするためです。

しかし、その前に判断を下す必要があります。一部の地域は省の都市または直轄市であるため、突然引き上げたり引き抜いたりするなどの「愚かな操作」をユーザーが行うことを防ぐ必要があります。このとき、WeChatアプレットは対応するデータが見つからないというエラーを報告します。

length = placeArray[val_one].sub.lengthとします。
if(val[0]>=長さ){
 val=[長さ-1]
}それ以外の場合(val[0]<0){
 値=[0]
}

後で、このプロジェクトのコードを最適化するために戻ったとき、これ (強制時に配列を数値に変換し、フィードバックを与えるときに数値を配列に変換すること) は実際には不要であることがわかりました。

詳細

JavaScript には独自のデータ処理方法があるようですが、著者はまだ関連する情報を見つけていません~~

値が配列の添え字(インデックス)として使用できるかどうかを判断する方法

しかし、確かなことが 1 つあります。整数プロパティ キーに値を割り当てることは、非整数キーとは異なる方法で処理されるため、配列の特殊なケースであるということです。プロパティを配列インデックスとして使用できるかどうかを判断するために、著者は ES6 仕様書で次の一節を見つけました。

現在、文字列プロパティ名 P はToString(ToUint32(P))が P と等しく、 ToUint32(P) 2^32-1と等しくない場合にのみ配列インデックスになります。

この操作は、次のように JS を使用して実装できます。

関数 toUint32(値){
	Math.floor(Math.abs(Number(value))) % Math.pow(2,32) を返します。
}
関数isArrayIndex(キー){
	numericKey = toUint32(キー)とします。
	String(numericKey) == key && numericKey < (Math.pow(2,32)-1) を返します。
}

toUint32()関数は、仕様で説明されているアルゴリズムを使用して、指定された値を符号なし 32 ビット整数に変換します。isArrayIndex isArrayIndex()関数は、最初にキーを uint32 構造に変換し、次に 2 つの比較を実行します ( toString()の後、元の数値と等しくないか、および2^32-1未満かどうかを確認します)。

この基礎があれば、これに基づいてnew Array()の動作を単純に模倣できます。最も重要なのは長さの記述です。

配列の長さ

関数createArray(長さ=0){
	新しいProxy({ length },{ を返す
		set(トラップターゲット、キー、値){
			currentLength=Reflect.get(trapTarget,"length"); とします。
			if(isArrayIndex(キー)){
				numericKey = Number(key); とします。
				if(数値キー >= 現在の長さ){
					Reflect.set(トラップターゲット、"長さ"、数値キー+1);
				}
			}else if(key === "長さ"){
				if(値 < 現在の長さ){
					for(let index=現在の長さ-1;index>=値;index--){
						Reflect.deleteProperty(トラップターゲット、インデックス);
					}
				}
			}
			// キーのタイプに関係なく、このコードを実行する必要があります return Reflect.set(trapTarget,key,value);
		}
	});
}

これを試してみましょう:

myArray_test

要約する

JS 配列インデックス検出におけるデータ型の問題の詳細な説明については、これで終わりです。JS 配列インデックス検出におけるデータ型の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript 型検出方法の例のチュートリアル
  • JavaScript のデータ型とデータ型の検出方法の詳細な説明
  • JavaScript におけるデータ型検出方法の詳細な説明
  • jsデータ型検出の概要
  • js学習まとめ_データ型検出に基づく4つの方法(必読)
  • 配列型を検出するためのJSメソッドの概要
  • JavaScript でデータ型を検出するいくつかの方法の概要
  • JavaScript の基本データ型と一般的な型検出方法の概要
  • JS でデータ型を検出するいくつかの方法とその長所と短所のまとめ
  • さまざまな数値型の JS 正規表現マッチング検出 (デジタル検証)
  • さまざまな種類のJavaScriptを検出する方法
  • JavaScript の型検出: typeof と instanceof の欠陥と最適化
  • JavaScript 学習ノート: クライアントの種類 (エンジン、ブラウザ、プラットフォーム、オペレーティング システム、モバイル デバイス) の検出
  • Javascriptはクライアントタイプのコードパッケージの検出を実装します
  • ファイルの種類を検出するJavaScriptメソッド

<<:  11 の素晴らしい JavaScript コード リファクタリングのベスト プラクティスの概要

>>:  WeChatミニプログラム抽選コンポーネントの使い方

推薦する

CSS3のvar()を使用して実行時にscss変数の値を変更する詳細な説明

var() の紹介と使用法詳細 (MDN) IEは無効ですが、他の主流のブラウザは有効ですvar()...

HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...

VMware Workstation Pro が Windows で実行されない場合の解決策

国慶節の休暇後、Windows アップデート後に VMware 仮想マシンが開けなくなり、「VMwa...

空のパスがページのパフォーマンスに与える影響に対する解決策

数日前、Google Reader で Yu Bo さんが共有した投稿「空のパスがページのパフォーマ...

Linux ファイルとユーザー管理の実践

1. /etc ディレクトリ内の、文字以外の文字で始まり、その後に文字と任意の長さのその他の文字が続...

純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法

序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...

Dockerコンテナでは、イメージを簡素化してサイズを縮小する方法を詳しく説明しています

目次1.画像レイヤーの数を減らす1. 命令の統合2. 多段階ビルド3. スクワッシュ機能を有効にする...

HTML チュートリアル、HTML デフォルト スタイル

html 、アドレス、引用、本文、 dd 、 div 、 dl 、 dt 、フィールドセット、フォ...

Linux システムで grub.cfg ファイルの破損を修復する手順

目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...

Vue は Echarts をインポートして折れ線グラフを実現します

この記事では、VueでEchartsをインポートして線散布図を実現する具体的なコードを参考までに共有...

Vueは右上隅の時間表示のリアルタイム更新を実装します

この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介しま...

MySQL でパーセンテージと最初の数パーセントを表示する方法

目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

WIN10 システムと Docker 内部コンテナ IP 間の通信方法

1. Windows 版の Docker をインストールしたら、Docker クイックスタート ター...

Windows 10 で MySQL の解凍バージョンをインストールする方法の詳細なグラフィック チュートリアル

MySQL のインストールは、インストール バージョンと解凍バージョンに分かれています。インストール...