JS 数组赋值,引用传递 问题

项目中遇到 JS 数组赋值问题,被赋数组 修改了也会改变 源数组。

案例一:

var a = [1,2,3,4];
var b= [];
b = a;

这个不是把值赋值过去而是 b 作为 a 的引用,b 改变的是 a
如何 b 指向的是一个新数组,a 把元素值全部赋值过去?


1、普通数组可以使用 
 var b = [].concat(a);


2、对象数组比较复杂。


案例二:

   一个jquery对象类型的数组是 [Object(Array)] 类型,其拼接的数组字符串为:

[{
                name: 'Berlin-new',
                type: 'column',
                id: 'berlin', 
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            },{
                name: 'Tokyo-new',
                type: 'spline', 
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]


想将 array 赋给 array2,然后将 array2 中的 data 截取一部分,返回 array2。

var array2= [].concat(array);
                $.each(array2, function (i, obj) {
                    var data = obj.data;
                    obj.data = data.slice(data.length - num, data.length);
                });

这样截取成功,但仍然影响 array 本身的 data;
采用 var arr = $.makeArray( obj );后仍不起作用;


最后用循环创建新数组解决

var result = [];        
$.each(array, function (i, obj) {
            var c = {};   
          $.each(obj, function (key, val) {
                if (key == 'data') {  
                   c[key] = val.slice(val.length - num, val.length);
                } else {  
                   c[key]=val;
                }

            }) ;

            result.push(c);

        });



案例三:

var a = [1,2,3];
var b = a;
a = [4,5,6];
alert(b);  //[1,2,3]
===========================================

 var a = [1,2,3];
var b = a;
a.pop();
alert(b);  //[1,2]

解析:

 



参考资料:

https://www.cnblogs.com/johnblogs/p/7218344.html

https://www.cnblogs.com/songzk/p/6081883.html


  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在 Vue 中,可以通过使用 `props` 属性和 `v-bind` 指令来将数据从父组件传递到子组件。如果你需要将一个数组传递给子组件,并在子组件中进行操作,可以尝试以下步骤: 1. 在父组件中定义一个数组,并将其作为 `props` 传递给子组件: ```vue <template> <div> <child-component :items="items"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { items: ['item1', 'item2', 'item3'] } } } </script> ``` 2. 在子组件中定义 `props`: ```vue <template> <div> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> </div> </template> <script> export default { props: { items: { type: Array, required: true } } } </script> ``` 在子组件中,我们使用了 `v-for` 指令来遍历 `items` 数组,并将每个元素渲染为一个列表项。通过这种方式,我们可以将父组件中的数组传递给子组件,并在子组件中进行操作。 ### 回答2: 在Vue中,可以通过props属性将父组件的数据传递给子组件。如果要将一个数组赋值给子组件的props,可以使用v-bind指令。 首先,在父组件中定义一个数组,例如: ``` data() { return { myList: [1, 2, 3, 4, 5] } } ``` 然后,在父组件的模版中,使用子组件并将数组传递给它的props,例如: ``` <template> <div> <child-component :list="myList"></child-component> </div> </template> ``` 在子组件中,通过props接收父组件传递的数组,并可以在子组件中使用它,例如: ``` <template> <ul> <li v-for="item in list" :key="item"> {{ item }} </li> </ul> </template> <script> export default { props: ['list'] } </script> ``` 这样,父组件的myList数组就会被传递给子组件的list props,并且子组件可以在模版中使用v-for指令来循环渲染该数组的每一项。 需要注意的是,当父组件的数据更新时,子组件也会自动更新,因为Vue会自动监听父组件数据的变化,并及时更新子组件的props。这种响应式数据流是Vue的特性之一,使得组件之间的数据传递和同步变得非常方便。 ### 回答3: 在Vue中,父组件给子组件数组赋值的方法有多种。以下是其中一种实现方式。 首先,在父组件的模板中,可以使用v-bind指令将父组件的数组数据传递给子组件。假设子组件的标签名称为"child-component",父组件的数组数据为"parentData",可以将数组数据绑定到子组件的props中。 父组件模板中的代码: ```html <child-component v-bind:child-data="parentData"></child-component> ``` 在子组件中,可以通过props来接收父组件传递的数组数据。 子组件中的代码: ```javascript props: { childData: Array }, ``` 接下来,如果需要修改子组件的数组数据,可以使用Vue的响应式方法。在子组件中,对接收到的数组进行修改,例如增加或删除元素。 子组件中的代码: ```javascript methods: { addChildItem: function() { this.childData.push("新增元素"); }, removeChildItem: function(index) { this.childData.splice(index, 1); } } ``` 当父组件的数组数据发生变化时,子组件的数组数据也会相应地更新。 需要注意的是,由于Vue的响应式特性,应该避免直接修改props中的数据,因为这会引发Vue的警告。如果需要修改父组件传递给子组件的数组数据,可以在子组件中使用计算属性或者watch来监听父组件的数据变化,并返回新的数组数据。 以上就是Vue中父组件对子组件数组赋值的实现方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值