JS 数组遍历

最新推荐文章于 2025-06-10 09:47:25 发布

原创最新推荐文章于 2025-06-10 09:47:25 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

61 篇文章

订阅专栏

本文介绍了JavaScript中数组的相关操作和方法。包括foreach变量概念、求和、筛选元素等，指出foreach不能直接改变原数组内容且不返回内容；还讲解了map会返回回调函数return内容组成的数组，以及some和every用于判断数组元素是否满足条件。此外，提及类数组转数组的ES6和ES5写法。

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

1、foreach变量概念

  var arr=[1,3,5,7,9];
        //数组的元素,当前下标,数组自身
        arr.forEach(function (item,index,arr) {
           console.log(item,index,arr);
        })

2、foreach求和

	    var arr=[1,3,5,7,9];
      //        求数组中所有元素的和
          var sum=0;
          arr.forEach(function (item) {
              sum+=item;
          });
          console.log(sum);

3、求数组中所有大于5的元素的数组

	    var arr=[1,3,5,7,9];
//        求数组中所有大于5的元素的数组
          var arr1=[];
          arr.forEach(function (t) {
              if(t>5){
                  arr1.push(t);
              }
          });
          console.log(arr1);

4、 foreach不能通过直接赋值改变原数组的内容


        var arr1=[];
        arr.forEach(function (item,index,arr) {
//             不能通过直接赋值改变原数组的内容
                item+=5;
               arr1.push(item+5);
       });

5、不满足条件输出undefined(数组不return undefined)

	    var arr=[1,3,5,7,9];
		var arr1=arr.map(function (item,index,arr) {
            if(item>5){
                return item+5;
            }
        });
        console.log(arr1);

map会返回回调函数中return 的内容组成数组,这个数组的长度与原数组相同
而且按照原数组对应的位置返回内容的
forEach,只遍历,不返回任何内容

     var goodsData=[
            {id:1001,icon:"img/03.jpg",goods:"德国DMK进口牛奶 欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒",info:"1L*12",nowPrice:139,initPrice:156,sold:0.5},
            {id:1002,icon:"img/04.jpg",goods:"帮宝适(Pampers)超薄干爽绿帮纸尿裤L164片(9-14kg)大码 尿不湿箱装",info:"L【9-14kg】",nowPrice:225,initPrice:275,sold:0.5},
            {id:1003,icon:"img/05.jpg",goods:" 意大利进口 百乐可（BALOCCO） 千层酥饼 脆皮酥薄脆饼干 焦糖味 200g",info:"焦糖脆皮酥200g",nowPrice:27.9,initPrice:40,sold:0.5},
            {id:1004,icon:"img/06.jpg",goods:"百草味 坚果零食干果 每日坚果 奶油味夏威夷果200g/袋（内含开果器）",info:"夏威夷果奶油味200g/袋",nowPrice:16.9,initPrice:30,sold:0.5},
            {id:1005,icon:"img/07.jpg",goods:"三星 Galaxy S10 8GB+512GB炭晶黑（SM-G9730）3D超声波屏下指纹超感官全视屏骁龙855双卡双待全网通4G游戏手机 ",info:"炭晶黑\n8GB+512GB",nowPrice:7699,initPrice:9899,sold:0.5},
            {id:1006,icon:"img/01.jpg",goods:"罗技（G）G102 游戏鼠标 8000DPI RGB鼠标 黑色 吃鸡鼠标 绝地求生",info:"G102有线游戏鼠标 黑色",nowPrice:119,initPrice:146,sold:0.5},
            {id:1007,icon:"img/02.jpg",goods:"联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑( i5-8300H 8G 512G SSD GTX1050 黑)",info:"Y7000【1050 i5 512",nowPrice:5699,initPrice:6200,sold:0.5}
        ];
//        遍历后给每个对象增加num属性和sum属性
        goodsData.forEach(function (t) {
            t.num=parseInt(Math.random()*10);
            t.sum=(t.num*t.nowPrice).toFixed(2)+"元";
        });
//          遍历后,创建新的对象,这个对象获取的值根据goodsData的内容获取
        var list=goodsData.map(function (t) {
            return {
                id:t.id,
                goods:t.goods,
                price:t.nowPrice,
                num:t.num,
                sum:parseFloat(t.sum)>1000 ? "1000元" : t.sum
            }
        });
        console.log(list);

* some 判断数组中元素是否满足条件,如果有一个满足条件就返回true,否则返回false
* every 判断数组中所有元素是否满足条件,如果有一个不满足,直接跳出返回false

var arr=[3,4,5,6,1,2,3];
//
// var bool=arr.some(function (t) {
//// 满足这个条件,就不继续向下遍历,直接返回true
// return t>7;
// });
// console.log(bool);

// var bool=arr.every(function (t) {
// return t>5;
// });
// console.log(bool);

// var checks=document.getElementsByName("hobby");
// 将类数组的列表转换为数组,ES6的写法
// checks=Array.from(checks);
// 硬背,就这样写,ES5
// checks=Array.prototype.slice.call(checks);
// console.log(checks);