JavaScript几种常用循环语句

  1. 1. for/in遍历
  2. 2. forEach数组遍历
  3. 3. for/of实例

循环语句(looping statement)——就是程序路径的一个回路,可以让一部分代码重复执行,javascript常用的循环语句:for、for/in、forEach、for/of,它们的工作原理几乎一样:只要满足给定的条件,循环语句里的代码就将重复执行下去,直到给定条件的求值结果不再是true,循环才结束。其中最常用的循环就是对数组元素的遍历。

常用的循环语句有下面几种:

  • for - 用于创建循环,它包含了三个可选的表达式,三个可选的表达式包围在圆括号中并由分号分隔,后面跟随一个语句或一组语句在循环中执行.

  • for/in - 语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行

  • forEach - 对数组的每个元素执行一次提供的函数。

  • for/of - 语句在可迭代对象(包括 Array, Map, Set, String, TypedArray,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.

例子:

1
2
3
let myArray = [1,3,5,9,'Nike']
let myObject = {'name': 'Nike','sex': '男','age': 18}
let myString = 'abcdEFG123'

for/in遍历

1.1、遍历数组

先看看例子:

1
2
3
for(let index in myArray) {
console.log(index) // 0,1,2,3,4
}

这样看起来并没有什么毛病,获取到索引也很正常。那么再看看下面这种情况:

1
2
3
for(let index in myArray) {
console.log(index + 4) // 4,5,6,7,8 这是理想的结果,可真实结果是04,14,24,34,44
}

但是结果总是那么出乎人意料的,这里的index是索引值没有错,但是它是以字符串的形式存在的,并不是number的类型了,如果用这些index运算,一不小心就变成了字符串拼接了。所以使用for/in循环遍历数组还是要慎重。

1.2、遍历对象

不过for/in的设计目的是用于包含键值对的对象遍历,先看例子:

1
2
3
4
5
6
7
8
9
10
let keys = []
let values = []
for(let key in myObject){
//只遍历对象自身的属性,而不包含继承于原型链上的属性。
if (myObject.hasOwnProperty(key) === true){
keys.push(key)
values.push(myObject[key])
console.log(myObject[key])
}
}

推荐总是使用 hasOwnProperty方法, 这将会避免原型对象扩展带来的干扰
object对象没有length属性,那么获取object对象的length就可以通过遍历得到key值的数组的长度来获取啦!这个对于判断对象是否为空很好用(Object.keysJSON.stringify也是判断对象是否为空的方法)

forEach数组遍历

forEach仅限于数组的遍历,基本结构:

1
2
3
4
5
6
7
// callback 回调函数,该函数接收三个参数:
// currentValue 数组中正在处理的当前元素。
// index(索引) 数组中正在处理的当前元素的索引。
// thisArray(可选参数) 当执行回调 函数时用作this的值(参考对象)。
array.forEach(callback(currentValue, index, thisArray){
//do something
}, this)

forEach就是为数组而生的,只要不是数组,就立即报错。就连类数组都不能用它来遍历,看看下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<ul>
<script>
let li = $('li')
console.log(li.length) // 3
li.forEach(function(val){
// Uncaught TypeError: li.forEach is not a function(…)
console.log(val)
})
<script>

因此使用forEach的时候,一定要确认遍历的对象是不是数值,或者有没有可能出现null的情况,都要做好判断才能用,否则就报错。

for/of实例

1.1、语法

1
2
3
for (variable of iterable) {
//statements
}

1.2、特点

  • 遍历数组最简单最直接的方法

  • 避免for/in语法存在的坑

  • 支持break、return和continue语句

  • 可以用于遍历字符串,将字符串看成unicode字符集合

1.3、实例

1
2
3
4
5
6
7
8
9
// 字符串
for(let val of myString){
console.log(val) // a,b,c,d,E,F,G,1,2,3
}
// 数组
for(let val of myArray){
console.log(val) // 1,3,5,9,Nike
}

本文地址:http://www.myboolke.com/2017/08/30/for-xxx/
如有错误或遗漏,欢迎各码友留言。。。