?2022?|?2022? JavaScript超详细循环总结
前言
这是我梳理JavaScript基础系列文章中的一篇，这里没有谈及各类循环的效率，主要是总结一下使用方式和了解一些注意事项，点击二三级标题可以打开MDN相应文档，日常博客记录在语雀，欢迎关注 语雀文档。
如果文章对你有帮助的话，欢迎点赞评论收藏加转发。有问题和疑惑的话也可以在评论区留言，我会第一时间回复大家，如果觉得我的文章哪里有知识点错误的话，也恳请能够告知，把错的东西理解成对的，无论在什么行业，都是致命的。
JavaScript中循环
forfor...offor...infor await...offorEach这个其实不能划为此类whiledo...while
const string='12345'const array = [1, 2, 3, 4, 5]const uint8Array=new Uint8Array([0, 1, 2, 3])const searchParams = new URLSearchParams("key1=value1&key2=value2");
const obj = {
'obj0': 1,
'obj1': 2,
'obj2': 3,
'obj3': 4,
'obj4': 5
}const obj2 = Object.defineProperties({
'obj0': 1
}, {
'obj1': {
value: 2,
enumerable: true
},
'obj2': {
value: 3,
enumerable: true
},
'obj3': {
value: 4,
enumerable: false
},
});
obj2.__proto__.obj4=5const map = new Map([[0,1],[1,2],[2,3],[3,4],[4,5]])
const set = new Set([1,2,3,4,5])for 纯粹的
for是JavaScript中最基础的循环语句for (let i = 0;
i < array.length;
i++) {
console.log(map.get(i));
//循环输出1 2 3 4 5
}需要知道的是，
for的三个表达式都是可选的，也就是上面的let i = 0;
i < array.length;
i++这部分，但是，虽然表达式是可选的，但三个;
是强制要求要有的。for (let i = 0,j=0;
;
i++,j++) {
//这里不给他中止，会gg的
if (i > array.length) break;
console.log(i,j);
}
// 0 0
// 1 1
// 2 2
// 3 3
// 4 4
// 5 5如果你有需要的话，你甚至可以声明一个无语句的
for循环，这样也是可以的。let j=[]
for (let i = 0;
i < array.length;
i++,j.push(i));
//这个分号不能少
console.log(j) //[ 1, 2, 3, 4, 5 ]for...of
for...of语句循环可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等），循环出来的的对象的值。for (const element of array) {
console.log(element);
//循环输出1 2 3 4 5
}这里要注意，普通的
object对象不是可迭代对象，无法使用for...of，for (let element of obj) {
console.log(element);
// TypeError: obj is not iterable
}甚至可以循环字符串
for (let element of string) {
console.log(element);
//循环输出1 2 3 4 5
}也能循环Map和Set
for (let element of map) {
//是个数组哟
console.log(element[0],element[1]);
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
}for (let element of set) {
console.log(element);
//循环输出1 2 3 4 5
}【?2022?|?2022? JavaScript超详细循环总结】对于
for...of的循环，可以由break、throw、continue、return终止。for (let element of set) {
if(element>3) break
console.log(element);
//循环输出1 2 3
}对于不支持的普通
object，我们可以为他创建一个迭代器，这样也能实现for...of循环。obj[Symbol.iterator] = function*(){
var keys = Object.keys(obj);
for(var key of keys){
yield [key,obj[key]]
}
};
for(var [key,value] of obj){
console.log(key,value);
// obj0 1
// obj1 2
// obj2 3
// obj3 4
// obj4 5
}也能借助Object.entries 实现遍历，
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。for (const [key, value] of Object.entries(obj2)) {
console.log(`${key}: ${value}`);
//obj0: 1
//obj1: 2
//obj2: 3
}还有一些其他可迭代对象可以使用
for...of，这里就不一一举例了。for...in
for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性，注意：语句无法保证遍历顺序（各浏览器有点区别，也可以去了解下常规属性和排序属性）。for (let prop in obj) {
console.log(prop + " = " + obj[prop]);
// obj0 = 1
// obj1 = 2
// obj2 = 3
// obj3 = 4
// obj4 = 5
}只会遍历出可迭代的属性，
obj2['obj3']的enumerable为false所有没有被遍历出来，obj2['obj4']是继承过来的属性（__proto__上面的），也是能遍历出来的。for (let prop in obj2) {
console.log(prop + " = " + obj2[prop]);
// obj0 = 1
// obj1 = 2
// obj2 = 3
// obj4 = 5
}如果仅需自身属性，可以使用hasOwnProperty判断
for (let prop in obj2) {
if (obj2.hasOwnProperty(prop)) {
console.log(prop + " = " + obj[prop]);
}
// obj0 = 1
// obj1 = 2
// obj2 = 3
}for await...of 和
for...fo一样，但它只适用于异步可迭代的异步迭代器。function getRes(){
returnfetch('http://whois.pconline.com.cn/ip.jsp')
.then(response => 'res')
}async function test(){
let i=0
let arr = [getRes(),getRes(),getRes()]
for await (let x of arr){
i++
console.log(x+'---'+i);
//按顺序循环出 res---1 res---2 res---3
}
}test()异步生成器已经实现了异步迭代器协议, 所以可以用
for await...of循环。async function* asyncGenerator() {
let i = 0;
while (i < 3) {
yield i++;
}
}async function test(){
for await (num of asyncGenerator()) {
if (num>1) break;
//也能使用break中止 ，完全和for...of一样
console.log(num);
//按顺序循环出 0 0
}
}test()while
while语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。let n=0
while (n < array.length) {
console.log(array[n]);
//循环输出1 2 3 4 5
n++;
}do...while
do...while 语句创建一个执行指定语句的循环，直到条件值为 false。在执行后do内的代码后，检测while内的条件，所以do内代码至少会执行一次。let n=0do {
console.log(array[n]);
//循环输出1 2 3 4 5
n++;
}while (n < array.length)do {
console.log(array[n]);
//1至少会循环一次
n++;
}while (n < 0)forEach
JavaScript中Array、Map、Set、NodeList、TypedArray、URLSearchParams都存在forEach方法，对上述类型的每个元素执行一次给定的函数，无返回值。除URLSearchParams外，其他都有第二个thisArg可选参数，在Map.prototype.forEach中有示例。Map.prototype.forEach
map.forEach((value,key,myMap)=>{
console.log(`${key}-${value}-${myMap.get(key)}`)
// 0-1-1
// 1-2-2
// 2-3-3
// 3-4-4
// 4-5-5
})//第二个参数，本文后续类型的不再举例，这里不能使用箭头函数
//如果使用箭头函数表达式来传入函数参数， thisArg 参数会被忽略，因为箭头函数在词法上绑定了 this 值。
map.forEach(function(value,key,myMap){
console.log(`${key}-${value}-${myMap.get(key)}-${this.exp}`)
// 0-1-1-exp
// 1-2-2-exp
// 2-3-3-exp
// 3-4-4-exp
// 4-5-5-exp
},{exp:'exp'})Array.prototype.forEach
forEach方法按升序为数组中含有效值的每一项执行一次callback函数；forEach不会改变原数组，但是可以被callback 修改；forEach不可链式调用；forEach遍历的范围在第一次调用callback前就会确定；- 除了抛出异常以外，没有办法中止或跳出
forEach循环； - 如果已经存在的值被改变，
callback拿到的是最新的值； - 调用
forEach后添加到数组中的项不会被callback访问到； - 已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了（例如使用
shift），之后的元素将被跳过。
array.forEach((currentValue, index ,myArray)=> {
console.log(`${currentValue}-${index}-${myArray[index]}`);
// 1-0-1
// 2-1-2
// 3-2-3
// 4-3-4
// 5-4-5
});
forEach遍历的范围在第一次调用 callback 前就会确定。调用 forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach(遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了（例如使用 shift），之后的元素将被跳过。array.forEach((currentValue) => {
if (currentValue =https://www.it610.com/article/== 1) {
//已经存在的值被改变，则传递给 callback 的值是 forEach() 遍历到他们那一刻的值
array[4] = 666
//不会遍历出来，forEach遍历的范围在第一次调用 callback 前就会确定
array.push(777)
}
console.log(currentValue)
// 1 2 3 4 666
});
array.forEach((currentValue) => {
if (currentValue =https://www.it610.com/article/== 1) {
array.shift();
}
//执行到1的时候，此时currentValue已经是1了，所以可以打印出来，把数组第一个删除，导致
//所有数组向前后退了一步[2,3,4,5],但是此时，索引已经是1了,所以跳过了2 打印3 4 5
console.log(currentValue)
// 1
// 3
// 4
// 5
});
除了抛出异常以外，没有办法中止或跳出
forEach() 循环array.forEach((currentValue)=> {
if(currentValue>3) break;
// Uncaught SyntaxError: Illegal break statement
console.log(currentValue)
});
扁平化数组可以看看我的这篇文章
Set.prototype.forEach
set.forEach((value,mySet)=>{
console.log(`${value}-${mySet}`)
// 1-1
// 2-2
// 3-3
// 4-4
// 5-5
})NodeList.prototype.forEach
let node = document.createElement("div");
let kid1 = document.createElement("p");
let kid2 = document.createTextNode("hey");
let kid3 = document.createElement("span");
node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);
let list = node.childNodes;
list.forEach((currentValue, currentIndex, listObj) => {
console.log(`${currentValue}-${currentIndex}-${listObj[currentIndex]}`)
// [object HTMLParagraphElement]-0-[object HTMLParagraphElement]
// [object Text]-1- [object Text]
// [object HTMLSpanElement]-2- [object HTMLSpanElement]
}
);
TypedArray.prototype.forEach
TypedArray一个类型化数组
uint8Array.forEach((element, index, array)=>{
console.log(`${element}-${index}-${array[index]}`)
// 0-0-0
// 1-1-1
// 2-2-2
// 3-3-3
});
URLSearchParams.forEach
searchParams.forEach((value, key,searchParams)=> {
console.log(value, key,searchParams.get(key));
// value1 key1 value1
// value2 key2 value2
});
for...of和for...in异同
- 相同点
for...in和for...of语句都是循环（迭代）一些东西；- 都可以
break,continue和return中断遍历。
- 不同点
for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性，注意：语句无法保证遍历顺序；for...in迭代的是对象的键，而for...of则迭代对象的键对应的值；for...in可以迭代任何对象，但for...of则需要对象是可迭代对象；；
不同点：
do...while至少会循环一次JavaScript中的break,continue和return return return语句终止函数执行（
return 是函数返回语句，但是返回的同时也将函数停止），并返回一个指定的值给函数调用者，如果忽略，则返回 undefined。array.forEach是f()内部的一个方法，在array.forEach内return和在f()方法内return是不一样的。// 在函数中
function f() {
array.forEach((item)=>{
console.log(item) // return无效 连续打印 1 2 3 4 5
return item+1//array.forEach是无返回值的
})
console.log(2) //打印2
}console.log(f()) //undefined//在全局作用域
array.forEach((item)=>{
console.log(item)
return item+1// return无效 连续打印 1 2 3 4 5
})
console.log(3) //打印3在函数内部或全局作用域使用
for...in，return能正常中断for...in语句执行// 在函数中
function f() {
for (const objElement in array) {
console.log(array[objElement]) //1
return array[objElement]
}
console.log(2) //无法打印，已经中止函数执行
}console.log(f()) //1// 在全局作用域
for (const objElement in array) {
console.log(array[objElement]) //1
return array[objElement]
}
console.log(3) //无法打印，已经中止在函数内部或全局作用域使用
for...of，return能正常中断for...of语句执行// 在函数中
function f() {
for (const objElement of array) {
console.log(objElement) //1
return objElement
}
console.log(2) //无法打印，已经中止函数执行
}console.log(f()) //1// 在全局作用域
for (const objElement of array) {
console.log(objElement) //1
return objElement
}
console.log(3) //无法打印，已经中止在函数内部或全局作用域使用
for，return能正常中断for语句执行// 在函数中
function f() {
for (let i = 0;
i < array.length;
i++) {
console.log(array[i]) // 1
return array[i]
}
console.log(2) //无法打印，已经中止函数执行
}console.log(f()) //1// 在全局作用域
for (let i = 0;
i < array.length;
i++) {
console.log(array[i]) // node环境和v8 表现不一致 Illegal return statement
return array[i]
}
console.log(3) //无法打印，已经中止执行 在函数内部或全局作用域使用
while和do...while，return能正常中断while和do...while语句执行// 在函数中
function f() {
let n=0
while (n < array.length) {
n++;
if (n === 3) {
return 'f';
}
console.log(n) // 1 2
}
console.log(2) //2
}console.log(f()) //f//在全局作用域
let n=0while (n < array.length) {
n++;
if (n === 3) {
return 'f';
// Illegal return statement
}
console.log(n)
}
console.log(3) 小结：
return会将此时进行的语句停止，但是return更加适用于函数语句；- 对于
forEach方法，除抛出异常外无法中断，本节后面不再对forEach进行举例。
label 语句，后面专门写一篇文章)，并把程序控制流转到紧接着被中止语句后面的语句。在函数内部或全局作用域使用
for...in，break能正常中断当前循环，但不会阻止后续程序执行。// 在函数中
function f() {
for (const objElement in array) {
console.log(array[objElement]) //1
break
}
console.log(2) //2
}
//
console.log(f()) //undefined// // 在全局作用域
for (const objElement in array) {
console.log(array[objElement]) //1
break
}
console.log(3) //3在函数内部或全局作用域使用
for...of，break能正常中断当前循环，但不会阻止后续程序执行。// 在函数中
function f() {
for (const objElement of array) {
console.log(objElement) //1
break
}
console.log(2) //2
}
//
console.log(f()) //undefined// // 在全局作用域
for (const objElement of array) {
console.log(objElement) //1
break
}
console.log(3) //3在函数内部或全局作用域使用
for，break能正常中断当前循环，但不会阻止后续程序执行。// 在函数中
function f() {
for (let i = 0;
i < array.length;
i++) {
console.log(array[i]) // 1
break;
}
console.log(2) //2
}
//
console.log(f()) //undefined// // 在全局作用域
for (let i = 0;
i < array.length;
i++) {
console.log(array[i]) // 1
break;
}
console.log(3) //3在函数内部或全局作用域使用
while和do...while，break能正常中断当前循环，但不会阻止后续程序执行。// 在函数中
function f() {
let n=0
while (n < array.length) {
n++;
if (n === 3) {
break;
}
console.log(n) // 1 2
}
console.log(2) //2
}console.log(f()) //undefined//在全局作用域
let n=0while (n < array.length) {
n++;
if (n === 3) {
break;
}
console.log(n) // 1 2
}
console.log(3) //3小结：
break终止当前循环，但不会阻止后续程序执行；continue
continue跳过本次循环，继续下一次循环。// 在函数中
function f() {
for (let i = 0;
i < array.length;
i++) {
if(array[i] === 1) continue;
console.log(array[i]) // 2 3 4 5
}
console.log(2) //2
}console.log(f()) //undefined//在全局作用域
for (let i = 0;
i < array.length;
i++) {
if(array[i] === 1) continue;
console.log(array[i]) // 2 3 4 5}
console.log(3) //3在函数内部或全局作用域使用
for...in，continue能正常跳过本次循环，继续下一次循环。// 在函数中
function f() {
for (const objElement in array) {
if(array[objElement] === 1) continue;
console.log(array[objElement]) // 2 3 4 5
}
console.log(2) //2
}console.log(f()) //undefined//在全局作用域
for (const objElement in array) {
if(array[objElement] === 1) continue;
console.log(array[objElement]) // 2 3 4 5
}
console.log(3) //3在函数内部或全局作用域使用
for...of，continue正常跳过本次循环，继续下一次循环。// 在函数中
function f() {
for (const objElement of array) {
if(objElement === 1) continue;
console.log(objElement) // 2 3 4 5
}
console.log(2) //2
}console.log(f()) //undefined//在全局作用域
for (const objElement of array) {
if(objElement === 1) continue;
console.log(objElement) // 2 3 4 5
}
console.log(3) //3在函数内部或全局作用域使用
while和do...while，continue跳过本次循环，继续下一次循环。// 在函数中
function f() {
let n=0
while (n < array.length) {
n++;
if (n === 3) {
continue;
}
console.log(n) // 1 2 4 5
}
console.log(2) //2
}console.log(f()) //undefined//在全局作用域
let n=0while (n < array.length) {
n++;
if (n === 3) {
continue;
}
console.log(n) // 1 2 4 5
}
console.log(3) //3小结：
continue用于跳过本次循环，继续下一次循环。总结
forEach除了抛出异常，否则无法中断；- 三者都会将此时进行的语句停止/跳过；
break中断当前循环，但不会阻止后续程序执行；continue跳过本次循环，继续下一次循环；return是函数返回语句，但是返回的同时也将函数停止；- 使用的语句环境不一样，
break和continue是用在循环或switch语句中，return是用在函数语句中。
首发于语雀文档@is_tao
MDN
js中的break,continue和return到底怎么用？
推荐阅读
- 为什么你的路演总会超时（）
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 事件代理
- 数组常用方法一
- 松软可口易消化，无需烤箱超简单，新手麻麻也能轻松成功~
- 原生家庭之痛与超越
- BNC公链|BNC公链 | Eth2.0测试网Topaz已质押超100万枚ETH
- 89㎡挤出小三房，电视墙装的超好看！
- Android超简单实现沉浸式状态栏
- 超级行动力第二次作业-行动大于学习的秘密