templates前端循环前端for in循环

转载

mob64ca13fe9c58 2024-06-29 11:55:37

文章标签 templates前端循环数组字符串 Code 文章分类 机器学习人工智能

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 循环

templates前端循环前端for in循环_字符串

templates前端循环前端for in循环_数组_02

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
    });

详细用法介绍：

templates前端循环前端for in循环_字符串

templates前端循环前端for in循环_数组_02

// 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() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

templates前端循环前端for in循环_字符串

templates前端循环前端for in循环_数组_02

<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

详细用法介绍：

templates前端循环前端for in循环_字符串

templates前端循环前端for in循环_数组_02

<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

详细用法介绍：

templates前端循环前端for in循环_字符串

templates前端循环前端for in循环_数组_02

// 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 遍历数组：

templates前端循环前端for in循环_数组_11

示例2 遍历对象

templates前端循环前端for in循环_数组_12

原生方法实现如下：

templates前端循环前端for in循环_字符串

templates前端循环前端for in循环_数组_02

// 通过字面量方式实现的函数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()

测试下：

数组类型：

templates前端循环前端for in循环_字符串_15

对象类型：

templates前端循环前端for in循环_Code_16

类数组类型：

templates前端循环前端for in循环_字符串_17

增加退出循环条件:

templates前端循环前端for in循环_字符串

templates前端循环前端for in循环_数组_02

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

templates前端循环前端for in循环_字符串_20

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：python循环语句中的计数器与累加器是什么意思 python for计数器

下一篇：es keywordarray查询 es script查询

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