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

推薦する

CSSは左固定と右適応のレイアウト方法を実現します

1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...

MySQL データベースのエンコーディングを utf8mb4 に変更する方法

utf8mb4 エンコーディングは utf8 エンコーディングのスーパーセットであり、utf8 と互...

ウェブデザインにおける円形要素の使用例 25 選

本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...

MySQLで行または列をソートする方法

方法:説明: どちらも達成できません:方法1: sp_product から sp.productid...

ページコンテンツ全体を中央に配置して、高さがコンテンツに合わせて自動的に拡張されるようにする方法

ページコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に拡大縮小する方法。これ...

JavaScript プログラムのループ構造の詳細な説明

目次構造を選択ループ構造その間…しながらforループ…のために…で…の…のためにまとめループの終了壊...

MacでNodeとnpmを完全にアンインストールする方法

npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...

MySQL の中国語文字化け問題の解決方法

1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...

Linux に MySQL 8.0.x をインストールするための完全な手順

マイグレーションMySQL 入門MySQL はもともとオープンソースのリレーショナル データベース管...

html mailto(メール)の実用化について

ご存知のとおり、mailto は Web デザインと制作において非常に実用的な HTML タグです。...

MySQLの認証コマンドgrantの使い方

この記事の例は MySQL 5.0 以降で実行されます。ユーザー権限を付与するための MySQL コ...

JavaScript配列の組み込みメソッドの詳細な説明

目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...

docker inspect コマンドの使用に関するヒント

説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...

JSはシンプルなカウンターを実装します

HTML CSS および JavaScript を使用して、プラス、マイナス、ゼロの 3 つのボタン...

React 純粋関数コンポーネント setState がページ更新を更新しない問題の解決方法

目次問題の説明:原因分析:解決:補足: Reactでは、フックが使用されている場合、useState...