jQueryのコピーオブジェクトの詳細な説明

jQueryのコピーオブジェクトの詳細な説明

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <script src="jquery.min.js"></script>
    <スクリプト>
        $(関数() {
            //1、通常のコピー、デフォルトでは浅いコピー var targetObj = {};
            var obj = {
                id: 1,
                名前: 「アンディ」
            };
            $.extend(targetObj, obj); //コピー構文、obj内の属性と属性値をtargetObjの空のオブジェクトにコピーします console.log(targetObj); //出力結果はobjオブジェクトの内容です //2.コピーしたオブジェクトに属性と属性値がある場合 var targett = {
                id: 0,
                グシュグ: 55
            };
            var objrr = {
                id: 1,
                名前: 「アンディ」
            };
            ターゲットを拡張します。
            console.log(targett); // コピーオブジェクトtargettのプロパティがコピーオブジェクトobjrrのプロパティと同じ場合、objrrのプロパティ値はtargettのプロパティ値を上書きします // コピーオブジェクトtargettのプロパティがコピーオブジェクトobjrrのプロパティと異なる場合、上書きされず、コピーオブジェクトobjrrのプロパティは後から追加されます // 3. コピーオブジェクトにオブジェクトがある場合の浅いコピー var taytuj = {
                id: 0,
                メッセージ: {
                    性別: '男性'
                }
            };
            var 戻り値 = {
                id: 1,
                名前:「アンディ」、
                メッセージ: {
                    年齢: 18
                }
            };
            $.extend(true, 長さ, レート);
            console.log(テイトゥジ);
            // 実行プロセス:
            //1. 両方のオブジェクトはメモリスタックにあり、reteオブジェクト内のmsg: {age: 18}オブジェクトはメモリヒープに配置されます。浅いコピーでは、reteオブジェクトのmsg: {age: 18}がtaytuオブジェクトのmsg: {sex: 'male'}を上書きし、属性値はメモリヒープ内のmsg: {age: 18}オブジェクトを指す16進数になります。このとき、スタックスペース内の2つのオブジェクトのmsgは、メモリヒープ内のmsg: {age: 18}を指す同じ16進アドレスを持っているため、浅いコピーが完了すると、2つのオブジェクトのmsg属性値のいずれかが変更されると、もう一方のmsgの属性値も一緒に変更されます。//浅いコピー:
            //1. 属性名が同じ場合、コピーされたオブジェクトはコピーされたオブジェクトを上書きし、順序は常に最後のものが最初になります。 //2. 属性名が異なる場合は、マージされます。 //ディープ コピー:
            //1. 属性名が同じ場合、コピーされたオブジェクトの属性と属性値は、コピーされたオブジェクトの属性と属性値を上書きし、ソートは常に新しいものから高いものへ行われます。 //2. 属性名が異なる場合、それらは結合されます。 //3. コピーされたオブジェクトとコピーされたオブジェクト内のオブジェクトのオブジェクト名が同じで属性名が異なる場合、それらは上書きされるのではなく結合されます。
        })
    </スクリプト>
</head>
<本文>
</本文>
</html>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • jQueryは$.extend(true,object1, object2);を使用してディープコピーオブジェクトメソッド分析を実装します。
  • jQuery ディープコピー Json オブジェクトの簡単な例
  • jQuery でテーブルデータの値をコピーして分割する
  • jQuery の $.extend の浅いコピーと深いコピー

<<:  コードを通じてHTMLエスケープ文字を識別する方法について説明します

>>:  Web データ ストレージ: Cookie、UserData、SessionStorage、WebSqlDatabase

推薦する

HTMLの基本概念の詳細な説明

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 •HTML...

ブラインドの特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...

フロントエンドパフォーマンス最適化に関する補足記事

序文私は、Web サイトのフロントエンド パフォーマンス最適化のための JavaScript と C...

Alibaba Cloud centos7にmysql8.0.22をインストールする詳細なチュートリアル

1. MySQLインストールパッケージをダウンロードするまず、https://dev.mysql.c...

Python MySQL データベース テーブルの変更とクエリ

Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...

Vue3 ページ、メニュー、ルートの使用

目次1. メニューをクリックしてジャンプ1. ページ名の統一2. 管理ページを追加3. ルートを追加...

CentOS7 ファイアウォールとオープンポートの簡単な使い方の簡単な紹介

概要(公式にはより詳しい説明があります) Firewalld は、ネットワーク接続またはインターフェ...

XAML でボタンを円として再描画する方法

XAML レイアウトを使用する場合、インターフェイスを Metro 風にするために、一部のボタンでは...

MySql はデータを正常に挿入しますが、[Err] 1055 エラーが報告されます。解決策

1. 質問:最近、挿入操作を行っています。MySQLのバージョンは5.7です。挿入は成功しますが、エ...

SQL 実装 LeetCode (185. 部門内で最も給与の高い上位 3 名)

[LeetCode] 185. 部門別給与上位3位従業員テーブルにはすべての従業員が保持されます。...

JSベースの手持ち連射機能+テキスト揺れ特殊効果コードの簡単実装

少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...

docker-compose ネットワーク設定についての簡単な説明

ネットワーク使用チュートリアル公式サイト docker-compose.yml リファレンスドキュメ...

MySQL のデータ型とフィールド属性の原理と使用法の詳細な説明

この記事では、MySQL のデータ型とフィールド属性について説明します。ご参考までに、詳細は以下の通...

Vueのキーボードイベントの詳細な説明

目次共通キーエイリアスエイリアスが指定されていないキーシステム修飾キーカスタムキーエイリアス要約する...

オブジェクト内のフィールドを削除する js メソッド

この記事では主に、オブジェクト内のフィールドを削除するための js の実装を紹介し、次のように共有し...