<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端循环一览</title> </head> <body> <script> // 1、while循环 console.log('--------------where循环Array--------------'); var i = 0; while (i < 10) { console.log(i) i += 1; } // 1、do-while循环,先执行后判断,至少执行一次 console.log('--------------do-where循环Array--------------'); var i = 0; do { console.log(i) i += 1; } while (i < 10) // 2、for-of循环 (Array、Map、Set、String、Arguments ) console.log('--------------for-of循环Array--------------'); let arr = [1, 2, 3, 4, 5] for (let value of arr) { console.log(value) } console.log('--------------for-of循环Map--------------'); //第一种创建map的方式 let map = new Map(); map.set('a', 1).set('b', 2).set('c', 3) console.log(map) //第二种创建map的方式 let map1 = new Map([ ['a', 1], ['b', 2], ['c', 3] ]) console.log(map1); for (let [key, value] of map) { console.log(key, value) } console.log('--------------for-of循环Set--------------'); let set = new Set([1, 2, 2, 3, 3, 4, 5, 6]) for (let value of set) { console.log(value) } console.log('--------------for-of循环String--------------'); let str = '我是循环String的代码'; for (let value of str) { console.log(value); } console.log('--------------for-of循环Arguments--------------'); function func() { for (let value of arguments) { console.log(value) } } func(1, 3, 4); console.log('--------------for-of循环object--------------'); let obj1 = { a: 1, b: 2, c: 3 } //第一种方式,求出它的键 for (let key of Object.keys(obj1)) { console.log(key) } //第二种方式,求出它的值 for (let key of Object.values(obj1)) { console.log(key) } //第三种方式,Object.entries返回一个可枚举的键值对 for (let [key, value] of Object.entries(obj1)) { console.log(key, value) } // 3、for-in循环的使用(key in json) console.log('--------------for-in循环object--------------'); let obj = { a: 1, b: 2, c: 3 } for (let key in obj) { console.log(key, obj[key]) } //4、map循环的使用 console.log('--------------map循环Array--------------'); let arr1 = ['a', 'b', 'c']; let arr3 = [{ 'a': 'a' }, { 'a': 'b' }, { 'a': 'c' }]; let newArr1 = arr1.map((value, index) => { console.log(value, index) if (index == 0) { value = 'change' } return value }).filter(value => { // console.log(item,1234) return value == 'change' }) arr3.map((value, index) => { if (index == 0) { value.a = 'change' } }) console.log(arr1, arr3, newArr1) //4、forEach循环的使用 console.log('--------------forEach循环Array--------------'); let arr2 = ['a', 'b', 'c']; let arr4 = [{ 'a': 'a' }, { 'a': 'b' }, { 'a': 'c' }]; let newArr2 = arr2.forEach((value, index) => { console.log(value, index) if (index == 0) { value = 'change' } return value }) arr4.forEach((value, index) => { if (index == 0) { value.a = 'change' } }) console.log(arr2, arr4, newArr2) console.log('--------------forEach与map的区别--------------'); console.log( '可以从上面的代码中看见map循环可以接受返回的一个新数组并进行链式操作,forEach不能返回一个新数组;改变值的方面,forEach跟map都不能改变一个不是由对象构成的数组,因为改变对象改变的是引用地址,不是对象的值' ); //5、every循环的使用,判断返回的数组每一项是否全部满足条件 console.log('--------------every循环Array--------------'); let arr5 = [2, 3, 4, 5] let bool1 = arr5.every(item => item > 2) console.log(bool1) //6、some循环的使用,判断返回的数组是否满足1个或1个以上条件 console.log('--------------some循环Array--------------'); let arr6 = [2, 3, 4, 5] let bool2 = arr6.some(item => item > 2) console.log(bool2) //7、filter循环的使用,将满足条件的值筛选出来 console.log('--------------filter循环Array--------------'); let arr7 = [2, 3, 4, 5]; let arr8 = arr7.filter(item => item > 2) console.log(arr8) </script> </body> </html>