zoukankan html css js c++ java

【前端-JavaScript】10种遍历方法

JavaScript之10种遍历方法

1. for 循环

for循环语句，最基础的遍历，以数组的下标为索引，主要对数组元素进行遍历。

注意：for 循环不是函数，不存在返回值。

var arr = [1,2,'zhejiang',true];
    for(var i=0 ;i<arr.length;i++){
        console.log(arr[i])     // i=0 1 2 3
    }

2. for in

for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value, 当用它来遍历数组时候，多数情况下也能达到同样的效果，但是你不要这么做，这是有风险的，

因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：'52'+1 = '521' 而不是我们需要的 53。

另外 for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，
所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。

<body>
<div class="item div1" id="dd1"></div>
<div class="item div2" id="dd2"></div>
<div class="item div3" id="dd3"></div>
<div class="item div4" id="dd4"></div>
<div class="item div5" id="dd5"></div>

<script>
    // for in循环不仅可以遍历数组，还可以遍历对象，
    // 但for in存在一些陷阱，比如它会在遍历完元素之后，还会对数组或对象的prototype中的属性进行遍历，
    // 所以，for in 更像是为对象遍历而设计的。

    let obj = {name:'zhou',age:18,gender:'男'};
    for(let i in obj){
        console.log(i,obj[i])
    }

    console.log("--------------------------------------------------------");
    let divObj= document.querySelectorAll('div');
    for(let i in divObj){
        console.log(i,divObj[i]);
        console.log(divObj[i].id);
    }
    /*总结：for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value, 当用它来遍历数组时候，多数情况下也能达到同样的效果，
    但是你不要这么做，这是有风险的，因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：'52'+1 = '521' 而不是我们需要的 53。

    另外 for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，
    所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。*/
</script>

3. whild 和 do while 循环

    let cars=["BMW","Volvo","Saab","Ford"];
    let i=0;
    for(;cars[i];){
        console.log(cars[i]);
        i++;
    }


    cars=["BMW","Volvo","Saab","Ford"];
    var i=0;
    while (cars[i]){
        console.log(cars[i] + "<br>");
        i++;
    };


    let j = 3;
    do{
        console.log(j);
        j--;
    }
    while(j>0)
    // 3
    // 2
    // 1

View Code

4. forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

let arr = [11,22,33];
    arr.forEach(function(i,index,arr0){
        console.log(i); //数组每一项
        console.log(index);     //数组下标
        console.log(arr0);  //该遍历的数组 arr
    });

详细用法介绍：

// let arr = [11,22,33];
    /*arr.forEach(function(i,index,arr0){
        console.log(i); //数组每一项
        console.log(index);     //数组下标
        console.log(arr0);  //该遍历的数组 arr
    });*/

    // ES6 箭头函数写法
    // arr.forEach(res =>{
    //     console.log(res);   //数组每一项
    // });

    /*// 一个小例子：修改产品的数量随机,求出每个产品的总价
    var data=[
        {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
        {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
        {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
        {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
        {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
        {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
        {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
        {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
        {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
        {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
    ];
    data.forEach(function (item) {
        item.num=parseInt(Math.random()*9+1);
        item.sum=item.num*item.price;
    });
    console.log(data);*/


    /*// 修改数组中的每个值
    var arr=[1,2,4,6,7,8,5,9];
    arr.forEach(function (t,i,arr) {
        //  t++;     //错误
        //  arr[i]++;    //数组中每一项

        //  将所有偶数+1
        if(t%2===0){
            arr[i]++;
        }
    });
    console.log(arr);*/

View Code

5. for of (ES6)

for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，不允许遍历对象
它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。

<script>
    // for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，不允许遍历 对象
    // 它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。

    /*注意：1、 for(var k of arr) 中的 k ，就是数组 arr 中的元素，而不是数组的下标。
        2、 IE 不支持，Edge支持。*/

    let arr = ['name','age'];
    for(let i of arr){
        console.log(i)
    }
    for(let i of 'zhejiang'){
        console.log(i);
    }
    
    /*// 不能遍历对象，下面写法错误
    let obj1 = {name:'xiong',age:18};
    for(let i of obj1){
        console.log(i);
    }*/
</script>

6. Array map()方法

map()与forEach相似,可以完成forEach的所有功能。

map() 返回一个新数组。
map() 不会对空数组进行检测。
map() 不会改变原始数组。

