JSON.stringify のさまざまな用途のまとめ

JSON.stringify のさまざまな用途のまとめ

序文

json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一般的な方法であることを知っているはずです。ただし、IE6-7 には JSON オブジェクトがないため、実装するには json2.js を使用する必要があります。

1. 古典的な用法

 varデータ = [
     {名前: "Wukong", 性別: 1, 年齢: 30},
     {名前: "Bajie", 性別:0, 年齢:20},
     {名前: "Tang Monk"、性別: 1、年齢: 30}
 ]; //JavaScript 配列にはオブジェクトが含まれています //JavaScript オブジェクトを JSON 形式の文字列に変換します var str_json = JSON.stringify(data);
コンソールにログ出力します。
//実行結果は次のとおりです:
//[{"name":"悟空","sex":1,"age":30},{"name":"八戒","sex":0,"age":20},{"name":"唐僧","sex":1,"age":30}]

とても簡単です!これは私たちが最もよく使う方法でもあります

2. 複雑なデータの抽出

たとえば、当社のデータは非常に複雑で、アバター、ニックネーム、個人の署名など​​の情報が含まれています。しかし、ローカルに保存したので、ユーザー名と性別だけが必要です。どうすればいいですか? 2 番目のパラメータを指定してデータを走査し、再抽出することでこれを実行できます。

a. 従来のデータ抽出方法

varデータ = [
    {名前: "Wukong", 性別: 1, 年齢: 30},
    {名前: "Bajie", 性別:0, 年齢:20},
    {名前: "Tang Monk"、性別: 1、年齢: 30}
];
// データを抽出する従来の方法 var new_data = [];
(var i=0, new_data=[]; i<data.length; i++) の場合 {
    //行配列を構築する new_data.push({
        名前: データ[i].名前、
        性別: データ[i].年齢
    });
}
var str_json = JSON.stringify(new_data);
コンソールにログ出力します。

b. stringifyの2番目のパラメータを使用してデータを抽出します

varデータ = [
    {名前: "Wukong", 性別: 1, 年齢: 30},
    {名前: "Bajie", 性別:0, 年齢:20},
    {名前: "Tang Monk"、性別: 1、年齢: 30}
];

var str_json = JSON.stringify(data,["名前","年齢"]);
コンソールにログ出力します。
//実行結果	
//[{"name":"悟空","age":30},{"name":"八戒","age":20},{"name":"唐僧","age":30}]

2 番目のパラメータに必要なキー配列が渡される限り、この処理は非常に簡単に完了できます。

もちろん、1,0 を男性または女性に変更するなど、より複雑な処理をしたい場合は、2 番目のパラメーターをコールバック関数で処理できます。

varデータ = [
    {名前: "Wukong", 性別: 1, 年齢: 30},
    {名前: "Bajie", 性別:0, 年齢:20},
    {名前: "Tang Monk"、性別: 1、年齢: 30}
];

var str_json = JSON.stringify(データ、関数(キー、値) {
    if(キー==="性別"){
        ["男の子","女の子"][値]を返します。
    }
    戻り値;
});
コンソールにログ出力します。
// [{"name":"悟空","sex":"女性","age":30},{"name":"八戒","sex":"男性","age":20},{"name":"唐僧","sex":"女性","age":30}]

3. 3番目のパラメータ「Wu Yong」

非常に役に立たないパラメータで、基本的には決して使用されませんが、状況によって異なります。

varデータ = [
    {名前: "Wukong", 性別: 1, 年齢: 30},
    {名前: "Bajie", 性別:0, 年齢:20},
    {名前: "Tang Monk"、性別: 1、年齢: 30}
];

var str_json = JSON.stringify(data,["名前","性別"],"\t");
コンソールにログ出力します。
/*
[
	{
		"名前": "悟空",
		「セックス」: 1
	},
	{
		"名前": "バジエ",
		「性別」: 0
	},
	{
		"名前": "唐僧",
		「セックス」: 1
	}
]
*/

わからない場合は、APIを確認してください

developer.mozilla.org/en-US/docs/…

要約する

JSON.stringify の使い方に関するこの記事はこれで終わりです。JSON.stringify の使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Iframe の内外のページで JS がどのように動作するかの概要
  • JS で if 判定をスムーズに行う方法
  • JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明
  • Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)
  • JavaScript JSON.stringify() の使用法の概要
  • JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明
  • json.stringify() と json.parse() の違いと使い方
  • Selenium+BeautifulSoup+jsonはスクリプトタグ内のjsonデータを取得します
  • JavaScript のカンマ式が含まれている場合について

<<:  Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

>>:  Win10 での MySQL 8.0 ログインでユーザー 'root'@'localhost' のアクセスが拒否される (パスワード使用: YES) 問題の解決方法

推薦する

Apple Watchのインタラクションデザインにおける4つの全く異なる体験が明らかに

今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを...

ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明

この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...

CSS で放射状グラデーションを使用してカード効果を実現する

数日前、同僚がポイントモールプロジェクトを受け取りました。このプロジェクトには、カードやクーポンをギ...

Windows サーバー管理におけるセキュリティの考慮事項

ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...

MySQLの場合の使用例分析

まず、データベース テーブルを作成します。 テーブル `t_demo` を作成します ( `id` ...

nginx プロキシでの複数の 302 応答の解決策 (nginx Follow 302)

proxy_intercept_errors と recursive_error_pages を使...

Vueは秒殺しのカウントダウンコンポーネントを実装する

この記事では、2番目のキルカウントダウンコンポーネントを実装するためのVueの具体的なコードを参考ま...

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...

React スキャフォールディングの構築方法を学ぶ

1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...

MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析

この記事では、MySQL での重複キー更新時の replace into と insert into...

MySQLデータベースを定期的に自動バックアップする方法

データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...

mysql charset=utf8 本当に意味が分かりますか

1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...

MySQL の高可用性アーキテクチャの完全な説明: MHA アーキテクチャ

目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...