前端JS迴圈操作一覽
阿新 • • 發佈：2020-12-09
<!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>