注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。

    //map()遍历
    /*var arr = [1, 2, 4, 6, 7, 8, 5, 9];
    arr.map(function (t) {
        console.log(t);     //1 2 4 6 7 8 5 9
    });*/

    /*// map()与forEach相似,可以完成forEach的所有功能
    var data = [
        {id: 1001, icon: "img/1.png", name: "餐饮0", num: 1, price: 10},
        {id: 1002, icon: "img/2.png", name: "餐饮1", num: 1, price: 20},
        {id: 1003, icon: "img/3.png", name: "餐饮2", num: 1, price: 30},
        {id: 1004, icon: "img/4.png", name: "餐饮3", num: 1, price: 40},
        {id: 1005, icon: "img/5.png", name: "餐饮4", num: 1, price: 50},
        {id: 1006, icon: "img/6.png", name: "餐饮5", num: 1, price: 60},
        {id: 1007, icon: "img/7.png", name: "餐饮6", num: 1, price: 70},
        {id: 1008, icon: "img/8.png", name: "餐饮7", num: 1, price: 80},
        {id: 1009, icon: "img/9.png", name: "餐饮8", num: 1, price: 90},
        {id: 1010, icon: "img/10.png", name: "餐饮9", num: 1, price: 100}
    ];
    data.map(function (item) {
        item.num = parseInt(Math.random() * 9 + 1);
        item.sum = item.num * item.price;
    });
    console.log(data);*/

    /*// 每个元素+1,返回给新数组
    var arr=[1,2,4,6,7,8,5,9];
    var arr1=arr.map(function (t) {
        return ++t;
    });
    console.log(arr,arr1);*/
    

    /*
   return 返回数据元素,到新数组中,如果不返回的数据就会变成undefined
    var arr=[1,2,4,6,7,8,5,9];
      arr=arr.map(function (t) {
          if(t%2===0){
              return t+1;
          }
          return t;      //如果没有这句，非奇数的返回为undefined
      });
       console.log(arr);*/


    /*  map() 和 forEach() 的区别
    *   forEach遍历当前数组,没有返回值,不会返回新数组
    *   map遍历当前数组,并且将当前数组中的元素返回给新数组,
    * 不使用return时,新数组的长度与原数组相同,但是每个元素都是undefined;
    * */

7. Array filter() 方法

filter 方法是 Array对象内置方法，它会返回通过过滤的元素，不改变原来的数组。

filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

<script>
    // filter 方法是 Array对象内置方法，它会返回通过过滤的元素，不改变原来的数组。
    // filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

    let arr = [1,2,3];
    let tt = arr.filter(function(i){
        return i>1;
    });
    console.log(tt);    //[2,3]
    console.log(arr);   //[1,2,3]

    var arr1 = ['A', 'B', 'C'];
    var r = arr1.filter(function (element, index, self) {
        console.log(element); // 依次打印'A', 'B', 'C'
        console.log(index); // 依次打印0, 1, 2
        console.log(self); // self就是变量arr1
        return true;
    });


    // 利用filter，可以巧妙地去除Array的重复元素：
    // 去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。
    var r, arr2 = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
    r = arr2.filter(function (element,  index, self) {
        return self.indexOf(element) === index;
    });
    console.log(r);



    // 用filter()筛选出1-100之间所有素数：
    function get_primes(arr) {
        var i;
        return arr.filter(function (element) {
            var flag=true;
            if(element<2){
                flag=false;
            }else {
                for(var i=2;i<element;i++){
                    if (element%i==0){
                        flag=false;
                        break;
                    }
                }
            }
            return flag;
        });
    }

    var arr3 = [];
    for (var x = 1; x < 100; x++) {
        arr3.push(x)
    }
    console.log(get_primes(arr3));  //[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]
</script>

View Code

8. Array some() 方法

some() 方法用于检测数组是否存在元素满足指定条件（函数提供）。只要有一个元素满足则返回true，并不再继续往下判断,不改变原数组。

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// 检测数组中元素是否都大于1
// true

详细用法介绍：

