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ミニプログラム抽選コンポーネントの使い方

推薦する

MySQL がタイムスタンプを使用するときにタイムゾーンの問題を無視できるのはなぜですか?

私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...

CentOS システムのディスク パーティションを拡張する方法

問題/障害/シナリオ/要件Eve-ng の仮想マシン OVA のハードディスクは 38G しかないた...

MySQL SELECT文の実行方法

MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...

ベースタグとは何ですか? また、それは何をするのですか?

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトの...

Linux CRM デプロイメント コードの詳細な説明

Linuxの基本設定 Linux環境でpython3をコンパイルしてインストールする 1. Linu...

HTML メタタグの一般的な使用例のコレクション

マタタグとは<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ペー...

絵文字と問題解決のためのMySQL/Javaサーバーサポートの詳細な説明

この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...

React における useEffect と useLayoutEffect の違い

目次前提条件使用効果コミット前ミューテーション効果コミットミューテーション効果コミットレイアウト効果...

役に立つメタ設定方法(必読)

<meta name="viewport" content="...

MySQLの読み書き分離により挿入後にデータが選択されなくなる問題を解決

MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...

VirtualBox を使用して Mac 上にローカル仮想マシン環境を構築する方法

1. ビッグデータとHadoopビッグデータについて研究し学ぶには、当然 Hadoop から始める必...

Linux ファイルを分割するための split コマンドの詳細な説明

いくつかの簡単な Linux コマンドを使用すると、ストレージまたは電子メールの添付ファイルのサイズ...

Vueでフォームデータを取得する方法

目次必要データを取得して送信するテンプレートフィルターフィルターの使用シナリオ要約する必要Vue を...

Presto をインストールし、Docker で Hive を接続する詳細なプロセス

1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...

Mac OS 10.11 での MySQL 5.7.12 のインストールと設定のチュートリアル

Mac OS 10.11 に MySQL をインストールして設定する方法を、主に写真を使って手順を簡...