javascript的循环语句,js循环的几种方式

本篇文章给大家谈谈javascript的循环语句，以及js循环的几种方式，希望对各位有所帮助，不要忘了收藏本站喔。

第一种：for循环，也是最常见的

最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
for (let i = 0; i < arr.length; i++) {
      console.log(arr[i]);
    }

打印结果：

第二种：优化版for循环

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
let len = arr.length
for (let i = 0; i < len; i++) {
      console.log(arr[i]);
    }

简要说明：使用临时变量，将长度缓存起来，避免重复计算数组长度，当数组较大时优化效果才会比较明显
缺点：不能在for循环中操作list的大小，比如除去或新加一个元素。
这种方法基本上是所有循环遍历方法中性能最高的一种

第三种：forEach（）

对于forEach方法除非使用try/catch，否则无法中途停止循环，break或者return都无法使循环中途停止Deepl降重。而for…of循环可以与break，continue和return配合使用，中途停止循环：

1.）forEach() 遍历普通数组

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
arr.forEach(item => {
      //forEach循环
      console.log(item);
    });

打印结果：

2.）forEach() 遍历对象类型数组

const arrObj = [
      {
        id: 1,
        name: "张三"
      },
      {
        id: 2,
        name: "李四"
      },
      {
        id: 3,
        name: "王五"
      }
    ];
arrObj.forEach(item => {
   console.log(item.id + "-------" + item.name);
});

打印结果：

简要说明: 数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱。原因如下：

一般情况下，普通的 for 循环确实比 forEach 循环有更好的性能，这是因为 forEach 本质上是一个函数调用的过程，而函数调用会带来额外的开销。
具体来说，forEach 循环在每次迭代时都需要执行一次回调函数，并且要对回调函数的执行上下文进行绑定，这样就需要创建和销毁大量的函数堆栈，导致额外的系统开销。而普通的 for 循环则不需要执行函数调用操作，在每次迭代中直接访问元素，极大地提高了代码的执行速度。

第四种：map（）

定义和用法

1. map即是 “映射”的意思 ，原数组被“映射”成对应新数组
2. map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
3. map() 不会改变原始数组。
4. map() 不会对空数组进行检测。
5. map支持return

 const arr = [11, 22, 33, 44, 55, 66, 77, 88];
 var newArr = arr.map((value, index) => {
      console.log(value + "----" + index);
      return value * 10;
    });
 console.log(newArr);

打印结果：

简要说明: 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

forEach（）和map（）区别：
两者都是用来遍历数组的。

返回值：

1. forEach() 方法没有返回值（或者说返回 undefined），它只是对数组的每个元素执行指定的回调函数。
2. map() 方法返回一个新的数组，该数组包含对原数组每个元素执行回调函数后的结果。

原数组的改变：

1. forEach() 方法不会改变原始数组。如果在 forEach() 的回调函数中修改了数组的元素，那么这些修改只是针对当前循环的元素有效，不会改变原数组
2. map() 方法不会改变原始数组，而是返回一个新的数组，该数组由原数组经过回调函数操作后的结果组成。
   面试：问js的forEach和map的区别

第五种：filter遍历

定义和用法

filter用于对数组进行过滤。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter() 不会对空数组进行检测；不会改变原始数组

语法

array.filter(function(currentValue,index,arr), thisValue)

let arr = [56, 15, 48, 3, 7];

let newArr = arr.filter(function (value, index, array) {
    return value % 2 === 0;
});

console.log(newArr)
// [56, 48]

第六种：for…of 方法

作为ES6新增的循环方法，个人觉得相当好用，而且方便。这个方法避开了for-in循环的所有缺陷。而且，它可以正确响应break、continue和return语句。

