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バージョン1. インストール パッケージをダウンロードします。 2....

CSS を使用して複数の方法で下揃えを実装するサンプル コード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...

MySQLコマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法

目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...

JavaScript は、シンプルな虫眼鏡の最も完全なコード分析を実装します (ES5)

この記事では、参考までに、シンプルな虫眼鏡を実装するためのJavaScriptの具体的なコードを紹介...

ストアド プロシージャでエラー状態をトリガーする mysql ストアド プロシージャの分析例 (SIGNAL および RESIGNAL ステートメント)

この記事では、例を使用して、MySQL がストアド プロシージャで引き起こすエラー状態 (SIGNA...

MySQLデータベースに画像を保存するいくつかの方法

通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...

SQLの最適化では間違いがよく起こります。それはMySQLのExplain Planの使い方を理解していないからです。

目次1. 準備2. 説明計画の概要3. フィールドの詳細な説明4. パーティションクエリにはパーティ...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します

目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...

Reactのコンポーネント共同利用実装

目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...

nginxで複数のサーバーを簡単に構成する方法

1: nginx のインストール方法については詳しく説明しません。Baidu で検索してください。 ...

ネイティブjsはショッピングカートのロジックと機能を実装します

この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...

Vueはユーザーログインとトークン検証を実装します

フロントエンドとバックエンドを完全に分離する場合、Vue プロジェクトでトークン検証を実装する一般的...

Vue を使用して 2 つのデータ セットの違いを比較する視覚化コンポーネントの詳細な説明

目次必要:要点:これまでの要点に従って、コンポーネントのプロパティを確立できます。コンポーネントの基...

JavaScript 事前分析、オブジェクトの詳細

目次1. 事前分析1. 変数の事前解析と関数の事前解析1. 変数の事前解析2. 機能事前分析2. 事...