<script>
    /*
     // some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。只要有一个元素满足则返回true，并不再继续往下判断。
    // arr.some(callback(element[, index[, array]])[, thisArg])
    let arr = [1,2,3];
    let tt = arr.some(function(i){
        return i>1;
    });
    console.log(tt);    //false*/


    /*const a = [11, 50, 40, 3, 5, 80, 90, 4];
    const arr1 = [];
    let ret1 = a.some((item, index, array) => {
        console.log(item, index, array);
        if (item > 80) {
            return arr1.push(item);
        }
    });
    console.log('ret1===>',ret1);   //ret1===> true
    console.log('arr1---',arr1);    //arr1--- [90]*/


    // function isBiggerThan10(element, index, array) {
    //     return element > 10;
    // }
    // [2, 5, 8, 1, 4].some(isBiggerThan10); // false


    //二、 判断数组元素中是否存在某个值
    // 模仿 includes()方法, 若元素在数组中存在, 则回调函数返回值为 true :
    var fruits = ['apple', 'banana', 'mango', 'guava'];
    var fruitsNew = [];

    function checkAvailability1(arr, val) {
        return arr.some(item => {
            console.log(item);
            return val == item
        })
    }

    console.log(checkAvailability1(fruits, 'kela')); // false
    console.log(checkAvailability1(fruits, 'banana')); // true


    // 三、根据条件截取更新数据
    function checkAvailability2(val) {
        fruits.some((item, i) => {
            if (item == val) {
                fruits.splice(i, 1)
            }
        })
    }
    checkAvailability2('banana');
    console.log(fruits);    //  ["apple", "mango", "guava"]

</script>

View Code

9. Array every() 方法

every() 方法用于检测数组中是否所有元素都符合指定条件（通过函数提供），返回 boolen。

let arr = [1,2,3];
let tt = arr.every(function(i){
 return i>1;
})
// false

详细用法介绍：

// every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
// some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

    function isBigEnough(element, index, array) {
        return (element >= 10);
    }

    var passed = [12, 5, 8, 130, 44].every(isBigEnough);
    console.log(passed);

    //检查数组每一项 是否都是偶数
    function CheckIfEven(value, index){
        console.log(value);
        if(value % 2 == 0){
            return '偶数';        //回到函数的返回值没有必要非得是true本身，只要可以转换为true即可，对于false也是如此。
        }
    }
    let numbers=[2, 4, 5, 6, 8];

    if(numbers.every(CheckIfEven)){
        console.log("全都是偶数");
    }
    else{
        console.log("不全都是偶数");
    }

View Code

10. JQuery方法 $.each

each() 方法为每个匹配元素规定要运行的函数。JQuery的each方法既可以遍历数组，也可以遍历对象。在遍历对象时可以很容易获取对象属性名。

语法：jQuery.each(object, [callback])

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

示例1 遍历数组：

示例2 遍历对象

原生方法实现如下：

// 通过字面量方式实现的函数each
var each =  function(object, callback){
  var type = (function(){
          switch (object.constructor){
            case Object:
                return 'Object';
                break;
            case Array:
                return 'Array';
                break;
            case NodeList:
                return 'NodeList';
                break;
            default:
                return 'null';
                break;
        }
    })();
    // 为数组或类数组时, 返回: index, value
    if(type === 'Array' || type === 'NodeList'){
        // 由于存在类数组NodeList, 所以不能直接调用every方法
        [].every.call(object, function(v, i){
            return callback.call(v, i, v) === false ? false : true;
        });
    }
    // 为对象格式时,返回:key, value
    else if(type === 'Object'){
        for(var i in object){
            if(callback.call(object[i], i, object[i]) === false){
                break;
            }
        }
    }
}

原生JS仿写jquery 实现$.each()

测试下：

数组类型：

对象类型：

类数组类型：

增加退出循环条件:

var obj= {name:'box', color: 'red', size:'big', number: '100',}
each(obj, function(i, v){
  if(i === 'color'){ 
    console.log('箱子的颜色是，'+v+'');
    return true;
  }
  if(i === 'size' && v=== 'big'){
    console.log('型号，数量符合收货');
    return false;
  }
  console.log(i + ': ' + v);
});

View Code

查看全文

相关阅读:
开源项目
 [Accessibility] Missing contentDescription attribute on image [可取行]失踪contentDescription属性图像
 Android 布局中实现适应屏幕大小及组件滚动
 EF 错误记录
 EasyUI 加载时需要显示和隐藏 panel(面板)内容破版问题
 IE 报表缩放后页面破版
 VS 2017 引入nuget 问题
 SSRS 报表显示页面 asp net session丢失或者找不到 asp net session has expired or could not be found()
log4net 配置
 网站

原文地址：https://www.cnblogs.com/XJT2018/p/11283609.html