javascript数组的15种循环(包含ES5ES6)

Posted 追忆枉然

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript数组的15种循环(包含ES5ES6)相关的知识,希望对你有一定的参考价值。

 

1.for

优点:

  1.可以递增循环也可以递减循环

  2.可以使用break、continue控制是否跳出循环

 

let list = [‘a‘, ‘b‘, ‘c‘, ‘d‘,‘e‘];
for (var i = 0; i < list.length; i++) {
     console.log(list[i])
 }
// a、b、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

2.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‘

 

3.do{}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‘

 

4.forEach

优点:1.函数式编程方便使用

   2.返回值是undefined

缺点:1.ECMAScript 5.1 ES5 IE9支持

let list = [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘];
list.forEach((item,index,ary) => {
    console.log(`item:${item}----index:${index}----ary:${ary}`)
})

  item:a----index:0----ary:a,b,c,d,e
  item:b----index:1----ary:a,b,c,d,e
  item:c----index:2----ary:a,b,c,d,e
  item:d----index:3----ary:a,b,c,d,e
  item:e----index:4----ary:a,b,c,d,e

 

5.every

功能:测试数组内容是否全部通过

特点:1.[]数组大概率返回true

缺点:1.ECMAScript 5.1 ES5 IE9支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘];
const isPass = list.every((item,index) => {
    return typeof item === ‘string‘
})
console.log(isPass) // false 

6.some

功能:测试数组有一项通过则为true否则为false

特点: 空数组为false

缺点:1.ECMAScript 5.1 ES5 IE9支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘];
const isPass = list.some((item,index) => {
    return typeof item === ‘boolean‘
})
console.log(isPass) //false

7.indexOf

功能:与findIndex一样

缺点: ECMAScript 5.1 ES5 IE9支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘,‘a‘];
const result = list.indexOf(‘a2‘,2)
console.log(result) // 5

8.lastIndexOf

功能:反向查找

缺点: ECMAScript 5.1 ES5 IE9支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘,‘a‘];
const result = list.lastIndexOf(‘a‘,2)
console.log(result) //0

 

9.filter

功能: 过滤数组,当返回值为true时保留,无法操作原数组

缺点:ECMAScript 5.1 ES5 IE9支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
const result = list.filter((item, index) => {
    return typeof item === ‘string‘
})
console.log(result) // ["a", "c", "d", "e", "a"]

10.map

功能:可以对遍历项操作,且返回新的数组,元素组不改变

缺点:ECMAScript 5.1 ES5 IE9支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
const result = list.map((item, index) => {
    return item + ‘_‘
})
console.log(result) // ["a_", "12_", "c_", "d_", "e_", "a_"]

11.reduce

优点:累计计算非常好用

缺点:上手难度比其他函数式编程高一些

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
const result = list.reduce((total,prev,index,arr) => {
    return total + prev;
},‘‘);
console.log(‘result‘,result); //a12cdea

12.for...in 

缺点:虽然可以,不推荐遍历数组,一般用来遍历对象 毕竟key都给你输出了

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
for(let key in list){
    console.log(list[key]);
} //‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘

 

13.find

功能:获取数组符合条件的第一个值,如果没有找到返回undefined

缺点: ECMAScript 2015 (6th Edition, ECMA-262) (ES6) IE不支持

,Edge 14-80支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘];
const result = list.find((item,index) => {
    return item === ‘a‘
})
console.log(result) // a

14.findIndex

功能:获取数组符合条件的第一个值得索引,如果没有找到就返回-1

缺点:ECMAScript 2015 (6th Edition, ECMA-262) (ES6) IE不支持

,Edge 14-80支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘,‘a‘];
const result = list.findIndex((item,index) => {
    return item === ‘a‘
})
console.log(result)  // 0 

15.for...of

缺点:ECMAScript 2015 (6th Edition, ECMA-262) (ES6) IE不支持

let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
for (let s of list) {
    console.log(s);
} //‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘

 

以上是关于javascript数组的15种循环(包含ES5ES6)的主要内容,如果未能解决你的问题,请参考以下文章

带有特定步骤的Javascript for循环

15.Iterator和for...of循环

javascript 数组遍历,几种循环方式的比较。

带有嵌套循环的多维数组Javascript

JavaScript 中的常用12种循环遍历(数组或对象)的方法

JavaScript数组去重6种方法