<!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>
