JavaScript前端7种常用for循环用法

盘古时期的for循环

for循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历，可以遍历：数组、对象、字符串。

// 遍历字符串
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以外的可枚举属性，包括继承的可枚举属性。

// 遍历字符串
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)的数据结构,注意它的兼容性。

// 迭代数组
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和用户定义的异步/同步迭代器。

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循环的加强版。

//遍历数组
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遍历时可以返回一个新数组，新数组的结果是原数组中每一个元素都调用一次回调函数后返回的值。

//遍历数组
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遍历时可以返回一个新的数组，新数组的结果是原数组中每个元素都调用一次回调函数进行过滤后返回的值。

//遍历数组
const arr = [1, 2, 3, 4, 5]
const newArr = arr.filter(
    (item) => item > 2
)
console.log(newArr) //[3,4,5]