数组遍历,对象遍历

本文介绍了数组和对象的多种遍历方法,包括数组的forEach、map及$.each方法,以及对象的for...in循环、Object.keys与Object.getOwnPropertyNames等方法,并展示了如何利用这些方法来修改数组或获取对象属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数组的遍历

1.forEach

arr[].forEach(function(value,index,array) { } )

  • 参数:value是数组中的当前项,index是当前项的索引,array原型数组
  • 数组中有几项,那么传递进去的匿名回调函数就需要执行几次
  • 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以通过数组的索引来修改原来的数组
//foreach方法
    var arr = [12,23,24,42,1];
    var res = arr.forEach(function (item,index,input) {
     input[index] = item*10;
    })
    console.log(res);//-->undefined;
    console.log(arr);//-->[120,230,240,420,10]; 通过数组索引改变了原数组
//for方法
    var arr = [12,23,24,42,1];
    for(var i=0;i<arr.length;i++){
      arr[i] = arr[i] * 10;
    }
    console.log(arr);//-->[120,230,240,420,10]

2.map

arr[].map(function(value,index,array){ })

  • 参数:value数组中的当前项,index当前项的索引,array原始数组
    与foreach不一样的是,map的回调函数支持return返回值,
    并不影响原来的数组,只是把源数组克隆一份,把克隆的这一份的数组中的对影像改变了
    var arr = [12,23,24,42,1];
    var res = arr.map(function (item,index,input) {
     return item*10;
    })
    console.log(res);//-->[120,230,240,420,10]; 原数组拷贝了一份,并进行了修改
    console.log(arr);//-->[12,23,24,42,1]; 原数组并未发生变化

3.$.each

$.each(arr, function(index,value) {} )
参数: arr要遍历的数组,index当前像的索引,value数组中的当前项

    var arr = [12,23,24,42,1];
    var res = $.each(arr,function(index,value){
      arr[index] = value * 10;
    })
    console.log(arr); // [120, 230, 240, 420, 10]
    console.log(res); // [120, 230, 240, 420, 10]

对象的遍历

1.for in

主要用于遍历对象的可枚举属性,包括自有属性、继承自原型的属性

    var obj = {"name":"tom","sex":"male"};
    //增加不可枚举的属性age 
    Object.defineProperty(obj, "age", {value:"18", enumerable:false});
    //通过原型链增加属性,为一个函数
    Object.prototype.protoPer1 = function(){
      console.log("name is tom");
    };
    //通过原型链增加属性,为一个整型值2
    Object.prototype.protoPer2 = 2;
    for(var a in obj){
      console.log(a + ":" + obj[a]);
    }

Enumerable表示能否通过for-in循环返回属性
输出:

在这里插入图片描述

2.Object.keys(obj) \ Object.values(obj)

   var obj = {
    id:1,
    name:'zhangsan',
    age:18
    }
    console.log(Object.keys(obj)); //["id", "name", "age"]
    console.log(Object.values(obj)); //[1, "zhangsan", 18]

//遍历对象

    var obj = {
    id:1,
    name:'zhangsan',
    age:18
    }
    Object.keys(obj).forEach(function(key){
      console.log(obj);  
      console.log(key);
      console.log(obj[key]);
    })

输出:

在这里插入图片描述

3.使用Object.getOwnPropertyNames(obj)

    var obj = {
            id:1,
            name:'zhangsan',
            age:18
    }
    Object.getOwnPropertyNames(obj).forEach(function(key){
        console.log(key+ '---'+obj[key])
    })

在这里插入图片描述

<think>好的,我现在需要帮助用户解决在UniApp中遍历数组并向其中添加对象的问题。首先,我需要理解用户的需求。用户可能正在开发一个UniApp应用,遇到了数组处理的问题,特别是如何遍历现有数组并添加新对象。 接下来,我需要回顾UniApp的相关知识。UniApp基于Vue.js,所以数组操作应该遵循Vue的响应式规则。直接通过索引修改数组或修改数组长度可能不会触发视图更新,因此必须使用Vue提供的变异方法,比如push、splice等。 用户提供的引用中有提到引用[4],其中提到了main.js的初始化和组件注册,但更相关的可能是如何操作数组。根据引用[2],JS遍历数组有多种方法,如for循环、forEach、map等。但在Vue/UniApp中,需要注意这些方法是否保持响应式。 用户的问题是如何遍历数组并添加对象。可能的场景是,用户有一个数组,需要处理每个元素,然后添加新的对象到原数组或新数组中。例如,从API获取数据后处理并添加。 我需要考虑不同的遍历方法,比如forEach、map,然后展示如何正确添加对象。同时,要强调使用响应式的方法,避免直接赋值。例如,使用push方法或者splice来添加元素,确保视图更新。 此外,示例代码需要符合UniApp的环境,使用ES6语法,比如箭头函数、const/let声明变量。同时,说明为什么某些方法更合适,比如使用map生成新数组,或者修改原数组时使用forEach配合push。 还需要注意可能出现的常见错误,比如在遍历时直接修改原数组导致索引错乱,或者没有正确使用Vue的响应式方法导致视图不更新。需要提醒用户使用正确的方法,并给出最佳实践。 最后,整理步骤:遍历数组的方法,如何添加对象,响应式处理的注意事项,并提供示例代码。可能还需要对比不同方法的优缺点,帮助用户选择适合自己场景的方式。</think>在UniApp中遍历数组并添加对象的实现方法与Vue.js响应式规则一致,以下是具体实现步骤及注意事项: ### 一、基础实现方法 1. **使用`forEach`遍历并添加**(适合修改原数组) ```javascript const originArr = [{id: 1}, {id: 2}]; const newItems = []; originArr.forEach(item => { newItems.push({...item, active: false}); // 创建新对象 }); this.list = [...this.list, ...newItems]; // 通过赋值实现响应式更新[^4] ``` 2. **使用`map`生成新数组**(推荐方式) ```javascript this.list = [ ...this.list, ...this.list.map(item => ({ ...item, status: item.id > 5 ? 'VIP' : '普通' // 添加新属性 })) ]; ``` ### 二、响应式处理要点 - 必须使用`this.$set()`或数组变异方法(push/splice等)才能触发视图更新 - 禁止直接通过索引赋值:`arr[3] = newObj`(不会触发渲染) - 修改数组长度时需使用`splice` ### 三、完整组件示例 ```html <template> <view> <button @click="addUser">添加用户</button> <view v-for="(item,index) in userList" :key="item.id"> {{ item.name }} - 注册时间:{{ item.timestamp }} </view> </view> </template> <script> export default { data() { return { userList: [ { id: 1, name: '张三' }, { id: 2, name: '李四' } ] } }, methods: { addUser() { // 方法1:响应式push this.userList.push({ id: Date.now(), name: `用户${this.userList.length + 1}`, timestamp: new Date().toLocaleString() }); // 方法2:通过splice添加 /* this.userList.splice( this.userList.length, 0, { id: Date.now(), name: `用户${this.userList.length + 1}`, timestamp: new Date().toLocaleString() } ); */ } } } </script> ``` ### 四、特殊场景处理 **动态添加嵌套对象属性时:** ```javascript this.$set(this.userList[0], 'vipLevel', 3); // 正确方式 // 错误方式:this.userList[0].vipLevel = 3 ``` ### 五、性能优化建议 1. 大数据量时使用`虚拟列表`组件(如uni-list) 2. 批量更新时先处理数据再统一赋值: ```javascript const tempArr = [...this.userList]; // 批量处理操作... this.userList = tempArr; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值