for循环往数组中添加复杂数据类型/引用型数据类型

最新推荐文章于 2023-01-29 15:52:20 发布

范儿斯

最新推荐文章于 2023-01-29 15:52:20 发布

阅读量671

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Leader_yuxi/article/details/127529850

版权

项目场景：

提示：这里简述项目相关背景：

项目场景：jsp项目中动态添加input输入框或者其它功能组件时,获取这些动态添加的功能组件的value值

问题描述

提示：这里描述项目中遇到的问题：
通过遍历动态id或class获取值组装到声明好的Object{}中push到数组中时,所有{}的属性值都是最后一列input的value值

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        var paramsList = [];
        var params = {};
        $(document).ready(function () {
            $(".btn1").click(function () {
             $(".test_1").remove();
             $(".age_1").remove();
            });

            $(".btn2").click(function () {
                for(var i=0;i<3;i++){
                    //把这个object写到循环里面或者深拷贝
                    console.log($(".test_"+i).val())
                    params['name']= $(".test_" + i).val();
                    params['age'] = $(".age_" + i).val();
                    console.log(params)
                    if(JSON.stringify(params)!="{}"){
                        // var newParams = JSON.parse(JSON.stringify(params))
                        paramsList.push(params)
                    }                  
                    console.log(paramsList)
                }
                              
            });
        });
    </script>
</head>

<body>
    <input class="test_0" type="text">
    <input class="age_0" type="text">
   
    <br>
    <input class="test_1" type="text">
    <input class="age_1" type="text">

    <br>
    <input class="test_2" type="text">
    <input class="age_2" type="text">

    <button class="btn1">删除</button>
    <button class="btn2">提交</button>
</body>

</html>

在这里插入图片描述

原因分析：

提示：这里填写问题的分析：
把params变量声明到循环外面导致push到paramsList中的始终是同一指针,那么当遍历结束时这个引用数据类型的值会被for循环的最后一组值覆盖从而导致push到paramsList中的params指针指向数据值一样打印出来的paramsList中的每一位值都一样

解决方案：

提示：这里填写该问题的具体解决方案：
可以把params声明到循环里面,或者特殊情况下深拷贝

 $(".btn2").click(function () {
  for(var i=0;i<3;i++){
        var params = {};在这里插入代码片
        //把这个object写到循环里面或者深拷贝
        console.log($(".test_"+i).val())
        params['name']= $(".test_" + i).val();
        params['age'] = $(".age_" + i).val();
        console.log(params)
        if(JSON.stringify(params)!="{}"){
            // var newParams = JSON.parse(JSON.stringify(params))//深拷贝
            paramsList.push(params)
        }                  
        console.log(paramsList)
    }
                  
});

在这里插入图片描述