javascript数组的15种循环(包含ES5、ES6)

230 阅读5分钟

本文已参与「新人创作礼」活动,一 起开启掘金创作之路。

for循环 (ES5)

优点

  • 可以递增循环也可以递减循环
  • 可以使用break、continue控制是否跳出循环 例:
let list = [‘a‘, ‘b‘, ‘c‘, ‘d‘,‘e‘];
for (var i = 0; i < list.length; i++) {
     console.log(list[i])
 }
// ab、c、d、e
let list = [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘];
for (var i = list.length - 1; i > 0; i--) {
    if (i === 0) {
        continue;
    }
    if (i === 2) {
        break;
    }
    console.log(list[i])
}
// e、d

while(){} (ES5)

while 循环会在指定条件为真时循环执行代码块。 优点

  • 没有兼容问题
  • 可以使用break、continue 例:
let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
let i = 0;
while (i < list.length){
    console.log(list[i]);
    i++
} //‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘

do{}while() (ES5)

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

  • 没有兼容问题
  • 可以使用break、continue 例:
let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
let i = 0;
do {
    console.log(list[i])
    i++;
} while (i < list.length) //‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘

forEach (ES5)

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

注意:  forEach() 对于空数组是不会执行回调函数的。 优点:

  • 函数式编程方便使用
  • 返回值是undefined 缺点:
  • 有兼容性问题,不兼容ie9以下 例:
let list = [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘];
list.forEach((item,index,ary) => {
    console.log(`item:${item}----index:${index}----ary:${ary}`)
})

every(ES5)

用于检测数组所有元素是否都符合指定条件 every() 方法使用指定函数检测数组中的所有元素:

  • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true。 注意:  every() 不会对空数组进行检测。

注意:  every() 不会改变原始数组。

缺点:

  • 有兼容性问题,不兼容ie9以下 例:
var arr = [1, 2, 3, 4, 5, 11];
const result = arr.every((item) => item < 10)
console.log(result);
// false

some(ES5)

用于检测数组中的元素是否满足指定条件 some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。 注意:  some() 不会对空数组进行检测。

注意:  some() 不会改变原始数组。

缺点:

  • 有兼容性问题,不兼容ie9以下 例:
var arr = [1, 2, 3, 4, 5, 11];
const result = arr.some((item) => item < 10)
console.log(result);
// true

indexOf(ES5)

返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。 注意:  indexOf() 方法区分大小写。

优点: 无兼容性问题。

例:

var arr = [1, 2, 3, 4, 5, 11];
const result = arr.indexOf(11)
console.log(result);
// 5

lastIndexOf(ES5)

返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索 注意:  该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。

开始检索的位置在字符串的 start 处或字符串的结尾(没有指定 start 时)。

如果没有找到匹配字符串则返回 -1 。

注意: lastIndexOf() 方法是区分大小写的! 优点: 无兼容性问题。

例:

var arr = [1, 2, 3, 11, 5, 1];
const result = arr.lastIndexOf(11)
console.log(result);
// 3

filter(ES5)

创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意:  filter() 不会对空数组进行检测。

注意:  filter() 不会改变原始数组。 缺点:

  • 有兼容性问题,不兼容ie9以下 例:
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.filter((item) => item > 3);
console.log(result);
// [11, 5]

map(ES5)

返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

按照原始数组元素顺序依次处理元素。 注意:  map() 不会对空数组进行检测。

注意:  map() 不会改变原始数组。 缺点:

  • 有兼容性问题,不兼容ie9以下 例:
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.map((item,) => item * 2);
console.log(result);
// [2, 4, 6, 22, 10, 2]

reduce(ES5)

接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 缺点:

  • 有兼容性问题,不兼容ie9以下 优点:
  • 累计计算非常好用 注意:  reduce() 对于空数组是不会执行回调函数的。
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.reduce((total, item) => total + item)
console.log(result);
//23

for...in (ES5)

for/in 语句用于循环对象属性。 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。主要用来遍历对象 优点:

  • 可以循环对象
  • 兼容所有浏览器 例:
var obj = { name: '张三', age: 20, sex: '男' }
for (let key in obj) {
console.log(key);
}
// '张三','age','男'

find(ES6)

返回通过测试(函数内判断)的数组的第一个元素的值。 为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined 缺点:
  • 兼容性差,不兼容ie
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.find(item => item > 5)
console.log(result);
//11

findIndex(ES6)

返回传入一个测试条件(函数)符合条件的数组第一个元素位置。 findIndex() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 -1 缺点:
  • 兼容性差,不兼容ie
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.findIndex(item => item > 5)
console.log(result);
//3

for...of(ES6)

可以迭代数组、类数组以及任何可以迭代的对象(mapssetsDOM集合) 缺点:

  • 兼容性差,不兼容ie 例:
var arr = [1, 2, 3, 11, 5, 1];
for (let item of arr) {
console.log(item);
}
//1, 2, 3, 11, 5, 1