一、传统for循环
用途:循环代码块一定的次数
遍历 数组、对象(需先转换成数组)、字符串
可以使用return、break等来中断循环
使用 break 语句来跳出循环,使用continue 语句来跳过点前的迭代,并执行下一个迭代。
语法:
for(循环变量(statement1,...);循环条件(statement2);变量的改变(statement3,...)){
循环体;
}
参数:
statement1 | 可选。在循环之前执行,用于变量的初始化,初始化多个变量使用逗号隔开(,)。 注意: 该参数可以省略。但是,不要忽略 分号 ";"。 |
statement2 | 可选。定义执行循环的条件。 通常该语句用于条件判断,如果条件为 true, 循环会继续执行,如果为 false,循环终止。 注意: 该参数可以省略。但是,不要忽略 分号 ";"。同样,如果你忽略了该参数,你必须在循环中提供跳出循环的条件。否则语句无限循环,会造成浏览器崩溃。 |
statement3 | 可选。在每次循环后执行该语句。通常该语句用于自增或自减计数变量。 注意: 该参数可以忽略(例如: 自增或自减值在循环内操作) |
死循环:for(;;){循环体}
举个小例子:
// 遍历数组
let arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
/* 1
2
3
*/
//遍历对象
let obj = {
name:'张三',
age:'20',
}
for (var i = 0;i<Object.keys(obj).length; i++){
console.log(obj[keys[i]])
}
/* 张三
20
*/
//遍历字符串
let str = 'abc'
for (var i = 0; i < str.length; i++){
console.log(str[i])
}
/* a
b
c
*/
二、for in
用途:
循环遍历对象的属性(可以循环数组, 但更适合遍历对象)
可以正确响应break、continue和return语句
ES5 中新增的,以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性。
循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
for-in遍历的index值"0","1","2"等是字符串而不是数字
有些时候,会出现随机顺序的遍历
语法:
for (var in object) {
执行的代码块
}
参数:
var | 必须。指定的变量可以是数组元素,也可以是对象的属性。 |
object | 必须。指定迭代的的对象。 |
举个小例子:
let person = {fname:"John", lname:"Doe", age:25};
for (let key in person) {
console.log('key ---',key )
console.log('person[key ]----',person[key ])
}
输出
key --- fname
person[key ]---- John
key --- lname
person[key ]---- Doe
key --- age
person[key ]---- 25
用for...in遍历"数组": 循环变量x是数组的下标
(菜鸟上说:不要使用 for/in 语句来循环数组的索引)
既然如此就不举例了!(最好不要遍历数组(虽然我用过也没出啥问题,但现在知道了就尽量不使用),具体原因等我理解透了再补充)
三、for of
定义:
在 可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句
用途:
只能遍历可迭代对象
可以使用break,continue和return 支持map和Set对象遍历
不适用于处理原有的原生对象(例如obj={name:'zhangsan',age:20}
举个小例子:
//遍历数组
let arr=["张三","李四","王五","二麻子"];
for (let item of arr){
console.log(item)
}
//输出
张三
李四
王五
二麻子
//遍历对象
let person=[{name:"张三",age:23},{name:"李四",age:20}]
for (let item of person){
console.log(item)
}
//输出
{name: '张三', age: 23}
{name: '李四', age: 20}
四、forEach
定义:
用于调用数组的每个元素,并将元素传递给回调函数。
forEach() 本身是不支持的 continue 与 break 语句的
使用 return 语句实现 continue 关键字的效果:
不改变原数组,无返回值undefined
语法:
array.forEach(function(currentValue, index, arr), thisValue)
参数:
function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。
| ||||||
thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空, "undefined" 会传递给 "this" 值 |
举个小例子:
//遍历对象
let arr=[{name:"张三",age:23},{name:"李四",age:20}]
arr.forEach((item, index) => {
console.log(index);//0 1
console.log(item); // {name: '张三', age: 23} {name: '李四', age: 20}
})