js 循环遍历总结（for，for..in, for..of,while ,do..while ,forEach,map()）

最新推荐文章于 2022-08-13 18:08:45 发布

wkeyang

最新推荐文章于 2022-08-13 18:08:45 发布

阅读量545

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/wkeyang/article/details/89175472

版权

js常用的循环遍历：

for()
for..in
for..of
while
do..while
forEach
map()

for()循环

简介：

for有三个表达式：①声明循环变量；②判断循环条件；③更新循环变量；
三个表达式之间，用";"分割，for循环三个表达式都可以省略，但是两个";"缺一不可。
for循环的执行特点：先判断再执行，与while相同
for循环三个表达式都可以有多部分组成，第二部分多个判断条件用&&(并) ||（或）连接，第一三部分用逗号分割；
for循环更适用于循环的开始和结束已知，循环次数固定的场合;

for循环语法：

for（变量=开始值;变量<=结束值;变量=变量+步进值）{

循环语句

}

for循环实例：

简单的for循环
    //简单的for循环实例

    for(let i = 0 ; i<=5 ; i++){
        console.log(i)   // 0 1 2 4 5
    }
求 1+2+3+4+…+100 的总和
   // 求 1+2+3+4+…+100 的总和

    let sum = 0;
    for(let i = 0  ; i<=100 ; i++){
        sum = sum + i;  /*等价于sum += i;但是不建议这么写, 因为sum = sum + i看起来更清楚、更舒服*/
        console.log(sum) // 结果为5050
    }

for..in

简介：

for-in 循环用于遍历一个集合里面的所有元素，例如由数字表示的区间、数组中的元素、字符串中的字符。
for in这种循环i是string类型的
作用于数组的for-in循环体除了遍历数组元素外，还会自身可枚举属性
如果给对象的原型加上方法，for in这种循环会把数组原型链上的属性都能被访问到。
在某些情况下，这段代码可能按照随机顺序遍历数组元素。
简而言之，for-in是为普通对象设计的，你可以遍历得到字符串类型的键，因此不适用于数组遍历。

注：json只能用for in循环，因为json的下标是没有规律的字符串，没有length。

for...in语法：

for（变量 in 对象）{

执行语句

}

for..in实例

循环数组
   //循环数组

    var Arr = new Array()
    Arr[0] = "Saab"
    Arr[1] = "Volvo"
    Arr[2] = "BMW"

    for (let x in Arr)
    {
       console.log(Arr[x]) // 输出为 Saab Volvo BMW
       console.log(x)    // 输出为 0 1 2
    }
循环对象
   //循环对象

    var obj = {
        w: "wen",
        j: "jian",
        b: "bao"
    }
    for(var v in obj){
      console.log(obj[v])   //输出为 wen jian bao
      console.log(v)         // 输出为 w j b

    }

for..of

简介：

推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
for...in循环出的是key，for...of循环出的是value
注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

for..of 语法

for( 自定义一个值 of 数组 ){

执行语句

}

实例：

简单的数组
    var arr = ['nick','freddy','mike','james'];
    for(var x of arr){
        console.log(x);  // 输出为 nick  freddy mike james
    }
    //for in
    for(var x in arr){
        console.log(x)  // 输出为 0 1 2 3
    }
实例二
 var arr = [
        { name:'nick', age:18 },
        { name:'freddy', age:24 },
        { name:'mike', age:26 },
    ];
    for(var x of arr) {
        console.log(x.name, item.age);
        //输出为 nick，18
        //      freddy，24
        //       mike, 26
    }
    //for in
    for(var x of arr) {
        console.log(x.name, x.age);
    //报错 x在这里指的是key值 name
    }

while循环

简介：

While 循环会在指定条件为真时循环执行代码块；
使用 break 语句来跳出循环，使用continue 语句用于跳出当前的迭代，并开始下一次迭代。

语法：

while（判断条件）{

执行代码

}

实例：

求1+2+···+100的和
    // 求1到100之间的数字和
    var n1=1;
    var sum=0;
    while(n1>=1 && n1<=100){
        sum=sum+n1;
        n1++;
    }
    console.log(sum); //输入为5050
当等于3跳出循环
    var text = "";
    var i = 0;
    while (i < 5) {
        text += "<br>The number is " + i;
        i++;
        if (i == 3) {
            break;
        }
        console.log(i) // 1 2
    }
    console.log(i)  // 3
当等于3时跳过该循环
    var text = "";
    var i = 0;
    while (i < 5) {
        i++;
        if (i == 3) {
            continue;
        }
        text= i;
        console.log(text)  // 1 2 4 5 
    }

do..while

简介：

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

语法：
do
  {
        需要执行的代码
  }
while (条件);
实例：

求1+2+···+100的和
    // 求1到100之间的数字和
    var n1=1;
    var sum=0;
    do{
        sum=sum+n1;
        n1++;
    }
    while (n1>=1 && n1<=100)
    console.log(sum)

forEach循环

简介：

forEach:用来遍历数组中的每一项；这个方法执行是没有返回值的，对原来数组也没有影响；
无法使用break等语句跳出遍历, 直到所有元素都传递给调用的函数, 但是可以使用抛出异常, 提前终止循环
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

语法：

array.forEach(function(currentValue, index, currentArray){ } , thisValue);

currentValue为数组当前item的一个副本，因此改变currentValue不会对原数组产生影响
可以通过currentArray与index改变原数组

实例：

计算数组所有元素相加的总和
    let sum = 0
    var arr = [1,2,3,4];
    arr.forEach(function(value,index,array){
        // array[index] == value;    //结果为true
        sum+=value;
        console.log(index,value)
        //输出结果是  0 1
        //           1 2
        //           2 3
        //           3 4
        console.log(array)  // [1,2,3,4]
    });
    console.log(sum);    //结果为 10

map（）

简介：

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。
map()方法按照原始数组元素顺序依次处理元素。
size()      获取Map元素个数
isEmpty()   判断Map是否为空
clear()     删除Map所有元素
put(key, value)   向Map中增加元素（key, value)
remove(key)       删除指定key的元素，成功返回true，失败返回false
get(key)          获取指定key的元素值value，失败返回null
element(index)    获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null
containsKey(key)  判断Map中是否含有指定key的元素
containsValue(value)  判断Map中是否含有指定value的元素
keys()      获取Map中所有key的数组（array）
values()    获取Map中所有value的数组（array）

语法：

array.map(function(当前元素的值,索引,数组), 执行函数)

实例：
 var users = [
        {name: "熊大", "email": "zhang@email.com"},
        {name: "熊二",   "email": "jiang@email.com"},
        {name: "光头强",  "email": "jiang@email.com"}
    ];
    // emails => email的数组
    var emails = users.map(function (user) { return user.email; });
    console.log(emails) // [zhang@email.com,jiang@email.com,jiang@email.com]