简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
javascript - json数据修改
黄舟
黄舟 2017-04-11 11:56:50
0
2
308
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
</head>
<body>
    <p id="test"></p>
    <script>
        var p=[
            {
                'name':'lisi',
                'items':[
                {
                    'datas':[
                        {'sta':'ab','data':'123456'},
                        {'sta':'ac','data':'234567'},
                        {'sta':'ad','data':'345678'},
                        {'sta':'ae','data':'456789'}
                    ]
                }
                    
                ],
            },
            {
                'name':'zhangsan',
                'items':[
                    {
                        'datas':[
                            {'sta':'wq','data':'345436'},
                            {'sta':'we','data':'678789'},
                            {'sta':'ws','data':'909855'},
                            {'sta':'wa','data':'123567'}
                        ]
            
                    },
                    {
                        'datas':[
                            {'sta':'zz','data':'345'},
                            {'sta':'xx','data':'679'},
                            {'sta':'cc','data':'855'},
                            {'sta':'vv','data':'567'}
                        ]
                    }
                    
                ]
            }
        ]
        var p3=[];
        p.forEach(function(item){
            p3.push({
                'name':item.name,
                'items':item.items
            })
        })

        p3[1].name = 'jack';
        p3[1].items[1].datas[0].sta = 'ROSE';
        console.log(p);
        console.log(p3);
    </script>
</body>
</html>

把p中的数据存入p3,修改p3中的数据不影响p中的数据。
上面我写的p3[1].name = 'jack';不影响p[1].name,但当我修改p3中的datas中的sta值时，p中的datas中的sta也改变了，问题出在哪了，应该怎么改？

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全員に返信(2)
Peter_Zhu
Peter_Zhu2017-04-11 11:58:50 2棟

原因就像上面说的。
简单一点的话，通过JSON.parse(JOSN.stringify())来快速复制一个对象，通过操作这个对象来实现效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
</head>
<body>
    <p id="test"></p>
    <script>
        var p=[
            {
                'name':'lisi',
                'items':[
                {
                    'datas':[
                        {'sta':'ab','data':'123456'},
                        {'sta':'ac','data':'234567'},
                        {'sta':'ad','data':'345678'},
                        {'sta':'ae','data':'456789'}
                    ]
                }
                    
                ],
            },
            {
                'name':'zhangsan',
                'items':[
                    {
                        'datas':[
                            {'sta':'wq','data':'345436'},
                            {'sta':'we','data':'678789'},
                            {'sta':'ws','data':'909855'},
                            {'sta':'wa','data':'123567'}
                        ]
            
                    },
                    {
                        'datas':[
                            {'sta':'zz','data':'345'},
                            {'sta':'xx','data':'679'},
                            {'sta':'cc','data':'855'},
                            {'sta':'vv','data':'567'}
                        ]
                    }
                    
                ]
            }
        ]
        var new_p=JSON.parse(JSON.stringify(p));
        var p3=[];
        new_p.forEach(function(item){
            p3.push({
                'name':item.name,
                'items':item.items
            })
        })

        p3[1].name = 'jack';
        p3[1].items[1].datas[0].sta = 'ROSE';
        console.log(p3);
        console.log(new_p);
        console.log(p);
    </script>
</body>
</html>
いいねを押す +0
返信を追加
阿神
阿神2017-04-11 11:58:50 1棟

1.基本类型和引用类型的问题。
2.深复制和浅复制的问题
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！