总结一下几个for循环常见用法和区别

Posted 2021-11-25 xiujun

1.for循环
//有人喜欢使用一个临时变量把长度缓存起来，说是大数据时效果更好（我本人没有去验证）

for(j = 0,len=arr.length; j < len; j++) {
  //执行代码 
}

分析可用功能 break和continue

2.forEach
//遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE
//1 没有返回值

arr.forEach((item,index,array)=>{//箭头函数的写法
　　//执行代码
})
arr.forEach(function (item,index,array){//传统写法
　　//执行代码
})

//参数：value数组中的当前项, index当前项的索引, array原始数组；
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
分析可用功能 break和continue都不可使用(需要自己用其他方式来控制break和continue，后面我写了关于这个)

3.For/In 循环
循环遍历对象的属性会更佳（当然也可以遍历数组），在Js中for in 是用来循环遍历对象的属性的，但是这个功能是有局限的，
所遍历的属性必须是对象自定义的属性，对象的内置属性无法进行遍历。（IE6/7/8浏览器不支持）

var person={fname:"John",lname:"Doe",age:25}; 
for (x in person) 
{ 
　　txt=txt + person[x]; 
}

//x为对象的某个属性

4.for/of 循环
for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。
4.1 Arrays（数组）

const iterable = [‘mini‘, ‘middle‘, ‘mo‘]; 
for (const value of iterable) {
　　console.log(value);
}

//打印的是iterable 数组中的每一个值mini，middle，mo
4.2 Maps(映射)
Map 对象就是保存 key-value(键值) 对。对象和原始值可以用作 key(键)或 value(值)。Map 对象根据其插入方式迭代元素。换句话说， for...of 循环将为每次迭代返回一个 key-value(键值) 数组。

const iterable = new Map([[‘one‘, 1], [‘two‘, 2]]);
for (const [key, value] of iterable) {
　　console.log(`Key: ${key} and Value: ${value}`);
}

//输出的是
// Key: one and Value: 1
// Key: two and Value: 2
4.3 String(字符串)

const iterable = ‘javascript‘; 
for (const value of iterable) {
　　console.log(value);
}

//输出的是
// "j","a",.....依次

4.4 JavaScript 提供了四种已知的终止循环执行的方法：break、continue、return 和 throw
(注意return不要出现在循环体中，是一种错误语法，return用于函数体返回值)

const iterable = [‘mini‘, ‘middle‘, ‘mo‘]; 
for (const value of iterable) {
　　console.log(value);
　　break;
}

提示：我们常用return false来阻止提交表单或者继续执行下面的代码，通俗的来说就是阻止执行默认的行为
4.5 普通对象不可迭代
for...of 循环仅适用于迭代。 而普通对象不可迭代

const obj = { fname: ‘foo‘, lname: ‘bar‘ };
for (const value of obj) { 
　　console.log(value);
}

//报错了 TypeError: obj[Symbol.iterator] is not a function