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)的主要内容,如果未能解决你的问题,请参考以下文章