//循环数组
let arr = ['123','qwewq','sfds'];
for(let item of arr){
    console.log(item);    //item指的的就是数组每一项的值。不是索引。
}
//输出
//'123'
//'qwewq'
//'sfds'

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。但是for of也有一个致命伤，就像例子看到的，没有索引。对，这是优点也是缺点。遍历数组对象，直接就是item.属性(或者item[属性]),而不用像for循环那样arr[index].属性(arrindex)。但是你有的时候真的就得用到index。不好意思，只能把数组转成Map()。但我觉得真的需要用到index，还是换成forEach吧。

简要说明: 这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环

第七种：for…in 方法

for in循环是用来遍历对象的。要知道JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。（注意：遍历时不仅能读取对象自身上面的成员属性，也能遍历出对象的原型属性）

语法

let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指对象的属性名
console.log(prop, obj[prop]);
}
// 输出:
// a,1
// b,2
// c,3

for in同样可以用来循环数组,但是不推荐这么做。由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for in循环可以直接循环出Array的索引，但得到的是String而不是Number，所以一旦你想用这个index去进行计算，就会出错。而且因为会遍历原型属性，所以可能得出的结果不会是你想要的(具体细节不多说，需要了解的自己查询，反正很多坑)。虽然可以用hasOwnProperty()方法避免这个缺陷，但是何必呢，循环方法那么多，换一个就是了。

for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}

为什么用for … in?

简要说明: 这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中
它的效率是最低的

关于for …of和for …in区别
ES6 for...of循环_es6 跳出forof-CSDN博客

第八种：find方法

• 遍历数组，找到第一个符合条件的项，并返回该项；不会继续遍历数组；否则返回undefined
• 不会改变数组

[1,4,-5,10].find((n) => n < 0 )
//-5

上面代码找出数组中第一个小于0的成员

[1,5,10,15].find(function(value,index,arr){
 return value > 9
})
//10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

第九种：findIndex方法

• 遍历数组找到第一个符合条件的项，并返回该项的索引值；不会继续遍历数组；否则返回-1。
• 不会改变数组

[1,5,10,15].findIndex(function(value,index,arr){
 return value > 9
})
//2

findIndex() 当中的回调函数也是接收三个参数，与find() 相同。

第十种：Array.some() 方法

1）如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测。
2）如果没有满足条件的元素，则返回false。
3）返回值是布尔值

注意：

1) some() 不会对空数组进行检测。
2) some() 不会改变原始数组。

 var ages = [3, 18, 17, 16]
 var checkoutVal = function checkout (age) {
   console.log(age >= 18) // false true  有一个满足条件的会停止检测剩余的元素
   return age >= 18
 }
 console.log(ages.some(checkoutVal)) // true

let someArr = [2,3,4];
let someResult = someArr.some((item, index)=>{
  return item > 3
});
console.log(someResult);
// 结果为: true

第十一种：Array.every() 方法 （所有的，每一个）

1）如果数组中有一个元素不满足，则整个表达式返回false；且剩余的元素不会再进行检测
2）如果所有元素都满足条件，则返回true。
3）返回值是布尔值

注意：

1) some() 不会对空数组进行检测。
2) some() 不会改变原始数组。

  var ages = [3, 18, 17, 16]
  const fn = (currentValue) => currentValue < 40
  console.log(ages.every(fn)) // true  值全都符合函数条件

let everyArr = [2,3,4];
let everyResult = everyArr.every((item, index)=>{
  return item > 0
});
console.log(everyResult);
// 结果为: true

Array.some() 和Array.every() 的区别？？？

第十二种：reduce() 方法

1）接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
2）第二个参数作为第一次调用的a的值

// reducer
let reduceArr = [0,1,2,3,4]
let reduceResult = reduceArr.reduce((a, b)=>{
  return a + b;
});
console.log(reduceResult);
// 结果: 10

上述列举了几种方式都有一一做过对比分析，基本上可以得出的结论是:
普通for循环才是最优雅的，优化后的for循环最快

注意：
数组方法无法中途停止循环，所以都不可以使用break和continue；
for循环之类的不可以return，但是能正常使用break和continue；