JavaScript前端7种常用for循环用法-前端开发-阁主学习小站

摘要：

for循环的使用场景选择：

如果需要把数据映射成另外一个数组，如变成对应布尔值，推荐使用 map ，不会修改原数组，使用语法简单。
数组遍历时，可以使用 for 、forEach 或 for…of。
遍历的是纯对象时，推荐使用 for … in 。
如果是需要对迭代器遍历，推荐使用 for … of。
如果是在数组中筛选符合条件的数组，使用 fillter 。

## 盘古时期的for循环
for循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历，可以遍历：数组、对象、字符串。
```JavaScript
// 遍历字符串
let str = '阁主博客'
for (let i = 0; i < str.length; i++) {
    console.log(str[i])  //阁 主 博 客
}

// 遍历数组
const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]) //1 2 3
}

// 遍历对象
const obj = {
    age: 22,
    name: '阁主博客'
}
for (let i = 0, keys = Object.keys(obj); i < keys.length; i++) {
    console.log(obj[keys[i]]) //22 阁主博客
}
```
## 使用for...in实现循环
for...in 是在ES5中新增的，以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
```JavaScript
// 遍历字符串
let str = '阁主博客'
for (let i in str) {
    console.log(i) //1 2 3
    console.log(str[i]) //阁 主 博 客
}

// 遍历数组
const arr = [1, 2, 3]
for (let i in str) {
    console.log(i) //0 1 2
    console.log(arr[i]) //1 2 3
}

// 遍历对象
const obj = {
    age: 22,
    name: '阁主博客'
}
for (let key in obj) {
    console.log(key) //age name
    console.log(obj[key]) //阁主博客
}
```
## for...of循环
for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。
```JavaScript
// 迭代数组
const arr = [1, 2, 3]
for (let value of arr) {
    console.log(value) //1 2 3
}

// 迭代字符串
let str = '阁主博客'
for (let value of str) {
    console.log(value) //阁 主 博 客
}

// 迭代TypedArray，一个类型化数组，描述了一个底层的二进制数据缓冲区，一般前端场景用的不是很多。
let u16 = new Uint16Array([0x00, 0xff])
for (let value of u16) {
    console.log(value) //0 255
}

// 迭代 Map
let map = new Map([
    ['name', '阁主博客'],
    ['age', 22]
])
for (let key of map) {
    console.log('key', key) //['name', '阁主博客']['age', 22]
}
for (let [key, value] of map) {
    console.log(key) //name age
    console.log(value) //阁主博客 22
}

// 迭代Set
let set = new Set([5, 4, 3, 2, 2, 1])
for (let value of set) {
    console.log(value) //5 4 3 2 1
}
```
## for await..of遍历异步或同步可迭代对象
创建一个循环，该循环遍历异步可迭代对象以及同步可迭代对象，包括内置的String、Array，类数组对象（Arguments或NodeList），TypedArray、Map、Set和用户定义的异步/同步迭代器。
```JavaScript
async function* asyncGeneratorFunc() {
    let i = 0;
    while (i < 5) {
        yield i++
    }
}

(async function () {
    for await (num of asyncGeneratorFunc()) {
        console.log(num)// 0 1 2 3 4 
    }
})()
```
## forEach循环
forEach是ES5版本发布的，相当于普通for循环的加强版。
```JavaScript
//遍历数组
const arr = [1, 2, 3, 4, 5]
arr.forEach(
    (item, index) => {
        console.log(index) //0 1 2 3 4
        console.log(item) //1 2 3 4 5 
    }
)

//遍历对象
const objet = {
    age: 22,
    name: '阁主博客'
}
const keys = Object.keys(objet)
keys.forEach(
    (key) => {
        console.log(key) //age name
        console.log(objet[key]) //22 阁主博客
    }
)
```
## map循环
map遍历时可以返回一个新数组，新数组的结果是原数组中每一个元素都调用一次回调函数后返回的值。
```JavaScript
//遍历数组
const arr = [1, 2, 3, 4, 5]
const newArr = arr.map(
    (item) => item * 10
)
console.log(newArr) //[10,20,30,40,50]
```
注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。
## filter循环
filter遍历时可以返回一个新的数组，新数组的结果是原数组中每个元素都调用一次回调函数进行过滤后返回的值。
```JavaScript
//遍历数组
const arr = [1, 2, 3, 4, 5]
const newArr = arr.filter(
    (item) => item > 2
)
console.log(newArr) //[3,4,5]
```

本文地址：https://www.mainblog.cn/280.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。